- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 26 Jan 2012 01:05:57 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv24987
Modified Files:
Overview.html Overview.src.html
Log Message:
Flesh out the layout algorithm more. All that's left is the 'distribute free space' substep.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.109
retrieving revision 1.110
diff -u -d -r1.109 -r1.110
--- Overview.html 25 Jan 2012 23:06:18 -0000 1.109
+++ Overview.html 26 Jan 2012 01:05:55 -0000 1.110
@@ -29,11 +29,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 January 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 26 January 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120125/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120125/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120126/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120126/</a>-->
<dd><a
@@ -1911,23 +1911,81 @@
<p>Find the actual main size of the flexbox, per the standard rules for
blocks (for block flexboxes) or inline-blocks (for inline flexboxes).</p>
- <p>If the flexbox is to be shrinkwrapped in the main axis, then, for each
- flexbox line, sum the hypothetical main sizes of the items in the line.
- The actual main size of the flexbox is then the largest of these sums.</p>
-
- <p>Otherwise, determine the size as normal for block layout.</p>
+ <p>The min-content, max-content, or fit-content size of a flexbox in the
+ main axis can be determined by, for each flexbox line, summing the
+ min-content, max-content, or fit-content (as appropriate) sizes in the
+ main axis of the flexbox items, and then returning the maximum of these
+ sums.</p>
<li>For each flexbox line, <a
href="#resolve-the-flexible-lengths"><i>resolve the flexible
- lengths</i></a> of the items contained within it.
- </ol>
+ lengths</i></a> of the items contained within it. All flexbox items now
+ have a final main size. Update each item's hypothetical cross size based
+ on this main size.
- <p> ...
+ <li>For each flexbox line, align the flexbox items per ‘<a
+ href="#flex-pack0"><code class=property>flex-pack</code></a>’. The
+ leftover free-space for each line is calculated by subtracting the sum of
+ the main sizes of the flexbox items on the line from the main size of the
+ flexbox's content box.
+
+ <li>Calculate the cross size of each flexbox line. For each flexbox line:
+ <ol>
+ <li>If the flexbox is single-line and has a definite cross size, the
+ single flexbox line's cross size is the cross size of the flexbox's
+ content box. End this step of the algorithm.
+
+ <li>Collect all the flexbox items with a ‘<a
+ href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’ of ‘<a
+ href="#flex-line-pack-start"><code class=css>start</code></a>’,
+ ‘<a href="#flex-line-pack-end"><code
+ class=css>end</code></a>’, ‘<a
+ href="#flex-line-pack-center"><code class=css>center</code></a>’,
+ or ‘<a href="#flex-align-stretch"><code
+ class=css>stretch</code></a>’, or a value of ‘<a
+ href="#flex-align-baseline"><code class=css>baseline</code></a>’
+ and a cross axis parallel to their inline axis, and find the maximum of
+ the cross sizes of their margin boxes.
+
+ <li>Collect all the flexbox items with a ‘<a
+ href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’ of ‘<a
+ href="#flex-align-baseline"><code class=css>baseline</code></a>’
+ and a cross axis perpendicular to their inline axis. 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.
+
+ <li>The cross size of the flexbox line is the larger of the numbers
+ found in the previous two steps.
+ </ol>
+
+ <p>If the flexbox doesn't have a definite cross size, the cross size of
+ its content box is the sum of the cross sizes of all of its lines.</p>
+
+ <li>Determine the final cross size of each flexbox item. For each flexbox
+ item, if it has ‘<code
+ class=css>flex-item-align:stretch</code>’, its final cross size is
+ the cross size of its flexbox line. For all other flexbox items, its
+ final cross size is its hypothetical cross size.
+
+ <li>For each flexbox line, align the flexbox items per ‘<a
+ href="#flex-align0"><code class=property>flex-align</code></a>’.
+
+ <li>Align the flexbox lines per ‘<a href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’. 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.
+ </ol>
<p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
lengths</dfn> of the items within a flexbox line:
<ol>
+ <li>Initially, the set of flexbox items marked as violating a max or min
+ size constraint is empty.
+
<li><a href="#distribute-the-free-space"><i>Distribute the free
space</i></a> in the flexbox line. If any flexbox item's main size is in
violation of its max size constraint (‘<code
@@ -1951,9 +2009,8 @@
space</i></a> again.
<li>If the set of flexbox items in the line that are marked as violating a
- max or min size constraint has changed since the last time this step was
- reached, or this is the first time this step was reached, restart this
- algorithm.
+ max or min size constraint has changed in this run of the algorithm,
+ restart the algorithm from step 2.
</ol>
<p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.109
retrieving revision 1.110
diff -u -d -r1.109 -r1.110
--- Overview.src.html 25 Jan 2012 23:06:18 -0000 1.109
+++ Overview.src.html 26 Jan 2012 01:05:55 -0000 1.110
@@ -929,26 +929,47 @@
</li>
<li>
- <p>Find the actual main size of the flexbox, per the standard rules for blocks (for block flexboxes) or inline-blocks (for inline flexboxes). </p>
+ <p>Find the actual main size of the flexbox, per the standard rules for blocks (for block flexboxes) or inline-blocks (for inline flexboxes).</p>
- <p>If the flexbox is to be shrinkwrapped in the main axis, then, for each flexbox line, sum the hypothetical main sizes of the items in the line. The actual main size of the flexbox is then the largest of these sums.</p>
+ <p>The min-content, max-content, or fit-content size of a flexbox in the main axis can be determined by, for each flexbox line, summing the min-content, max-content, or fit-content (as appropriate) sizes in the main axis of the flexbox items, and then returning the maximum of these sums.</p>
+ </li>
- <p>Otherwise, determine the size as normal for block layout.</p>
+ <li>For each flexbox line, <i>resolve the flexible lengths</i> of the items contained within it. All flexbox items now have a final main size. Update each item's hypothetical cross size based on this main size.</li>
+
+ <li>For each flexbox line, align the flexbox items per 'flex-pack'. The leftover free-space for each line is calculated by subtracting the sum of the main sizes of the flexbox items on the line from the main size of the flexbox's content box.</li>
+
+ <li>Calculate the cross size of each flexbox line. For each flexbox line:
+
+ <ol>
+ <li>If the flexbox is single-line and has a definite cross size, the single flexbox line's cross size is the cross size of the flexbox's content box. End this step of the algorithm.</li>
+
+ <li>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, and find the maximum of the cross sizes of their margin boxes.</li>
+
+ <li>Collect all the flexbox items with a 'flex-item-align' of ''baseline'' and a cross axis perpendicular to their inline axis. 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.</li>
+
+ <li>The cross size of the flexbox line is the larger of the numbers found in the previous two steps.</li>
+ </ol>
+
+ <p>If the flexbox doesn't have a definite cross size, the cross size of its content box is the sum of the cross sizes of all of its lines.</p>
</li>
- <li>For each flexbox line, <i>resolve the flexible lengths</i> of the items contained within it.</li>
+ <li>Determine the final cross size of each flexbox item. For each flexbox item, if it has ''flex-item-align:stretch'', its final cross size is the cross size of its flexbox line. For all other flexbox items, its final cross size is its hypothetical cross size.</li>
- ...
+ <li>For each flexbox line, align the flexbox items per 'flex-align'.</li>
+
+ <li>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.</li>
</ol>
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
<ol>
+ <li>Initially, the set of flexbox items marked as violating a max or min size constraint is empty.</li>
+
<li><i>Distribute the free space</i> in the flexbox line. If any flexbox item's main size is in violation of its max size constraint ('max-height' or 'max-width'), mark the item as being in violation of a max size constraint; if any other item is marked as being in violation of a max size constraint from a previous invocation of this step, remove the mark. Set its main size to be equal to its max size constraint. <i>Distribute the free space</i> again.</li>
<li><i>Distribute the free space</i> in the flexbox line. If any flexbox item's main size is in violation of its min size constraint ('min-height' or 'min-width'), mark the item as being in violation of a min size constraint; if any other item is marked as being in violation of a min size constraint from a previous invocation of this step, remove the mark. Set its main size to be equal to its min size constraint. <i>Distribute the free space</i> again.</li>
- <li>If the set of flexbox items in the line that are marked as violating a max or min size constraint has changed since the last time this step was reached, or this is the first time this step was reached, restart this algorithm.</li>
+ <li>If the set of flexbox items in the line that are marked as violating a max or min size constraint has changed in this run of the algorithm, restart the algorithm from step 2.</li>
</ol>
<p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
Received on Thursday, 26 January 2012 01:06:03 UTC