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

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 UTC