- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 05 Jan 2012 22:52:34 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv17660
Modified Files:
Overview.html Overview.src.html
Log Message:
Updated link to the stylesheet.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.84
retrieving revision 1.85
diff -u -d -r1.84 -r1.85
--- Overview.html 16 Dec 2011 00:39:58 -0000 1.84
+++ Overview.html 5 Jan 2012 22:52:32 -0000 1.85
@@ -4,7 +4,7 @@
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Flexible Box Layout Module</title>
- <link href="http://dev.w3.org/csswg/css-module/default.css" rel=stylesheet
+ <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
@@ -20,11 +20,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 15 December 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 5 January 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-flexbox-20111215/">http://www.w3.org/TR/2011/ED-css3-flexbox-20111215/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120105/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120105/</a>-->
<dd><a
@@ -78,7 +78,7 @@
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2011 <a
+ rel=license>Copyright</a> © 2012 <a
href="http://www.w3.org/"><acronym
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><acronym
@@ -388,7 +388,12 @@
<p>The ‘<a href="#flexbox"><code class=css>flexbox</code></a>’
value makes the flexbox act like a block in other layout modes. The
‘<code class=css>inline-flexbox</code>’ value makes the
- flexbox act like an inline-block in other layout modes.
+ flexbox act like an inline-block in other layout modes. When it is
+ necessary to distinguish them, this specification will refer to the former
+ kind of flexbox as <dfn id=block-flexbox
+ title="block flexbox|block flexboxes">block flexboxes</dfn> and the latter
+ type as <dfn id=inline-flexbox
+ title="inline flexbox|inline flexboxes">inline flexboxes</dfn>.
<p>Flexboxes use a new layout algorithm, and so some properties that were
designed with the assumption of block layout don't make sense in a flexbox
@@ -1555,29 +1560,41 @@
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.
+ <p class=issue>When, precisely, should this happen? For example, should
+ table-fixup among the children happen before this?
<li>
- <p>Find the hypothetical size of each flexbox item. For the purpose of
- this step:</p>
+ <p>Resolve the width and height of every flexbox item into an absolute
+ length. If the width or height is already an absolute length (like
+ ‘<code class=css>50px</code>’) or was transformed into an
+ absolute length at computed-value time (like ‘<code
+ class=css>10em</code>’), skip the rest of this step for that
+ dimension.</p>
+
+ <p>Otherwise, determining the size requires a layout to transform it into
+ a pair of absolute lengths. 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 <a href="#block-flexbox"><i>block flexboxes</i></a> as being
+ ‘<code class=css>display:block</code>’ and <a
+ href="#inline-flexbox"><i>inline flexboxes</i></a> as being
+ ‘<code class=css>display:inline-block</code>’. 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
+ <li>If the main size of a flexbox item is flexible, treat it as the
+ preferred size 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
+ <li>If the main size 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
@@ -1588,28 +1605,28 @@
<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.
+ <li>Ignore all other flexbox items (do layout as if the flexbox had only
+ a single child - the flexbox item in question). Using normal block
+ layout (and the preceding additional assumptions), 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 single-line, collect all the flexbox items into a
+ single flexbox line.</p>
+
<p>If the flexbox is multi-line, group the flexbox items into multiple
lines:</p>
<ol>
+ <li>Determine the flexbox's available space by finding the size of the
+ flexbox's parent's content box in the flexbox's main axis, and
+ subtracting the size of the flexbox's margins, borders, and padding in
+ the main axis.
+
<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
@@ -1620,11 +1637,9 @@
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>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.
@@ -1897,6 +1912,12 @@
<li>baseline, <a href="#flex-align-baseline"
title=baseline><strong>5.2.</strong></a>
+ <li>block flexbox, <a href="#block-flexbox"
+ title="block flexbox"><strong>2.1.</strong></a>
+
+ <li>block flexboxes, <a href="#block-flexbox"
+ title="block flexboxes"><strong>2.1.</strong></a>
+
<li>center, <a href="#flex-align-center"
title=center><strong>5.2.</strong></a>, <a href="#flex-line-pack-center"
title=center><strong>6.1.</strong></a>, <a href="#flex-pack-center"
@@ -1976,6 +1997,12 @@
<li>hypothetical neighbors, <a href="#hypothetical-neighbors"
title="hypothetical neighbors"><strong>2.2.1.</strong></a>
+ <li>inline flexbox, <a href="#inline-flexbox"
+ title="inline flexbox"><strong>2.1.</strong></a>
+
+ <li>inline flexboxes, <a href="#inline-flexbox"
+ title="inline flexboxes"><strong>2.1.</strong></a>
+
<li>justify, <a href="#flex-line-pack-justify"
title=justify><strong>6.1.</strong></a>, <a href="#flex-pack-justify"
title=justify><strong>5.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.84
retrieving revision 1.85
diff -u -d -r1.84 -r1.85
--- Overview.src.html 16 Dec 2011 00:39:59 -0000 1.84
+++ Overview.src.html 5 Jan 2012 22:52:32 -0000 1.85
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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://dev.w3.org/csswg/default.css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
<style>
code.one-line { white-space: pre; }
@@ -115,7 +115,7 @@
<p>You can declare that an element is a flexbox, and thus should use flexbox layout for its contents, by setting the 'display' property on the element to the value 'flexbox' or 'inline-flexbox'.</p>
- <p>The ''flexbox'' value makes the flexbox act like a block in other layout modes. The ''inline-flexbox'' value makes the flexbox act like an inline-block in other layout modes.</p>
+ <p>The ''flexbox'' value makes the flexbox act like a block in other layout modes. The ''inline-flexbox'' value makes the flexbox act like an inline-block in other layout modes. When it is necessary to distinguish them, this specification will refer to the former kind of flexbox as <dfn id="block-flexbox" title="block flexbox|block flexboxes">block flexboxes</dfn> and the latter type as <dfn id="inline-flexbox" title="inline flexbox|inline flexboxes">inline flexboxes</dfn>.</p>
<p>Flexboxes use a new layout algorithm, and so some properties that were designed with the assumption of block layout don't make sense in a flexbox context. In particular:</p>
@@ -738,48 +738,51 @@
<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>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.
+
+ <p class='issue'>When, precisely, should this happen? For example, should table-fixup among the children happen before this?
+ </li>
<li>
- <p>Find the hypothetical size of each flexbox item. For the purpose of this step:</p>
+ <p>Resolve the width and height of every flexbox item into an absolute length. If the width or height is already an absolute length (like ''50px'') or was transformed into an absolute length at computed-value time (like ''10em''), skip the rest of this step for that dimension.</p>
+
+ <p>Otherwise, determining the size requires a layout to transform it into a pair of absolute lengths. 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 <i>block flexboxes</i> as being ''display:block'' and <i>inline flexboxes</i> as being ''display:inline-block''. 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 main size of a flexbox item is flexible, treat it as the preferred size 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>
+ <li>If the main size 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>
+ <li>Ignore all other flexbox items (do layout as if the flexbox had only a single child - the flexbox item in question). Using normal block layout (and the preceding additional assumptions), 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 single-line, collect all the flexbox items into a single flexbox line.</p>
+
<p>If the flexbox is multi-line, group the flexbox items into multiple lines:</p>
<ol>
+ <li>Determine the flexbox's available space by finding the size of the flexbox's parent's content box in the flexbox's main axis, and subtracting the size of the flexbox's margins, borders, and padding in the main axis.</li>
+
<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>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>
Received on Thursday, 5 January 2012 22:52:36 UTC