W3C home > Mailing lists > Public > www-style@w3.org > December 2011

[css3-flexbox] about flexible margins and alignment

From: Andrew Fedoniuok <news@terrainformatica.com>
Date: Mon, 12 Dec 2011 18:41:54 -0800
Message-ID: <BLU165-ds157576DC1F28A7EF906F2DF8BD0@phx.gbl>
To: <www-style@w3.org>
Here is practical situation that we have, consider this markup
<div #item-actions>
   <button>Send</button>
   <button>Delete</button>
</div>

And the style we use:

#item-actions { 
   flow: horizontal;
   width:*;
   height:30px;
} 
#item-actions button
{
     width: max-intrinsic;
     margin:*; 
}

This will position buttons in a row like this: 

|<---><button><---><button><--->|

Where <---> parts are equal to each other and depend
on width of #item-actions container. flow: horizontal;
in our case applies horizontal margin collapsing so
total sum of flexes in horizontal direction is 3. 

Question is: how this pretty common layout can be
achieved with flex-box? If this is possible at all of course.

-- 
Andrew Fedoniouk

http://terrainformatica.com
Received on Tuesday, 13 December 2011 02:42:26 GMT

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