How to have jquery mobile listview (or similar) with multiple columns

Question

I am surprised that this is not asked more often... I created the question after an hour of trying - then 11 minutes after creating the question, I came up with a viable answer that could be improved upon...

I want a list, each row to have two small buttons, one wide button followed by two buttons.

[small][small][-----wide button-----][small][small]
[small][small][-----wide button-----][small][small]
[small][small][-----wide button-----][small][small]

Listview only allows two buttons.

I tried controlgroup but the wide button gets assigned a varied, not fixed width making multiple rows look untidy.

Grids use fixed width columns so small icons sit with wide space either side.

The small button to be a jquery mobile button with icon no text.

The wide button will use maximum remaining width (without wrapping the small buttons onto a new line) though hardcoding a width is less preferable, is acceptable.

(I want it like a table so the size of each button in the first row should repeat on every subsequent row).

My CSS is not great but my latest attempt is to play with controlgroups and see if I can change the width of the wide button.

HTML5

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-corner-all">No icon</a>
    <a href="#" id="abc" class="ui-btn ui-icon-delete ui-btn-icon-left width300">Left</a>
    <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-corner-all">No icon</a>
    <a href="#" id="abc" class="ui-btn ui-icon-delete ui-btn-icon-left width300">Left</a>
    <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
</div>

CSS

.width300 {
    width: 300px;
}

Can someone help me

1. Remove the gaps between each row?
2. Round the corners of the first and last row?

Thanks!

Answer 1

Both Omar and ezanker both provide workable answers above.

CSS:

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(4) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(5) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 10%;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

HTML

<div class="ui-content">
  <div class="flex-container flex-container-style fixed-height">
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">1</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">2</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">3</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">4</a></span></div>
    <div class="flex-item"><span contenteditable=""></span><span class="counter"><a href="#" class="ui-btn">5</a></span></div>
  </div>
</div>