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

± 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 UTC