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

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

From: Andrew Fedoniuok <news@terrainformatica.com>
Date: Mon, 9 Jan 2012 20:44:17 -0800
Message-ID: <BLU165-ds18000100CA12A970D5BE79F8990@phx.gbl>
To: "Alex Mogilevsky" <alexmog@microsoft.com>, <www-style@w3.org>
>-----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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:09 UTC