[css3-flexbox] is this correct use case?

Consider this toolbar rendering:

   http://terrainformatica.com/w3/scide-toolbar.png

Its markup is pretty straightforward and looks like this:

<div class="toolbar">
   <button id="new" />
   <button id="open" />
   ...
   <select id="source-type">...</select>
   <button id="help" />
</div>

Styles of this toolbar look like below.
( Note that I am using my own flex module[1] here.
 I hope its notation is clear enough to understand idea
 of this layout )

div.toolbar { flow:horizontal; }

div.toolbar > button {
   width:28px;
   min-height:28px;
   height:*; // flex(1) - spans whole height of toolbar
}

div.toolbar > select {
   margin:* 6px; // vertical margins are flex(1)
                       // moving it in the v-middle of toolbar
}

div.toolbar > button:last-child {
   margin-left: *; // flex(1) - attach #help to the right side
}

In some circumstances (e.g. large fonts used) intrinsic height
of the <select> can be greater than 28px (button height).
In this case too buttons shall span full height of the toolbar.
height:*; above does this.

Question: is it possible to reproduce this pretty
basic and typical layout using css3-flexbox in its current incarnation?
If "yes" then how styles should look like?

Thanks in advance.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 2 August 2012 05:23:19 UTC