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

RE: [css3-flexbox] corrections/clarifications on updated flexbox algorithm

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Thu, 16 Feb 2012 06:40:28 +0000
To: Daniel Holbert <dholbert@mozilla.com>, "www-style@w3.org list" <www-style@w3.org>
CC: Tab Atkins Jr. <jackalmage@gmail.com>
Message-ID: <D51C9E849DDD0D4EA38C2E539856928412E5C0FF@TK5EX14MBXC214.redmond.corp.microsoft.com>
 From: Daniel Holbert [mailto:dholbert@mozilla.com] 
 Sent: Wednesday, February 15, 2012 12:49 PM
 
 Link to the algorithm:
    http://dev.w3.org/csswg/css3-flexbox/#layout-algorithm
 
 QUOTING STEP 2:
 {{
    2. Layout the flexbox items using the shrink-to-fit algorithm. If the 
 main size of a flexbox item is flexible, treat it as the preferred size of 
 that flexible length. Do not apply min/max-width/height constraints to the 
 preferred size of flexible lengths - those constraints are handled elsewhere 
 in this algorithm, and doing so will produce incorrect results.
    Each flexbox item now has a hypothetical main size.
 }}

Actually shrink-to-fit size is only needed when preferred size is auto. Otherwise the specified preferred size should be used. This needs to be corrected.

 
    (a) Here, are we still laying out each child *as if it were the only
 child* (as a previous version of the ED stated about this part)?

No, it means lay out in infinite space to find what size the item would be if it didn't have constraints of any kind. 

    (b) "using the shrink-to-fit algorithm" -- could this link to somewhere 
 where that algorithm is definitively defined?

"shrink-to-fit" should be defined here more specifically. It is the same as sizing a float or positioned element in CSS2.1 (http://www.w3.org/TR/CSS21/visudet.html#float-width), but without the last step of min(max(preferred minimum width, available width), preferred width).

Any suggestions for normative text to put here?

    (c) The second sentence is very open to being misunderstood. I think it 
 means to say something like "treat the flexible width as being inflexible and 
 equal to its preferred size component", but it currently could be read to 
 mean something different. (I initially read it to say "use the flexible width 
 as the item's preferred size", which isn't what you want to do here since you 
 don't want flexibility yet.)

Yes, it means what you think it means. With the switch from flex() function to 'flex' property it has to be reworded too. 

    (d) On the final sentence about hypothetical main size, it'd be nice to 
 say something like "This will produce..." rather than "Each flexbox item now 
 has..." (so it's clear where the size came from)

How about this:

	| 3. Determine the hypothetical main size of items
	| 	a. If preferred size is 'auto', layout the flexbox items 
	|	using the shrink-to-fit algorithm. 
	|	b. Otherwise use the specified preferred size
	| Do not apply min/max-width/height constraints to the preferred size of 
	| flexible lengths - those constraints are handled elsewhere in this 
	| algorithm, and doing so will produce incorrect results.

    (e) Also -- each flexbox item also now has a hypothetical *cross* size, 
 too, right?  Might as well state that here as well.  (Later on, Step 5 will 
 tell us to "Update" the hypothetical cross sizes, without ever having 
 established where these sizes were originally set.)

No, it won't. It will have hypothetical cross size when laid out in final main size.

 QUOTING STEP 3.1:
 {{
 If the main size depends on the flexbox's content, then:
      * for 'min-content', [...]
      * for 'max-content', [...]
      * for 'fit-content', [...]
 }}
 
   (f) Seems like above should say what to do for "auto" here -- AFAIK auto-
 sized flexboxes should shrink-wrap, & hence they depend on the flexbox's 
 content.  They probably want to share a line with fit-content, I imagine?

I am not sure what that bullet list is trying to say. I think the max line length for row direction flexbox is same as what maximum line length would be if it was "display:block" and for row direction 'auto' simply means infinity.

 QUOTING STEP 4:
 {{
    4. Find the actual main size of the flexbox. If the flexbox's main size 
 doesn't rely on its contents, it's actual main size is calculated per the 
 appropriate rules.
 }}
 
    (g) s/it's/its/

right

 QUOTING STEP 7.2 - 7.3:
 {{
    7. Calculate the cross size of each flexbox line [...]
      2. Collect all the flexbox items with a 'flex-item-align' of 'start', 
 'end', 'center', or 'stretch', or a value of 'baseline' and a cross axis 
 parallel to their inline axis
      3. Collect all the flexbox items with a 'flex-item-align' of 'baseline' 
 and a cross axis perpendicular to their inline axis [...] }}
 
    (h) This would be much clearer if we reversed the order of 7.2 and
 7.3 -- that way, the existing-7.2-text could simply refer to "the remaining 
 flexbox items" without having to explicitly list their many flex-item-align 
 possibilities.

Agree.

    (i) The language "a cross axis parallel to their inline axis" makes it 
 sound like the cross axis can differ for each flexbox-item (which it can't).  
 It'd probably be clearer to say "an inline axis parallel to the flexbox's 
 cross axis".  (This applies to both 7.2 and 7.3)

How about

	| 2. If main axis is parallel to inline axis, collect all the flexbox 
	| items with a 'flex-item-align' of 'baseline'. 
	| Find the maximum of the distances 
	| from their baseline to the cross-start edge of their margin box, and 
	| the maximum of the distances from their baseline to the cross-end edge 
	| of their margin box. Sum these two values.
	|
	| 3. For remaining flexbox items, find the maximum of the cross sizes of 
	| their margin boxes.
?

QUOTING STEP 9:
 {{
    9. For each flexbox line, align the flexbox items per 'flex-align'.
 }}
 
    (j) s/flex-align/flex-item-align/

ok

 QUOTING STEP 10:
 {{
   10. Align the flexbox lines per 'flex-item-align'. The leftover free-space 
 is calculated by subtracting the sum of the flexbox line's cross sizes from 
 the cross size of the flexbox's content box.
 }}
 
    (k) s/flex-item-align/flex-line-pack/

right

 That's all I've got for now -- more coming later, possibly. :)
 
 ~Daniel

Thanks a lot for review!

Alex
Received on Thursday, 16 February 2012 06:41:08 GMT

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