[css3-flexbox] when are margins on flexbox-items computed & subtracted from available space?

Hi www-style,

I think the updated Flexbox Algorithm might need some clarification on 
how to handle (non-auto) margins on flexbox items.  (I'm ignoring "auto" 
margins for simplicity, at this point, since their behavior isn't settled.)

(I think I remember Tab saying something about upcoming margin edits in 
a recent post; apologies if this is already covered by those upcoming 
edits.)

First Clarification:
====================
Before we resolve flexible widths, we clearly need to subtract flexbox 
items' margins (assuming we've obtained exact px values for them), but I 
don't think the current spec accounts for this.

This would probably need to be prepended as an additional step at the 
beginning of the "Resolve the Flexible Lengths" algorithm in the current 
ED.[1]

Possible spec text:
{{
  1. For each item on this flexbox line, subtract the resolved values of 
its margin properties in the main axis from the available space.
}}
(not sure if "resolved" is the correct word there -- I mean "after 
percentages have been converted to px".  We also may need to add some 
special-cases, depending on how auto margins end up being handled.)

Second Clarification:
=====================
I'd like to clarify the behavior of percentage margins on flexbox-items.

The CSS2.1 Box Model says that percentage values for margin-* are 
calculated w.r.t. the "width of the containing block"[2].

I assume the flexbox fills the role of "containing block" here, and so 
these margins would always be resolved w.r.t. the flexbox's _width_ 
(even for margin-top/bottom in a vertical flexbox).  Is that correct?

Also, in cases where the flexbox's width is affected by these 
margin-values, are we defining the behavior of percent-valued-margins on 
flexbox items, or leaving it undefined?  (CSS 2.1 explicitly leaves this 
undefined for the box model -- but it seems like it'd be nice to 
minimize the number of undefined things in a brand-new layout model, 
when possible.)

Thanks,
~Daniel

[1] http://dev.w3.org/csswg/css3-flexbox/#resolve-the-flexible-lengths
[2] http://www.w3.org/TR/CSS21/box.html#margin-properties

Received on Wednesday, 15 February 2012 23:02:25 UTC