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

± From: fantasai [mailto:fantasai.lists@inkedblade.net] 
± Sent: Monday, April 30, 2012 9:54 PM
± 
± http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#layout-algorithm
± 
±    # Calculate the cross size of each flexbox line. For each flexbox line:
±    #    If the flexbox is single-line and has a definite cross size, the single
±    #    flexbox line's cross size is the cross size of the flexbox's content box.
±    #    End this step of the algorithm.
±    #    [If the flexbox is multi-line, each line is sized to contain its contents.]
± 
± There's an inconsistency between ''nowrap'' flexboxes and ''wrap'' flexboxes 
± consisting of a flexbox line are laid out due to this difference in how flexbox lines 
± are sized. The inconsistency can be seen when the flexbox has a definite cross size 
± and contains an item that is larger than that size:
±    - in a single-line ''nowrap'' flexbox, the contents are aligned between
±      the cross-start and cross-end edges of the flexbox; the large item
±      overflows these alignment bounds
±    - in a single-line ''wrap'' flexbox, the contents are aligned between
±      the cross-start and cross-end edges of the large item, overflowing
±      the flexbox along with the large item. (The flex-line-pack property
±      then aligns this overflowing line within the flexbox bounds.)
± 
± Is this inconsistency intentional? Or should both ''wrap'' and ''nowrap'' flexbox 
± lines be sized the same way?
± 
± 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.

I certainly prefer the first picture. If single-line wrap needs to be same as no-wrap, it should be that way.

(btw it is not fair to compare 'nowrap' to 'wrap' with a non-default value of 'flex-line-pack'. It should be comparing with 'stretch'. Result is just as weird though:

#============================================================#
" [ top-align ]  +----------+                    +---------+ "
"                |          |                    |         | "
"                |          |                    |         | "
#================| centered |====================| stretch |=#
                  |          |                    |         |
                  |          |                    |         |
                  +----------+  [ bottom-align ]  +---------+

It does sound like a good idea that a single-line wrap flexbox aligns to its box, not to overflow. I am not sure how to update flex-line-pack definition to make this work *and* still do something sensible in overflow when there is more than one line. I don't think it ever makes sense for multiple lines to overlap...

Choices:

A) no change (single-line wrap and nowrap are different)

B) nowrap flexbox treats cross-axis overflow same as a single-line wrap (top-aligned)

C) special case in "Calculate the cross size of each flexbox line"
	| If flexbox has only one line (regardless of flex-wrap setting)
	| and cross-size of the single line is bigger than the cross-size of the flexbox,
	| set cross-size of the line to the cross size of the flexbox.

D) special case in 'flex-line-pack': 
	| 'stretch': Lines stretch to take up the remaining space. 
	| If there is only one line, its size is always set to exactly the 
	| available space in the cross-axis.
	| If there is more than one line and the leftover free space is negative, 
	| this value is identical to 'start'. 
	| Otherwise, the free-space is split equally between all of the lines, 
	| increasing their cross size.

I think I prefer C, then A. It looks like the current draft has B. 

Alex

Received on Tuesday, 8 May 2012 05:37:29 UTC