Re: [css3-flexbox] is this correct use case?

On 2 August 2012 15:22, Andrew Fedoniouk <news@terrainformatica.com> wrote:
> 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.
>

As I understand them, this should fulfill your requirements:
http://jsfiddle.net/amtiskaw/h6q9m/1/

Tested in Chrome Dev 22.0.1221.0.

Thanks,

Jon Rimmer

Received on Thursday, 2 August 2012 06:42:14 UTC