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

"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

You see two places here with button margins equally distributed
in horizontal direction.
First one (dark bar with pictograms)  is a sort of item context
menu - part of the web page/application. And second one is at
the bottom - part of browser's chrome - its toolbar.
Both use the same layout.

When you change orientation of the device the buttons should
be placed in the same way - margins shall expand equally.
All this is about touch UI so these equal margins requirements.

The grid you've mentioned is not an option. At least for this
application - number of items in context menu is varying for
different items and sometimes is not known upfront.

-- 
Andrew Fedoniouk

http://terrainformatica.com



-----Original Message----- 
From: Alex Mogilevsky
Sent: Thursday, January 05, 2012 12:45 PM
To: Andrew Fedoniuok ; www-style@w3.org
Subject: 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 Saturday, 7 January 2012 18:16:35 UTC