Re: hypothetical size of vertical flexbox WAS: [css3-flexbox] Nailing down the layout algorithm

On Fri, Sep 9, 2011 at 12:12 PM, Ojan Vafai <> wrote:
> On Fri, Aug 26, 2011 at 6:23 PM, Tab Atkins Jr. <>
> wrote:
>> In the current WD of Flexbox, there's a (somewhat
>> incomplete/incorrect) exact layout algorithm for flexbox.  I attempted
>> to eliminate the need for this, and just describe the layout algorithm
>> property-by-property, but it turns out that things are too
>> interconnected to make that a sane approach.
>> So, I need to rewrite the layout algorithm to address the spec changes
>> and fix the previous mistakes and holes.  Here's my first draft of an
>> outline of the algorithm:
>> 1. Reorder flexbox items according to ‘flex-order’.
>> 2. Find the "hypothetical size" of every flexbox item
>>   by treating them like a normal element of their display
>>   type and the flexbox like a display:block element, and
>>   both the flexbox and the item establish BFCs. Resolve
>>   flexible widths/heights by treating them like their
>>   preferred size. Resolve ‘auto’ widths/heights by
>>   shrinkwrapping them.
>> 3. Based on the hypothetical sizes of the items, find the
>>   real main size of the flexbox and the hypothetical
>>   cross size.
> Given the following:
> <div style="display: flexbox; flex-flow: vertical-ttb;">...</div>
> The flexbox does not have a specified height. Is the "real main size" here
> the shrinkwrapped height before linebreaking?


> And the "hypothetical cross
> size" is actually it's width based off it's parent element?

It's the largest width of any of the flexbox items.  Recall that auto
widths are shrinkwrapped, and then the flexbox itself shrinkwraps its
contents in both directions.

> Basically, I think this algorithm treats vertical/horizontal flexing as
> perfectly symmetrical, but it's not in the cases of determining the
> width/height of the flexbox itself, right?

The flexbox algorithm *itself* is intended to be symmetrical, but some
of its inputs aren't symmetrical, since the flexbox is probably
embedded in, and contains, things that use block layout or similar.

Remember, if any of this is crazy, push back on it; don't just take me
on my word here!


Received on Friday, 9 September 2011 19:47:33 UTC