W3C home > Mailing lists > Public > www-style@w3.org > August 2012

[css3-flexbox] is this correct use case?

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 1 Aug 2012 22:22:52 -0700
Message-ID: <CALRQH78hkm7angsgjbtYuXgJViz4=yAR_VVx5V5UsAqUeCUrtQ@mail.gmail.com>
To: www-style@w3.org
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:58 GMT