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

On Wed, Aug 1, 2012 at 11:41 PM, Jon Rimmer <jon.rimmer@gmail.com> wrote:
> 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

Oh, thanks a lot. Seems like 'auto' margins treatment were added recently.
Interesting. Close enough, indeed.

Do you know what is flex value of 'auto' in margin-left:auto ?

In other words: what would be computed
values of margins/width here:

.flex > div {
  margin-left: auto;
  width: auto; /* or shall it be flex-grow:1 ? */
  margin-right: auto;
}

And things like:

  margin-left:1*auto;
  margin-right:2*auto;

seem like still not there yet.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 2 August 2012 07:24:58 UTC