RE: [css3-flexbox] cross-size of flexbox lines

± From: fantasai [mailto:fantasai.lists@inkedblade.net] 
± Sent: Monday, April 30, 2012 9:54 PM
± 
± 
± single-line flexbox with nowrap -
± 
±                   +----------+
±                   |          |
± #================|==========|====================+=========+=#
± " [ top-align ]  |          |                    |         | "
± "                | centered |                    | stretch | "
± "                |          |  [ bottom-align ]  |         | "
± #================|==========|====================+=========+=#
±                   |          |
±                   +----------+
± 
± single-line flexbox with wrap* -
± 
±    [ top-align ]  +----------+                    +---------+
±                   |          |                    |         |
± #================|==========|====================|=========|=#
± "                |          |                    |         | "
± "                | centered |                    | stretch | "
± "                |          |                    |         | "
± #================|==========|====================|=========|=#
±                   |          |                    |         |
±                   +----------+  [ bottom-align ]  +---------+
± 
± * this rendering assumes flex-line-wrap: center; for flex-line-wrap: stretch or 
± start, shift the flexbox bounds up to align with the top of the centered item.

One more reason why we made the right choice here (you want to get the first result, not the second):

If the flexbox is 
	- vertical 
	- width of the screen (default)
	- items stretch (default)

If the second result ever happens, it means some items are wider than screen. You really don't want all items to become wider than screen if there is one large image or table somewhere. I am sure you've seen table-based sites that are unreadable or don't print because of that...

So again, we made the right choice.

Alex

Received on Thursday, 10 May 2012 16:49:08 UTC