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

[css3-flexbox] cross-size of flexbox lines

From: fantasai <fantasai.lists@inkedblade.net>
Date: Mon, 30 Apr 2012 21:54:06 -0700
Message-ID: <4F9F6C6E.3020507@inkedblade.net>
To: "www-style@w3.org" <www-style@w3.org>
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 GMT

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