[css3-flexbox] cross-size of flexbox lines

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.

~fantasai

Received on Tuesday, 1 May 2012 04:54:57 UTC