Re: [css3-flexbox] about flexible margins and alignment

>-----Original Message----- 
>From: Alex Mogilevsky
>Sent: Monday, January 09, 2012 11:10 AM
>To: Andrew Fedoniuok ; www-style@w3.org
>Subject: RE: [css3-flexbox] about flexible margins and alignment
>
>± -----Original Message-----
>± From: andrew.fedoniouk@live.com
>± Sent: Saturday, January 07, 2012 10:16 AM
>±
>± "You are saying it is a pretty common layout. Can you send a screenshot of
>± that kind of layout in use?"
>±
>± Sure. Here is a screenshot from real-life Web App:
>± http://terrainformatica.com/w3/eq-distr-buttons.png
>±
>
>Good use case. Thanks.
>
>Maybe it is a good idea to have another option for 'flex-pack' that does exactly that (put half-space at start and end).
>
>It could be
>
>flex-pack:justify -- add equal space between items
>flex-pack:distribute -- add equal space between items and half of that at start/end
>
>how does that sound?
>

For the model of flexes you have chosen this probably sounds ok.

But I still don't like the idea of flex-pack (as an attribute).
And in general flexibility defined by attributes. It is far from being flexible.

Here is one more practical scenario:

td|<button><button> ..... <button>|/td

"....." here designates flexible spacing (aka spring) shifting last
button to container's right (table cell here) and rest buttons
to the left.

Now I am using these styles:

td { flow:horizontal;  } /* or whatever is used for that in flex-box */
td > button { margin:0; }
td > button:last-child { margin-left:*; } /* that flex spacing, flex(1) */

This cannot be implemented with flex-pack. At all. Only
with use of some spacers [images, spans, etc.].

This use case is also pretty common, for example on toolbars,
windows captions, etc.

And question in general: how that flex-pack is supposed to interact
with margins defined on elements? Does margin space participate in
free space calculations? Or margins are simply ignored?
If participate then what margin:auto means for flex children?
I am using margin:auto == margin:flex(1) for flex-children
and it works well - intuitive and predictable for authors.


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Tuesday, 10 January 2012 04:44:48 UTC