- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 27 Aug 2011 01:25:10 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv818
Modified Files:
Overview.html Overview.src.html
Log Message:
Killed the old layout algorithm, added outline of new one.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.51
retrieving revision 1.52
diff -u -d -r1.51 -r1.52
--- Overview.html 27 Aug 2011 00:42:29 -0000 1.51
+++ Overview.html 27 Aug 2011 01:25:08 -0000 1.52
@@ -188,27 +188,8 @@
‘<code class=property>flex-line-pack</code>’ property</a>
</ul>
- <li><a href="#free-space-algorithm"><span class=secno>7. </span> Free
- Space Calculation and Distribution</a>
- <ul class=toc>
- <li><a href="#free-space-algorithm-initial"><span class=secno>7.1.
- </span> Initial Computation</a>
-
- <li><a href="#first-distribution-round"><span class=secno>7.2. </span>
- First Distribution Round</a>
-
- <li><a href="#second-distribution-round"><span class=secno>7.3. </span>
- Second Distribution Round</a>
-
- <li><a href="#intermediate-computation"><span class=secno>7.4. </span>
- Intermediate Computation</a>
-
- <li><a href="#third-distribution-round"><span class=secno>7.5. </span>
- Third Distribution Round</a>
-
- <li><a href="#free-space-allocation-algorithm"><span class=secno>7.6.
- </span> Free Space Allocation Algorithm</a>
- </ul>
+ <li><a href="#layout-algorithm"><span class=secno>7. </span> Flexbox
+ Layout Algorithm</a>
<li><a href="#pagination"><span class=secno>8. </span> Page breaks in
flexbox</a>
@@ -1521,377 +1502,61 @@
<p class=issue>TODO: examples
- <h2 id=free-space-algorithm><span class=secno>7. </span> Free Space
- Calculation and Distribution</h2>
-
- <p class=issue>IS THIS SECTION NECESSARY? It may be useful for implementors
- as guidance, but it is not normative. The spec describes the result, this
- describes the process - one should be enough, and the description of the
- result is not specific enough, it needs to be fixed.
-
- <p>The following algorithms detail precisely how to determine the
- dimensions and positions of a flexbox and its contents, and how to resolve
- flexible lengths used on <a href="#flexbox-item"><i>flexbox items</i></a>
- into definite lengths.
-
- <p>The algorithm described here is designed to be clear, but not
- necessarily efficient. Implementations may use different algorithms, but
- they must generate the same results as this algorithm.
-
- <p>This section defines several terms to clarify the operation of the
- algorithms described within:
-
- <dl>
- <dt><dfn id=relevant-length>relevant length</dfn>
-
- <dd>The width, height, margin, border, or padding of a flexbox item. Also,
- the <i>packing space</i>s of a flexbox.
-
- <dt><dfn id=flex-tuple>flex tuple</dfn>
-
- <dd>A 5-tuple of information about a flexible length, containing a minimum
- size, a maximum size, a preferred size, a positive flexibility, and a
- negative flexibility.
-
- <dt><dfn id=total-free-space>total free space</dfn>
-
- <dd>The inner width or height of the flexbox (depending on the
- distribution round), which will be used to calculate the sizes of the <a
- href="#flexbox-item"><i>flexbox items</i></a>.
-
- <dt><dfn id=available-free-space>available free space</dfn>
-
- <dd>The <a href="#total-free-space"><i>total free space</i></a> minus the
- sum of the preferred sizes of all the relevant lengths, which is used to
- resolve <a href="#flex-tuple"><i>flex tuple</i></a>s into inflexible
- lengths.
- </dl>
+ <h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
+ Algorithm</h2>
- <p>Similarly, the <dfn id=inner-measure>inner measure</dfn> is the width of
- the flexbox item in a horizontal flexbox, or the height in a vertical
- flexbox. The <dfn id=inner-length>inner length</dfn> is the height of the
- flexbox item in a horizontal flexbox, or the width in a vertical flexbox.
+ <p>This section contains normative algorithms detailing the exact layout
+ behavior of a flexbox and its contents. The algorithms here were designed
+ to optimize readability and theoretical simplicity, and may not
+ necessarily be the most efficient. Implementations may use whatever actual
+ algorithms they wish, but must produce the same results as the algorithms
+ described here.
<div class=issue>
- <p>Definition of "inner measure" and "inner length" is not used anywhere,
- or is it? Promote to general-use vocabulary or replace with existing
- terms.</p>
-
- <p class=issue>Suggestion: "inner measure" == "extent along main axis",
- "inner length" == "extent along cross axis"</p>
- </div>
-
- <h3 id=free-space-algorithm-initial><span class=secno>7.1. </span> Initial
- Computation</h3>
-
- <p>This step computes necessary information required to run the free-space
- distribution algorithms.
-
- <ol>
- <li>Determine the measure of the flexbox. Flexboxes are sized like
- shrinkwrapped blocks (if ‘<code
- class=css>display:flexbox</code>’ is used) or inline-blocks (if
- ‘<code class=css>display:inline-flexbox</code>’ is used). A
- horizontal flexbox's measure is its width, while a vertical flexbox's
- measure is its height. <span class=issue>This is wrong. In vertical
- flexbox with auto sizing, height can't be calculated before width
- (assuming horizontal flow). Calculation has to be width-then-height, not
- measure-then-length.</span>
-
- <li>
- <p>Resolve all <a href="#relevant-length"><i>relevant length</i></a>s on
- the flexbox and its <a href="#flexbox-item"><i>flexbox items</i></a>
- into <dfn id=flex-tuples>flex tuples</dfn> of [minimum size, maximum
- size, preferred size, positive flex, negative flex].</p>
-
- <dl>
- <dt>For margins and padding:
-
- <dd>
- <p>Set the minimum size to 0 and the maximum size to infinity.</p>
-
- <p>If the length is inflexible, set the preferred size to the length
- itself and both positive and negative flexibility to 0.</p>
-
- <p>If the length is a margin with the value ‘<code
- class=css>auto</code>’, set the preferred size to 0, the
- positive flexibility to 1, and the negative flexibility to 0.</p>
-
- <dt>For borders:
-
- <dd>Borders are always inflexible. Set the minimum size to 0, the
- maximum size to infinity, the preferred size to the border-width, and
- the positive and negative flexibility to 0.
-
- <dt>For width and height:
-
- <dd>
- <p>Set the minimum size to the value of the ‘<code
- class=property>min-width</code>’ or ‘<code
- class=property>min-height</code>’, as appropriate. Set the
- maximum size to the value of the ‘<code
- class=property>max-width</code>’ or ‘<code
- class=property>max-height</code>’ property, as appropriate,
- unless the value is ‘<code class=css>none</code>’, in
- which case set the maximum size to infinity.</p>
-
- <p>If the length is inflexible, set the preferred size to the length
- itself and both positive and negative flexibility to 0.</p>
-
- <p>Otherwise, if the length was specified with the ‘<code
- class=css>flex()</code>’ function, set the positive and negative
- flexibility to the values specified in the function. If the preferred
- size argument specified in the function is a <length>, set the
- preferred size to that length. If the argment is a <percentage>,
- resolve it relative to the width or height of the flexbox, as
- appropriate, and set the preferred size to the resultant length. If
- the argument is ‘<code class=css>auto</code>’, set the
- preferred size to the item's intrinsic dimension in the appropriate
- axis.</p>
-
- <p>Otherwise, if the length was ‘<code
- class=css>auto</code>’, set the preferred size to the item's
- intrinsic dimension in the appropriate axis, the positive flexibility
- to 1, and the negative flexibility to 0.</p>
-
- <p>If the preferred size is now less than the minimum size, set it
- equal to the minimum size. If the preferred size is now greater than
- the maximum size, set it equal to the maximum size.</p>
-
- <dt>For <i>packing space</i>s:
-
- <dd>
- <p>If the flexbox's ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ is <i
- title=flex-pack-start>start</i>,the last <i>packing space</i> (between
- the final <a href="#flexbox-item"><i>flexbox item</i></a>, after
- reordering by ‘<a href="#flex-order0"><code
- class=property>flex-order</code></a>’, and the end of the
- flexbox) has a minimum size of 0, a maximum size of infinity, a
- preferred size of 0, a positive flexibility of 1, and a negative
- flexibility of 0. All other <i>packing space</i>s have minimum size,
- maximum size, preferred size, positive flexibility, and negative
- flexibility of 0.</p>
-
- <p>If the flexbox's ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ is <i
- title=flex-pack-end>end</i>, the first <i>packing space</i> (between
- the first <a href="#flexbox-item"><i>flexbox item</i></a>, after
- reordering by ‘<a href="#flex-order0"><code
- class=property>flex-order</code></a>’, and the start of the
- flexbox) has a minimum size of 0, a maximum size of infinity, a
- preferred size of 0, a positive flexibility of 1, and a negative
- flexibility of 0. All other <i>packing space</i>s have minimum size,
- maximum size, preferred size, positive flexibility, and negative
- flexibility of 0.</p>
-
- <p>If the flexbox's ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ is <i
- title=flex-pack-center>center</i>, the first and last <i>packing
- space</i>s (as defined above) have a minimum size of 0, a maximum size
- of infinity, a preferred size of 0, a positive flexibility of 1, and a
- negative flexibility of 0. All other <i>packing space</i>s have
- minimum size, maximum size, preferred size, positive flexibility, and
- negative flexibility of 0.</p>
-
- <p>If the flexbox's ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ is <i
- title=flex-pack-justify>justify</i>, the first and last <i>packing
- space</i>s (as defined above) have a minimum size, maximum size,
- preferred size, positive flexibility, and negative flexibility of 0.
- All other <i>packing space</i>s have a minimum size of 0, a maximum
- size of infinity, a preferred size of 0, a positive flexibility of 1,
- and a negative flexibility of 0.</p>
- </dl>
- </ol>
-
- <h3 id=first-distribution-round><span class=secno>7.2. </span> First
- Distribution Round</h3>
-
- <p>This step distributes free space to the flexible lengths of the flexbox
- in the <i>measure axis</i>.
-
- <p>Collect the set of <a href="#flex-tuple"><i>flex tuple</i></a>s that can
- participate in this step:
-
- <ol>
- <li>If the flexbox is horizontal, collect the widths of every <a
- href="#flexbox-item"><i>flexbox item</i></a>. If the flexbox is vertical,
- instead collect the heights of every <a href="#flexbox-item"><i>flexbox
- item</i></a>.
-
- <li>Collect the margins of every <a href="#flexbox-item"><i>flexbox
- item</i></a> that are in the flexbox's measure axis.
-
- <li>Collect the borders of every <a href="#flexbox-item"><i>flexbox
- item</i></a> that are in the flexbox's measure axis, if the <a
- href="#flexbox-item"><i>flexbox item</i></a> has a ‘<code
- class=property>box-sizing</code>’ value of ‘<code
- class=css>content-box</code>’ or ‘<code
- class=css>padding-box</code>’.
-
- <li>Collect the paddings of every <a href="#flexbox-item"><i>flexbox
- item</i></a> that are in the flexbox's measure axis, if the <a
- href="#flexbox-item"><i>flexbox item</i></a> has a ‘<code
- class=property>box-sizing</code>’ value of ‘<code
- class=css>content-box</code>’.
- </ol>
-
- <p>Invoke the <i>free space allocation algorithm</i> with the set of <a
- href="#flex-tuple"><i>flex tuple</i></a>s collected above, and an <a
- href="#available-free-space"><i>available free space</i></a> equal to the
- flexbox's inner measure.
-
- <h3 id=second-distribution-round><span class=secno>7.3. </span> Second
- Distribution Round</h3>
-
- <p>This step distributes any leftover available space to the <i>packing
- space</i>, so that the flexbox items are arranged within the flexbox as
- desired.
-
- <p>Collect the same set of <a href="#flex-tuple"><i>flex tuple</i></a>s as
- in the first distribution round (now inflexible lengths), and additionally
- collect the flexbox's <i>packing space</i>s.
-
- <p>Invoke the <i>free space allocation algorithm</i> with the set of <a
- href="#flex-tuple"><i>flex tuple</i></a>s collected above, and an <a
- href="#available-free-space"><i>available free space</i></a> equal to the
- flexbox's inner measure.
-
- <h3 id=intermediate-computation><span class=secno>7.4. </span> Intermediate
- Computation</h3>
-
- <p>Determine the length of the flexbox, given the sizes that have already
- been determined.
-
- <h3 id=third-distribution-round><span class=secno>7.5. </span> Third
- Distribution Round</h3>
-
- <p>This step distributes free space to the flexible lengths of each flexbox
- item in the <i>length axis</i>. <strong>It is run for each <a
- href="#flexbox-item"><i>flexbox item</i></a> independently.</strong>
-
- <p class=issue>ISSUE: This step doesn't yet take ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’ into
- account. I need to decide whether to always default to stretching or
- shrinking when doing baseline-alignment, or coming up with some heuristic
- for it. Perhaps specify the behavior in the ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’
- values instead? Once this decision is made, the behavior is relatively
- simple - either adjust margin (if shrunk) or padding (if stretched)
-
- <p>Collect the set of <a href="#flex-tuple"><i>flex tuple</i></a>s from the
- current <a href="#flexbox-item"><i>flexbox item</i></a> that can
- participate in this step:
-
- <ol>
- <li>If the flexbox is horizontal, collect the height of the <a
- href="#flexbox-item"><i>flexbox item</i></a>. If the flexbox is vertical,
- instead collect the width of the <a href="#flexbox-item"><i>flexbox
- item</i></a>.
-
- <li>Collect the margins of the <a href="#flexbox-item"><i>flexbox
- item</i></a> that are in the flexbox's length axis.
-
- <li>Collect the borders of the <a href="#flexbox-item"><i>flexbox
- item</i></a> that are in the flexbox's length axis, if the <a
- href="#flexbox-item"><i>flexbox item</i></a> has a ‘<code
- class=property>box-sizing</code>’ value of ‘<code
- class=css>content-box</code>’ or ‘<code
- class=css>padding-box</code>’.
-
- <li>Collect the padding lengths of the <a href="#flexbox-item"><i>flexbox
- item</i></a> that are in the flexbox's length axis, if the <a
- href="#flexbox-item"><i>flexbox item</i></a> has a ‘<code
- class=property>box-sizing</code>’ value of ‘<code
- class=css>content-box</code>’.
- </ol>
-
- <p>Invoke the <i>free space allocation algorithm</i> with the set of <a
- href="#flex-tuple"><i>flex tuple</i></a>s collected above, and an <a
- href="#available-free-space"><i>available free space</i></a> equal to the
- flexbox's inner length.
-
- <h3 id=free-space-allocation-algorithm><span class=secno>7.6. </span> Free
- Space Allocation Algorithm</h3>
-
- <p>This section describes the algorithm used to allocate free space to a
- set of flexible lengths. The inputs to this algorithm are a set of <a
- href="#flex-tuple"><i>flex tuple</i></a>s and a length representing the <a
- href="#total-free-space"><i>total free space</i></a>. The output is a set
- of inflexible lengths.
-
- <p>Calculate the <a href="#available-free-space"><i>available free
- space</i></a> by summing the preferred size of all the <a
- href="#flex-tuple"><i>flex tuple</i></a>s and subtracting that value from
- the <a href="#total-free-space"><i>total free space</i></a>.
-
- <p>If the <a href="#available-free-space"><i>available free space</i></a>
- is 0, transform all the <a href="#flex-tuple"><i>flex tuple</i></a>s into
- inflexible lengths equal to their preferred size and return them.
-
- <p>If the <a href="#available-free-space"><i>available free space</i></a>
- is a positive length, it will be distributed between all the <a
- href="#flex-tuple"><i>flex tuple</i></a>s with positive flexibility:
-
- <ol>
- <li>Sum the <a href="#positive-flexibility"><i>positive
- flexibility</i></a> of all the <a href="#flex-tuple"><i>flex
- tuple</i></a>s. This is the <i>total flexibility</i>.
-
- <li>If the <i>total flexibility</i> is 0, transform all the <a
- href="#flex-tuple"><i>flex tuple</i></a>s into inflexible lengths equal
- to their preferred size and return them.
-
- <li>
- <p>For each <a href="#flex-tuple"><i>flex tuple</i></a> with non-zero <a
- href="#positive-flexibility"><i>positive flexibility</i></a>, set its
- preferred size to:</p>
-
- <pre><code>[preferred size] + ( [available free space] * [positive flexibility] / [total flexibility] )</code></pre>
+ <p>Here I'll outline the general structure of the layout algorithm, before
+ I go into the ugly details below.</p>
- <li>If any <a href="#flex-tuple"><i>flex tuple</i></a>s now have a
- preferred size greater than their maximum size, set their preferred size
- to their maximum size, set their positive flexibility to 0, and restart
- this algorithm.
+ <ol>
+ <li>Reorder flexbox items according to ‘<a
+ href="#flex-order0"><code class=property>flex-order</code></a>’.
- <li>Transform all the <a href="#flex-tuple"><i>flex tuple</i></a>s into
- inflexible lengths equal to their preferred size, and return them.
- </ol>
+ <li>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 ‘<code class=property>auto</code>’
+ widths/heights by shrinkwrapping them.
- <p>If the <a href="#available-free-space"><i>available free space</i></a>
- is a negative length, all the <a href="#flex-tuple"><i>flex tuple</i></a>s
- with negative flexibility will shrink to attemp to fit the set of <a
- href="#flex-tuple"><i>flex tuple</i></a>s into the available space:
+ <li>Based on the hypothetical sizes of the items, find the real main size
+ of the flexbox and the hypothetical cross size.
- <ol>
- <li>Sum the <a href="#negative-flexibility"><i>negative
- flexibility</i></a> of all the <a href="#flex-tuple"><i>flex
- tuple</i></a>s. This is the <i>total flexibility</i>.
+ <li>Based on both of these, linebreak the flexbox if it's multiline. (Or
+ does the possibility of linebreaking affect the main size of the
+ flexbox, in a shrinkwrapping way?)
- <li>If the <i>total flexibility</i> is 0, transform all the <a
- href="#flex-tuple"><i>flex tuple</i></a>s into inflexible lengths equal
- to their preferred size and return them.
+ <li>Resolve any flexible lengths. All items now have a real main size.
- <li>
- <p>For each <a href="#flex-tuple"><i>flex tuple</i></a> with non-zero <a
- href="#negative-flexibility"><i>negative flexibility</i></a>, set its
- preferred size to:</p>
+ <li>Align in the main axis, per ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’.
- <pre><code>[preferred size] + ( [available free space] * [negative flexibility] / [total flexibility] )</code></pre>
+ <li>Based on ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’, find the real cross size of
+ the flexbox, its lines, and the items.
- <p class=note>Note that the <a href="#available-free-space"><i>available
- free space</i></a> is a negative length here, so the sum will result in
- a smaller length.</p>
+ <li>Align in the cross axis, per ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’.
- <li>If any <a href="#flex-tuple"><i>flex tuple</i></a>s now have a
- preferred size lesser than their minimum size, set their preferred size
- to their minimum size, set their negative flexibility to 0, and restart
- this algorithm.
+ <li>Align the lines, per ‘<a href="#propdef-flex-line-pack"><code
+ class=property>flex-line-pack</code></a>’.
+ </ol>
- <li>Transform all the <a href="#flex-tuple"><i>flex tuple</i></a>s into
- inflexible lengths equal to their preferred size, and return them.
- </ol>
+ <p>Note that if any "hypothetical" size is a definite length or
+ percentage, it's actually a real size immediately and won't change (well,
+ aside from flexing). The hypothetical calculations are meant to give
+ intermediate results in the presence of ‘<code
+ class=css>auto</code>’ values (and others?), so I can do other
+ calculations that depend on those lengths.</p>
+ </div>
<h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
@@ -2210,9 +1875,6 @@
title=after><strong>5.2.</strong></a>, <a href="#flex-line-pack-after"
title=after><strong>6.1.</strong></a>
- <li>available free space, <a href="#available-free-space" title="available
- free space"><strong>7.</strong></a>
-
<li>baseline, <a href="#flex-align-baseline"
title=baseline><strong>5.2.</strong></a>
@@ -2286,12 +1948,6 @@
<li>flex-pack, <a href="#flex-pack0"
title=flex-pack><strong>5.1.</strong></a>
- <li>flex tuple, <a href="#flex-tuple" title="flex
- tuple"><strong>7.</strong></a>
-
- <li>flex tuples, <a href="#flex-tuples" title="flex
- tuples"><strong>7.1.</strong></a>
-
<li>free space, <a href="#free-space" title="free
space"><strong>4.2.</strong></a>
@@ -2310,12 +1966,6 @@
<li>hypothetical neighbors, <a href="#hypothetical-neighbors"
title="hypothetical neighbors"><strong>2.2.</strong></a>
- <li>inner length, <a href="#inner-length" title="inner
- length"><strong>7.</strong></a>
-
- <li>inner measure, <a href="#inner-measure" title="inner
- measure"><strong>7.</strong></a>
-
<li>main axis, <a href="#main-axis" title="main
axis"><strong>2.</strong></a>
@@ -2343,9 +1993,6 @@
<li>preferred size, <a href="#preferred-size" title="preferred
size"><strong>4.1.</strong></a>
- <li>relevant length, <a href="#relevant-length" title="relevant
- length"><strong>7.</strong></a>
-
<li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>
<li>row-reverse, <a href="#flex-flow-row-reverse"
@@ -2357,9 +2004,6 @@
<li>stretch, <a href="#flex-align-stretch"
title=stretch><strong>5.2.</strong></a>
- <li>total free space, <a href="#total-free-space" title="total free
- space"><strong>7.</strong></a>
-
<li>total negative flexibility, <a href="#total-negative-flexibility"
title="total negative flexibility"><strong>4.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.50
retrieving revision 1.51
diff -u -d -r1.50 -r1.51
--- Overview.src.html 27 Aug 2011 00:42:29 -0000 1.50
+++ Overview.src.html 27 Aug 2011 01:25:08 -0000 1.51
@@ -716,197 +716,36 @@
<p class="issue">TODO: examples</p>
-<h2 id='free-space-algorithm'>
-Free Space Calculation and Distribution</h2>
-
- <p class="issue">IS THIS SECTION NECESSARY? It may be useful for implementors as guidance, but it is not normative. The spec describes the result, this describes the process - one should be enough, and the description of the result is not specific enough, it needs to be fixed.</p>
-
- <p>The following algorithms detail precisely how to determine the dimensions and positions of a flexbox and its contents, and how to resolve flexible lengths used on <i>flexbox items</i> into definite lengths.</p>
-
- <p>The algorithm described here is designed to be clear, but not necessarily efficient. Implementations may use different algorithms, but they must generate the same results as this algorithm.</p>
-
- <p>This section defines several terms to clarify the operation of the algorithms described within:</p>
-
- <dl>
- <dt><dfn>relevant length</dfn></dt>
- <dd>The width, height, margin, border, or padding of a flexbox item. Also, the <i>packing space</i>s of a flexbox.</dd>
-
- <dt><dfn>flex tuple</dfn></dt>
- <dd>A 5-tuple of information about a flexible length, containing a minimum size, a maximum size, a preferred size, a positive flexibility, and a negative flexibility.</dd>
-
- <dt><dfn>total free space</dfn></dt>
- <dd>The inner width or height of the flexbox (depending on the distribution round), which will be used to calculate the sizes of the <i>flexbox items</i>.</dd>
-
- <dt><dfn>available free space</dfn></dt>
- <dd>The <i>total free space</i> minus the sum of the preferred sizes of all the relevant lengths, which is used to resolve <i>flex tuple</i>s into inflexible lengths.</dd>
- </dl>
-
- <p>Similarly, the <dfn>inner measure</dfn> is the width of the flexbox item in a horizontal flexbox, or the height in a vertical flexbox. The <dfn>inner length</dfn> is the height of the flexbox item in a horizontal flexbox, or the width in a vertical flexbox.</p>
-
- <div class="issue">
- <p>Definition of "inner measure" and "inner length" is not used anywhere, or is it? Promote to general-use vocabulary or replace with existing terms.</p>
-
- <p class="issue">Suggestion: "inner measure" == "extent along main axis", "inner length" == "extent along cross axis"</p>
- </div>
-
-
-<h3 id='free-space-algorithm-initial'>
-Initial Computation</h3>
-
- <p>This step computes necessary information required to run the free-space distribution algorithms.</p>
-
- <ol>
- <li>Determine the measure of the flexbox. Flexboxes are sized like shrinkwrapped blocks (if ''display:flexbox'' is used) or inline-blocks (if ''display:inline-flexbox'' is used). A horizontal flexbox's measure is its width, while a vertical flexbox's measure is its height. <span class=issue>This is wrong. In vertical flexbox with auto sizing, height can't be calculated before width (assuming horizontal flow). Calculation has to be width-then-height, not measure-then-length.</span></li>
-
- <li>
- <p>Resolve all <i>relevant length</i>s on the flexbox and its <i>flexbox items</i> into <dfn>flex tuples</dfn> of [minimum size, maximum size, preferred size, positive flex, negative flex].</p>
-
- <dl>
- <dt>For margins and padding:</dt>
- <dd>
- <p>Set the minimum size to 0 and the maximum size to infinity.</p>
-
- <p>If the length is inflexible, set the preferred size to the length itself and both positive and negative flexibility to 0.</p>
-
- <p>If the length is a margin with the value ''auto'', set the preferred size to 0, the positive flexibility to 1, and the negative flexibility to 0.</p>
- </dd>
-
- <dt>For borders:</dt>
- <dd>Borders are always inflexible. Set the minimum size to 0, the maximum size to infinity, the preferred size to the border-width, and the positive and negative flexibility to 0.</dd>
-
- <dt>For width and height:</dt>
- <dd>
- <p>Set the minimum size to the value of the 'min-width' or 'min-height', as appropriate. Set the maximum size to the value of the 'max-width' or 'max-height' property, as appropriate, unless the value is ''none'', in which case set the maximum size to infinity.</p>
-
- <p>If the length is inflexible, set the preferred size to the length itself and both positive and negative flexibility to 0.</p>
-
- <p>Otherwise, if the length was specified with the ''flex()'' function, set the positive and negative flexibility to the values specified in the function. If the preferred size argument specified in the function is a <length>, set the preferred size to that length. If the argment is a <percentage>, resolve it relative to the width or height of the flexbox, as appropriate, and set the preferred size to the resultant length. If the argument is ''auto'', set the preferred size to the item's intrinsic dimension in the appropriate axis.</p>
-
- <p>Otherwise, if the length was ''auto'', set the preferred size to the item's intrinsic dimension in the appropriate axis, the positive flexibility to 1, and the negative flexibility to 0.</p>
-
- <p>If the preferred size is now less than the minimum size, set it equal to the minimum size. If the preferred size is now greater than the maximum size, set it equal to the maximum size.</p>
- </dd>
-
- <dt>For <i>packing space</i>s:</dt>
- <dd>
- <p>If the flexbox's 'flex-pack' is <i title=flex-pack-start>start</i>,the last <i>packing space</i> (between the final <i>flexbox item</i>, after reordering by 'flex-order', and the end of the flexbox) has a minimum size of 0, a maximum size of infinity, a preferred size of 0, a positive flexibility of 1, and a negative flexibility of 0. All other <i>packing space</i>s have minimum size, maximum size, preferred size, positive flexibility, and negative flexibility of 0.</p>
-
- <p>If the flexbox's 'flex-pack' is <i title=flex-pack-end>end</i>, the first <i>packing space</i> (between the first <i>flexbox item</i>, after reordering by 'flex-order', and the start of the flexbox) has a minimum size of 0, a maximum size of infinity, a preferred size of 0, a positive flexibility of 1, and a negative flexibility of 0. All other <i>packing space</i>s have minimum size, maximum size, preferred size, positive flexibility, and negative flexibility of 0.</p>
-
- <p>If the flexbox's 'flex-pack' is <i title=flex-pack-center>center</i>, the first and last <i>packing space</i>s (as defined above) have a minimum size of 0, a maximum size of infinity, a preferred size of 0, a positive flexibility of 1, and a negative flexibility of 0. All other <i>packing space</i>s have minimum size, maximum size, preferred size, positive flexibility, and negative flexibility of 0.</p>
-
- <p>If the flexbox's 'flex-pack' is <i title=flex-pack-justify>justify</i>, the first and last <i>packing space</i>s (as defined above) have a minimum size, maximum size, preferred size, positive flexibility, and negative flexibility of 0. All other <i>packing space</i>s have a minimum size of 0, a maximum size of infinity, a preferred size of 0, a positive flexibility of 1, and a negative flexibility of 0.</p>
- </dd>
- </dl>
- </li>
- </ol>
-
-
-<h3 id='first-distribution-round'>
-First Distribution Round</h3>
-
- <p>This step distributes free space to the flexible lengths of the flexbox in the <i>measure axis</i>.</p>
-
- <p>Collect the set of <i>flex tuple</i>s that can participate in this step:</p>
-
- <ol>
- <li>If the flexbox is horizontal, collect the widths of every <i>flexbox item</i>. If the flexbox is vertical, instead collect the heights of every <i>flexbox item</i>.</li>
-
- <li>Collect the margins of every <i>flexbox item</i> that are in the flexbox's measure axis.</li>
-
- <li>Collect the borders of every <i>flexbox item</i> that are in the flexbox's measure axis, if the <i>flexbox item</i> has a 'box-sizing' value of ''content-box'' or ''padding-box''.</li>
-
- <li>Collect the paddings of every <i>flexbox item</i> that are in the flexbox's measure axis, if the <i>flexbox item</i> has a 'box-sizing' value of ''content-box''.</li>
- </ol>
-
- <p>Invoke the <i>free space allocation algorithm</i> with the set of <i>flex tuple</i>s collected above, and an <i>available free space</i> equal to the flexbox's inner measure.</p>
-
-
-<h3 id='second-distribution-round'>
-Second Distribution Round</h3>
-
- <p>This step distributes any leftover available space to the <i>packing space</i>, so that the flexbox items are arranged within the flexbox as desired.</p>
-
- <p>Collect the same set of <i>flex tuple</i>s as in the first distribution round (now inflexible lengths), and additionally collect the flexbox's <i>packing space</i>s.</p>
-
- <p>Invoke the <i>free space allocation algorithm</i> with the set of <i>flex tuple</i>s collected above, and an <i>available free space</i> equal to the flexbox's inner measure.</p>
-
-
-<h3 id='intermediate-computation'>
-Intermediate Computation</h3>
-
- <p>Determine the length of the flexbox, given the sizes that have already been determined.</p>
-
-
-<h3 id='third-distribution-round'>
-Third Distribution Round</h3>
-
- <p>This step distributes free space to the flexible lengths of each flexbox item in the <i>length axis</i>. <strong>It is run for each <i>flexbox item</i> independently.</strong></p>
-
- <p class=issue>ISSUE: This step doesn't yet take 'flex-align' into account. I need to decide whether to always default to stretching or shrinking when doing baseline-alignment, or coming up with some heuristic for it. Perhaps specify the behavior in the 'flex-align' values instead? Once this decision is made, the behavior is relatively simple - either adjust margin (if shrunk) or padding (if stretched)</p>
-
- <p>Collect the set of <i>flex tuple</i>s from the current <i>flexbox item</i> that can participate in this step:</p>
-
- <ol>
- <li>If the flexbox is horizontal, collect the height of the <i>flexbox item</i>. If the flexbox is vertical, instead collect the width of the <i>flexbox item</i>.</li>
-
- <li>Collect the margins of the <i>flexbox item</i> that are in the flexbox's length axis.</li>
-
- <li>Collect the borders of the <i>flexbox item</i> that are in the flexbox's length axis, if the <i>flexbox item</i> has a 'box-sizing' value of ''content-box'' or ''padding-box''.</li>
-
- <li>Collect the padding lengths of the <i>flexbox item</i> that are in the flexbox's length axis, if the <i>flexbox item</i> has a 'box-sizing' value of ''content-box''.</li>
- </ol>
-
- <p>Invoke the <i>free space allocation algorithm</i> with the set of <i>flex tuple</i>s collected above, and an <i>available free space</i> equal to the flexbox's inner length.</p>
-
-
-<h3 id='free-space-allocation-algorithm'>
-Free Space Allocation Algorithm</h3>
-
- <p>This section describes the algorithm used to allocate free space to a set of flexible lengths. The inputs to this algorithm are a set of <i>flex tuple</i>s and a length representing the <i>total free space</i>. The output is a set of inflexible lengths.</p>
-
- <p>Calculate the <i>available free space</i> by summing the preferred size of all the <i>flex tuple</i>s and subtracting that value from the <i>total free space</i>.</p>
-
- <p>If the <i>available free space</i> is 0, transform all the <i>flex tuple</i>s into inflexible lengths equal to their preferred size and return them.</p>
-
- <p>If the <i>available free space</i> is a positive length, it will be distributed between all the <i>flex tuple</i>s with positive flexibility:</p>
-
- <ol>
- <li>Sum the <i>positive flexibility</i> of all the <i>flex tuple</i>s. This is the <i>total flexibility</i>.</li>
-
- <li>If the <i>total flexibility</i> is 0, transform all the <i>flex tuple</i>s into inflexible lengths equal to their preferred size and return them.</li>
+<h2 id='layout-algorithm'>
+Flexbox Layout Algorithm</h2>
- <li>
- <p>For each <i>flex tuple</i> with non-zero <i>positive flexibility</i>, set its preferred size to:</p>
+ <p>This section contains normative algorithms detailing the exact layout behavior of a flexbox and its contents. The algorithms here were designed to optimize readability and theoretical simplicity, and may not necessarily be the most efficient. Implementations may use whatever actual algorithms they wish, but must produce the same results as the algorithms described here.</p>
- <pre><code>[preferred size] + ( [available free space] * [positive flexibility] / [total flexibility] )</code></pre>
- </li>
+ <div class=issue>
+ <p>Here I'll outline the general structure of the layout algorithm, before I go into the ugly details below.</p>
- <li>If any <i>flex tuple</i>s now have a preferred size greater than their maximum size, set their preferred size to their maximum size, set their positive flexibility to 0, and restart this algorithm.</li>
+ <ol>
+ <li>Reorder flexbox items according to 'flex-order'.</li>
- <li>Transform all the <i>flex tuple</i>s into inflexible lengths equal to their preferred size, and return them.</li>
- </ol>
+ <li>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.</li>
- <p>If the <i>available free space</i> is a negative length, all the <i>flex tuple</i>s with negative flexibility will shrink to attemp to fit the set of <i>flex tuple</i>s into the available space:</p>
+ <li>Based on the hypothetical sizes of the items, find the real main size of the flexbox and the hypothetical cross size.</li>
- <ol>
- <li>Sum the <i>negative flexibility</i> of all the <i>flex tuple</i>s. This is the <i>total flexibility</i>.</li>
+ <li>Based on both of these, linebreak the flexbox if it's multiline. (Or does the possibility of linebreaking affect the main size of the flexbox, in a shrinkwrapping way?)</li>
- <li>If the <i>total flexibility</i> is 0, transform all the <i>flex tuple</i>s into inflexible lengths equal to their preferred size and return them.</li>
+ <li>Resolve any flexible lengths. All items now have a real main size.</li>
- <li>
- <p>For each <i>flex tuple</i> with non-zero <i>negative flexibility</i>, set its preferred size to:</p>
+ <li>Align in the main axis, per 'flex-pack'.</li>
- <pre><code>[preferred size] + ( [available free space] * [negative flexibility] / [total flexibility] )</code></pre>
+ <li>Based on 'flex-align', find the real cross size of the flexbox, its lines, and the items.</li>
- <p class=note>Note that the <i>available free space</i> is a negative
- length here, so the sum will result in a smaller length.</p>
- </li>
+ <li>Align in the cross axis, per 'flex-align'.</li>
- <li>If any <i>flex tuple</i>s now have a preferred size lesser than their minimum size, set their preferred size to their minimum size, set their negative flexibility to 0, and restart this algorithm.</li>
+ <li>Align the lines, per 'flex-line-pack'.</li>
+ </ol>
- <li>Transform all the <i>flex tuple</i>s into inflexible lengths equal to their preferred size, and return them.</li>
- </ol>
+ <p>Note that if any "hypothetical" size is a definite length or percentage, it's actually a real size immediately and won't change (well, aside from flexing). The hypothetical calculations are meant to give intermediate results in the presence of ''auto'' values (and others?), so I can do other calculations that depend on those lengths.</p>
+ </div>
<h2 id="pagination">
Received on Saturday, 27 August 2011 01:25:47 UTC