- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 07 Dec 2011 17:33:08 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv19075
Modified Files:
Overview.html Overview.src.html
Log Message:
Commit unfinished flexbox layout algorithm.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.73
retrieving revision 1.74
diff -u -d -r1.73 -r1.74
--- Overview.html 24 Nov 2011 19:59:07 -0000 1.73
+++ Overview.html 7 Dec 2011 17:33:05 -0000 1.74
@@ -9,6 +9,10 @@
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
+ <style>
+ code.one-line { white-space: pre; }
+ </style>
+
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
@@ -16,17 +20,20 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 November 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 December 2011</h2>
<dl>
<dt>This version:
+ <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-flexbox-20111207/">http://www.w3.org/TR/2011/ED-css3-flexbox-20111207/</a>-->
+
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111124/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111124/</a></dd> -->
- <a
+ <dd><a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
<dt>Latest version:
+ <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>-->
+
<dd><a
href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
@@ -1410,6 +1417,157 @@
calculations that depend on those lengths.</p>
</div>
+ <p>The layout algorithm for flexbox is, unfortunately, too complex and
+ interdependent to usefully describe in pieces within each property's
+ description. As such, the normative layout algorithm is described in this
+ chapter. Note that this is the <em>definitive</em> description of the
+ flexbox layout algorithm - any information located elsewhere in this spec
+ is informative only. Note as well that only the <strong>output</strong> of
+ the algorithm is normative. The precise steps described in this section
+ are informative, and written with an eye toward clarity and simplicity,
+ not efficiency. Any algorithm that achieves the same results is
+ acceptable.
+
+ <p>This section is mainly intended for implementors. Authors writing web
+ pages should generally be served well by the individual property
+ descriptions, and do not need to read this section unless they have a
+ deep-seated urge to understand arcane details of CSS layout.
+
+ <p>To lay out a flexbox and its contents, follow these steps:
+
+ <ol>
+ <li>Re-order the flexbox items according to their ‘<a
+ href="#flex-order0"><code class=property>flex-order</code></a>’.
+ The items with the lowest (most negative) ‘<a
+ href="#flex-order0"><code class=property>flex-order</code></a>’
+ values are first in the ordering. If multiple items share a ‘<a
+ href="#flex-order0"><code class=property>flex-order</code></a>’
+ value, they're ordered by document order. This affects the order in which
+ the flexbox items generate boxes in the box-tree, and how the rest of
+ this algorithm deals with the items.
+
+ <li>
+ <p>Find the hypothetical size of each flexbox item. For the purpose of
+ this step:</p>
+
+ <ul>
+ <li>Treat the flexbox as ‘<code
+ class=css>display:block</code>’ if it was ‘<code
+ class=css>display:flexbox</code>’, and as ‘<code
+ class=css>display:inline-block</code>’ if it was ‘<code
+ class=css>display:inline-flexbox</code>’.
+
+ <li>Treat the flexbox and every flexbox item as establishing a block
+ formatting context.
+
+ <li>If the width or height of a flexbox item is flexible, treat it as
+ the preferred width of the flexible length. <strong>Do not apply
+ min/max-width/height constraints to the preferred widths/heights of
+ flexible lengths - those constraints are handled elsewhere in this
+ algorithm, and doing so will produce incorrect results.</strong> Do
+ apply those constraints to non-flexible lengths, as normal.
+
+ <li>If the width or height of a flexbox item is ‘<code
+ class=property>auto</code>’, or is being treated as ‘<code
+ class=property>auto</code>’ due to the above step, treat it as
+ ‘<code class=property>fit-content</code>’. <span
+ class=note>IIRC, this is the name we expect to give to the "shrinkwrap"
+ behavior.</span>.
+ </ul>
+
+ <p>For each flexbox item:</p>
+
+ <ol>
+ <li>Ignore all other flexbox items. The rest of this sub-algorithm is
+ run with the assumption that the flexbox contains only the single
+ flexbox item in question.
+
+ <li>Using normal block layout, resolve the width and height of the
+ flexbox item.
+ </ol>
+
+ <p>Each flexbox item now has a hypothetical width and hypothetical
+ height.</p>
+
+ <li>Find the available space of the flexbox (the space inside the flexbox
+ that can be used to lay out children). Basically, how wide would a block
+ be in that situation with "width:fill" (or "auto", in normal block
+ layout), minus margin/border/padding. <span class=issue>Figure this out
+ by talking with Ojan, etc.</span>
+
+ <li>
+ <p>If the flexbox is multiline, group the flexbox items into multiple
+ lines:</p>
+
+ <ol>
+ <li>Collect as many consecutive flexbox items as possible, starting from
+ the first item, while keeping the sum of their main size smaller than
+ the flexbox's available space. The items so collected form a single
+ flexbox line.
+
+ <li>Repeat the previous step, starting each time from the first flexbox
+ item not yet collected into a flexbox line, until all flexbox items
+ have been collected into flexbox lines.
+ </ol>
+
+ <p>If the flexbox is single-line, collect all the flexbox items into a
+ single flexbox line.</p>
+
+ <li>
+ <p>Find the actual main size of the flexbox.</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>
+
+ <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>
+
+ <p> ...
+
+ <p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
+ lengths</dfn> of the items within a flexbox line:
+
+ <ol>
+ <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
+ class=property>max-height</code>’ or ‘<code
+ class=property>max-width</code>’), 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. <a href="#distribute-the-free-space"><i>Distribute the free
+ space</i></a> again.
+
+ <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 min size constraint (‘<code
+ class=property>min-height</code>’ or ‘<code
+ class=property>min-width</code>’), 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. <a href="#distribute-the-free-space"><i>Distribute the free
+ 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.
+ </ol>
+
+ <p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
+ a flexbox line:
+
+ <ol>
+ <li>...
+ </ol>
+
<h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
<p class=issue>TODO: define how flexbox should break on pages, columns,
@@ -1626,6 +1784,9 @@
<li>cross-start, <a href="#cross-start"
title=cross-start><strong>2.</strong></a>
+ <li>distribute the free space, <a href="#distribute-the-free-space"
+ title="distribute the free space"><strong>7.</strong></a>
+
<li>end, <a href="#flex-align-end" title=end><strong>5.2.</strong></a>, <a
href="#flex-line-pack-end" title=end><strong>6.1.</strong></a>, <a
href="#flex-pack-end" title=end><strong>5.1.</strong></a>
@@ -1700,6 +1861,9 @@
<li>preferred size, <a href="#preferred-size"
title="preferred size"><strong>4.1.</strong></a>
+ <li>resolve the flexible lengths, <a href="#resolve-the-flexible-lengths"
+ title="resolve the flexible lengths"><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"
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.73
retrieving revision 1.74
diff -u -d -r1.73 -r1.74
--- Overview.src.html 30 Sep 2011 22:31:11 -0000 1.73
+++ Overview.src.html 7 Dec 2011 17:33:06 -0000 1.74
@@ -5,6 +5,9 @@
<title>CSS Flexible Box Layout Module</title>
<link rel="stylesheet" type="text/css" href="http://dev.w3.org/csswg/css-module/default.css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
+ <style>
+ code.one-line { white-space: pre; }
+ </style>
</head><body>
<div class="head">
@@ -15,10 +18,11 @@
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a></dd> -->
- <a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
+ <!--<dd><a href="[VERSION]">[VERSION]</a>-->
+ <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
<dt>Latest version:
+ <!--<dd><a href="[LATEST]">[LATEST]</a>-->
<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
<dt>Previous version:
@@ -668,6 +672,83 @@
<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>
+ <p>The layout algorithm for flexbox is, unfortunately, too complex and interdependent to usefully describe in pieces within each property's description. As such, the normative layout algorithm is described in this chapter. Note that this is the <em>definitive</em> description of the flexbox layout algorithm - any information located elsewhere in this spec is informative only. Note as well that only the <strong>output</strong> of the algorithm is normative. The precise steps described in this section are informative, and written with an eye toward clarity and simplicity, not efficiency. Any algorithm that achieves the same results is acceptable.</p>
+
+ <p>This section is mainly intended for implementors. Authors writing web pages should generally be served well by the individual property descriptions, and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.</p>
+
+ <p>To lay out a flexbox and its contents, follow these steps:</p>
+
+ <ol>
+ <li>Re-order the flexbox items according to their 'flex-order'. The items with the lowest (most negative) 'flex-order' values are first in the ordering. If multiple items share a 'flex-order' value, they're ordered by document order. This affects the order in which the flexbox items generate boxes in the box-tree, and how the rest of this algorithm deals with the items.</li>
+
+ <li>
+ <p>Find the hypothetical size of each flexbox item. For the purpose of this step:</p>
+
+ <ul>
+ <li>Treat the flexbox as ''display:block'' if it was ''display:flexbox'', and as ''display:inline-block'' if it was ''display:inline-flexbox''.</li>
+
+ <li>Treat the flexbox and every flexbox item as establishing a block formatting context.</li>
+
+ <li>If the width or height of a flexbox item is flexible, treat it as the preferred width of the flexible length. <strong>Do not apply min/max-width/height constraints to the preferred widths/heights of flexible lengths - those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results.</strong> Do apply those constraints to non-flexible lengths, as normal.</li>
+
+ <li>If the width or height of a flexbox item is 'auto', or is being treated as 'auto' due to the above step, treat it as 'fit-content'. <span class='note'>IIRC, this is the name we expect to give to the "shrinkwrap" behavior.</span>.</li>
+ </ul>
+
+ <p>For each flexbox item:</p>
+
+ <ol>
+ <li>Ignore all other flexbox items. The rest of this sub-algorithm is run with the assumption that the flexbox contains only the single flexbox item in question.</li>
+
+ <li>Using normal block layout, resolve the width and height of the flexbox item.</li>
+ </ol>
+
+ <p>Each flexbox item now has a hypothetical width and hypothetical height.</p>
+ </li>
+
+ <li>Find the available space of the flexbox (the space inside the flexbox that can be used to lay out children). Basically, how wide would a block be in that situation with "width:fill" (or "auto", in normal block layout), minus margin/border/padding. <span class='issue'>Figure this out by talking with Ojan, etc.</span>
+
+ <li>
+ <p>If the flexbox is multiline, group the flexbox items into multiple lines:</p>
+
+ <ol>
+ <li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their main size smaller than the flexbox's available space. The items so collected form a single flexbox line.</li>
+
+ <li>Repeat the previous step, starting each time from the first flexbox item not yet collected into a flexbox line, until all flexbox items have been collected into flexbox lines.</li>
+ </ol>
+
+ <p>If the flexbox is single-line, collect all the flexbox items into a single flexbox line.</p>
+ </li>
+
+ <li>
+ <p>Find the actual main size of the flexbox.</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>
+ </li>
+
+ <li>For each flexbox line, <i>resolve the flexible lengths</i> of the items contained within it.</li>
+
+ ...
+ </ol>
+
+ <p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
+
+ <ol>
+ <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>
+ </ol>
+
+ <p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
+
+ <ol>
+ <li>...
+ </ol>
+
+
<h2 id="pagination">
Page breaks in flexbox</h2>
Received on Wednesday, 7 December 2011 17:33:17 UTC