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

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

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Tue, 8 May 2012 05:36:16 +0000
To: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <2C86A15F63CD734EB1D846A0BA4E0FC81A3EE2FD@CH1PRD0310MB381.namprd03.prod.outlook.com>
 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 GMT

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