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

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

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Thu, 5 Jan 2012 20:45:09 +0000
To: Andrew Fedoniuok <news@terrainformatica.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <D51C9E849DDD0D4EA38C2E539856928412DCCCF5@TK5EX14MBXC214.redmond.corp.microsoft.com>
You are using invalid HTML and non-existent CSS properties, but if I can guess what you are asking - no, there is no easy way to create equal spacing between and around items in flexbox.

It can be done with a grid though, and it seems appropriate. Grid gives a lot of control for empty space:

    <div style="display:grid; grid-columns:1fr auto 1fr auto 1fr">
        <button style="grid-column:2">Send</button>
        <button style="grid-column:4">Delete</button>
    </div>

You are saying it is a pretty common layout. Can you send a screenshot of that kind of layout in use?

Alex

-----Original Message-----
From: andrew.fedoniouk@live.com [mailto:andrew.fedoniouk@live.com] On Behalf Of Andrew Fedoniuok
Sent: Monday, December 12, 2011 6:42 PM
To: www-style@w3.org
Subject: [css3-flexbox] about flexible margins and alignment

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 Thursday, 5 January 2012 21:19:10 GMT

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