- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 06 Feb 2012 21:45:18 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv11080
Modified Files:
Overview.html Overview.src.html
Log Message:
Rearrange the flex-flow section to split the properties into separate subsections.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.146
retrieving revision 1.147
diff -u -d -r1.146 -r1.147
--- Overview.html 6 Feb 2012 21:40:11 -0000 1.146
+++ Overview.html 6 Feb 2012 21:45:16 -0000 1.147
@@ -196,13 +196,19 @@
<li><a href="#ordering-orientation"><span class=secno>3. </span> Ordering
and Orientation</a>
<ul class=toc>
- <li><a href="#flex-flow"><span class=secno>3.1. </span> Flexbox Flow
- Direction: the ‘<code
- class=property>flex-direction</code>’, ‘<code
- class=property>flex-wrap</code>’, and ‘<code
- class=property>flex-flow</code>’ properties</a>
+ <li><a href="#flex-direction"><span class=secno>3.1. </span> Flexbox
+ Flow Direction: the ‘<code
+ class=property>flex-direction</code>’ property</a>
- <li><a href="#flex-order"><span class=secno>3.2. </span> Display Order:
+ <li><a href="#flex-wrap"><span class=secno>3.2. </span> Flexbox
+ Wrapping: the ‘<code class=property>flex-wrap</code>’
+ property</a>
+
+ <li><a href="#flex-flow"><span class=secno>3.3. </span> Flex Direction
+ and Wrap: the ‘<code class=property>flex-flow</code>’
+ shorthand</a>
+
+ <li><a href="#flex-order"><span class=secno>3.4. </span> Display Order:
the ‘<code class=property>flex-order</code>’ property</a>
</ul>
@@ -637,19 +643,16 @@
href="#flex-order0"><code class=property>flex-order</code></a>’
properties.
- <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
- ‘<a href="#flex-direction"><code
- class=property>flex-direction</code></a>’, ‘<a
- href="#flex-wrap"><code class=property>flex-wrap</code></a>’, and
- ‘<a href="#flex-flow0"><code
- class=property>flex-flow</code></a>’ properties</h3>
+ <h3 id=flex-direction><span class=secno>3.1. </span> Flexbox Flow
+ Direction: the ‘<a href="#flex-direction0"><code
+ class=property>flex-direction</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
- <td><dfn id=flex-direction>flex-direction</dfn>
+ <td><dfn id=flex-direction0>flex-direction</dfn>
<tr>
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
@@ -687,65 +690,67 @@
<td>no
</table>
- <table class=propdef>
- <tbody>
- <tr>
- <th>Name:
-
- <td><dfn id=flex-wrap>flex-wrap</dfn>
-
- <tr>
- <th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
-
- <td>none | wrap | wrap-reverse
-
- <tr>
- <th>Initial:
-
- <td>none
-
- <tr>
- <th>Applies To:
+ <p>The ‘<a href="#flex-direction0"><code
+ class=property>flex-direction</code></a>’ property specifies how <a
+ href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox,
+ by setting the direction of the flexbox's <a href="#main-axis"><i>main
+ axis</i></a>. This affects the direction that flexbox items are laid out
+ in, and the meaning of the ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ property.
- <td>flexboxes
+ <dl>
+ <dt><dfn id=flex-flow-row>row</dfn>
- <tr>
- <th>Inherited:
+ <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
+ orientation as the inline axis of the current writing mode (the direction
+ that text is laid out in). The <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are equivalent to the
+ "start" and "end" directions, respectively, of the current writing mode.
- <td>no
+ <dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
- <tr>
- <th>Computed Value:
+ <dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are swapped.
- <td>specified value
+ <dt><dfn id=flex-flow-column>column</dfn>
- <tr>
- <th>Media:
+ <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
+ orientation as the block axis of the current writing mode (the direction
+ that blocks are laid out in). The <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are equivalent to the
+ "before" and "after" directions, respectively, of the current writing
+ mode.
- <td>visual
+ <dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
- <tr>
- <th>Animatable:
+ <dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are swapped.
+ </dl>
- <td>no
- </table>
+ <h3 id=flex-wrap><span class=secno>3.2. </span> Flexbox Wrapping: the
+ ‘<a href="#flex-wrap0"><code
+ class=property>flex-wrap</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
- <td><dfn id=flex-flow0>flex-flow</dfn>
+ <td><dfn id=flex-wrap0>flex-wrap</dfn>
<tr>
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
- <td><'flex-direction'> || <'flex-wrap'>
+ <td>none | wrap | wrap-reverse
<tr>
<th>Initial:
- <td>see individual properties
+ <td>none
<tr>
<th>Applies To:
@@ -755,12 +760,12 @@
<tr>
<th>Inherited:
- <td>see individual properties
+ <td>no
<tr>
<th>Computed Value:
- <td>see individual properties
+ <td>specified value
<tr>
<th>Media:
@@ -773,48 +778,7 @@
<td>no
</table>
- <p>The ‘<a href="#flex-direction"><code
- class=property>flex-direction</code></a>’ property specifies how <a
- href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox,
- by setting the direction of the flexbox's <a href="#main-axis"><i>main
- axis</i></a>. This affects the direction that flexbox items are laid out
- in, and the meaning of the ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ property.
-
- <dl>
- <dt><dfn id=flex-flow-row>row</dfn>
-
- <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
- orientation as the inline axis of the current writing mode (the direction
- that text is laid out in). The <a
- href="#main-start"><i>main-start</i></a> and <a
- href="#main-end"><i>main-end</i></a> directions are equivalent to the
- "start" and "end" directions, respectively, of the current writing mode.
-
- <dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
-
- <dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
- href="#main-start"><i>main-start</i></a> and <a
- href="#main-end"><i>main-end</i></a> directions are swapped.
-
- <dt><dfn id=flex-flow-column>column</dfn>
-
- <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
- orientation as the block axis of the current writing mode (the direction
- that blocks are laid out in). The <a
- href="#main-start"><i>main-start</i></a> and <a
- href="#main-end"><i>main-end</i></a> directions are equivalent to the
- "before" and "after" directions, respectively, of the current writing
- mode.
-
- <dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
-
- <dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
- href="#main-start"><i>main-start</i></a> and <a
- href="#main-end"><i>main-end</i></a> directions are swapped.
- </dl>
-
- <p>The ‘<a href="#flex-wrap"><code
+ <p>The ‘<a href="#flex-wrap0"><code
class=property>flex-wrap</code></a>’ property controls whether the
flexbox is <a href="#single-line"><i>single-line</i></a> or <a
href="#multi-line0"><i>multi-line</i></a>, and the direction of the <a
@@ -861,11 +825,58 @@
href="#cross-end"><i>cross-end</i></a> directions are swapped.
</dl>
+ <h3 id=flex-flow><span class=secno>3.3. </span> Flex Direction and Wrap:
+ the ‘<a href="#flex-flow0"><code
+ class=property>flex-flow</code></a>’ shorthand</h3>
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=flex-flow0>flex-flow</dfn>
+
+ <tr>
+ <th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
+
+ <td><'flex-direction'> || <'flex-wrap'>
+
+ <tr>
+ <th>Initial:
+
+ <td>see individual properties
+
+ <tr>
+ <th>Applies To:
+
+ <td>flexboxes
+
+ <tr>
+ <th>Inherited:
+
+ <td>see individual properties
+
+ <tr>
+ <th>Computed Value:
+
+ <td>see individual properties
+
+ <tr>
+ <th>Media:
+
+ <td>visual
+
+ <tr>
+ <th>Animatable:
+
+ <td>no
+ </table>
+
<p>The ‘<a href="#flex-flow0"><code
class=property>flex-flow</code></a>’ property is a shorthand for
- setting the ‘<a href="#flex-direction"><code
+ setting the ‘<a href="#flex-direction0"><code
class=property>flex-direction</code></a>’ and ‘<a
- href="#flex-wrap"><code class=property>flex-wrap</code></a>’
+ href="#flex-wrap0"><code class=property>flex-wrap</code></a>’
properties together.
<div class=example>
@@ -906,7 +917,7 @@
</table>
</div>
- <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
+ <h3 id=flex-order><span class=secno>3.4. </span> Display Order: the
‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’ property</h3>
@@ -1512,7 +1523,7 @@
<p>A flexbox can be either <a href="#single-line"><i>single-line</i></a> or
<a href="#multi-line0"><i>multi-line</i></a>, depending on the ‘<a
- href="#flex-wrap"><code class=property>flex-wrap</code></a>’
+ href="#flex-wrap0"><code class=property>flex-wrap</code></a>’
property. A <dfn id=single-line>single-line</dfn> flexbox lays out all of
its children in a single line, even if that would cause the flexbox to
overflow its bounds. A <dfn id=multi-line0>multi-line</dfn> flexbox breaks
@@ -2380,7 +2391,7 @@
<td>visual
<tr>
- <th><a class=property href="#flex-direction">flex-direction</a>
+ <th><a class=property href="#flex-direction0">flex-direction</a>
<td>row | row-reverse | column | column-reverse
@@ -2471,7 +2482,7 @@
<td>visual
<tr>
- <th><a class=property href="#flex-wrap">flex-wrap</a>
+ <th><a class=property href="#flex-wrap0">flex-wrap</a>
<td>none | wrap | wrap-reverse
@@ -2569,11 +2580,11 @@
<li>flexbox item's, <a href="#flexbox-item"
title="flexbox item's"><strong>2.</strong></a>
- <li>flex-direction, <a href="#flex-direction"
+ <li>flex-direction, <a href="#flex-direction0"
title=flex-direction><strong>3.1.</strong></a>
<li>flex-flow, <a href="#flex-flow0"
- title=flex-flow><strong>3.1.</strong></a>
+ title=flex-flow><strong>3.3.</strong></a>
<li>flexible length, <a href="#flexible-length"
title="flexible length"><strong>4.</strong></a>
@@ -2591,13 +2602,13 @@
title=flex-line-pack><strong>6.1.</strong></a>
<li>flex-order, <a href="#flex-order0"
- title=flex-order><strong>3.2.</strong></a>
+ title=flex-order><strong>3.4.</strong></a>
<li>flex-pack, <a href="#flex-pack0"
title=flex-pack><strong>5.1.</strong></a>
- <li>flex-wrap, <a href="#flex-wrap"
- title=flex-wrap><strong>3.1.</strong></a>
+ <li>flex-wrap, <a href="#flex-wrap0"
+ title=flex-wrap><strong>3.2.</strong></a>
<li>inline flexbox, <a href="#inline-flexbox"
title="inline flexbox"><strong>2.1.</strong></a>
@@ -2629,7 +2640,7 @@
<li>negative flexibility, <a href="#negative-flexibility"
title="negative flexibility"><strong>4.</strong></a>
- <li>none, <a href="#flex-flow-none" title=none><strong>3.1.</strong></a>
+ <li>none, <a href="#flex-flow-none" title=none><strong>3.2.</strong></a>
<li>positive flexibility, <a href="#positive-flexibility"
title="positive flexibility"><strong>4.</strong></a>
@@ -2666,10 +2677,10 @@
title="style sheet, as conformance class"><strong>9.2.</strong></a>
</ul>
- <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>
+ <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.2.</strong></a>
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
- title=wrap-reverse><strong>3.1.</strong></a>
+ title=wrap-reverse><strong>3.2.</strong></a>
</ul>
<!--end-index-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.144
retrieving revision 1.145
diff -u -d -r1.144 -r1.145
--- Overview.src.html 6 Feb 2012 21:40:11 -0000 1.144
+++ Overview.src.html 6 Feb 2012 21:45:16 -0000 1.145
@@ -256,8 +256,8 @@
<p>The first level of flexbox functionality is the ability to lay out a flexbox's contents in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as using the 'float' property to lay out a horizontal navigation bar (which then requires further effort with the 'clear' property or others to make the elements interact nicely with the rest of the page). This functionality is exposed through the 'flex-flow' and 'flex-order' properties.</p>
-<h3 id='flex-flow'>
-Flexbox Flow Direction: the 'flex-direction', 'flex-wrap', and 'flex-flow' properties</h3>
+<h3 id='flex-direction'>
+Flexbox Flow Direction: the 'flex-direction' property</h3>
<table class=propdef>
<tr>
@@ -286,6 +286,25 @@
<td>no
</table>
+ <p>The 'flex-direction' property specifies how <i>flexbox items</i> are placed in the flexbox, by setting the direction of the flexbox's <i>main axis</i>. This affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' property.</p>
+
+ <dl>
+ <dt><dfn id='flex-flow-row'>row</dfn></dt>
+ <dd>The flexbox's <i>main axis</i> has the same orientation as the inline axis of the current writing mode (the direction that text is laid out in). The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "start" and "end" directions, respectively, of the current writing mode.</dd>
+
+ <dt><dfn id='flex-flow-row-reverse'>row-reverse</dfn></dt>
+ <dd>Same as <i>row</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
+
+ <dt><dfn id='flex-flow-column'>column</dfn></dt>
+ <dd>The flexbox's <i>main axis</i> has the same orientation as the block axis of the current writing mode (the direction that blocks are laid out in). The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "before" and "after" directions, respectively, of the current writing mode.</dd>
+
+ <dt><dfn id='flex-flow-column-reverse'>column-reverse</dfn></dt>
+ <dd>Same as <i>column</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
+ </dl>
+
+<h3 id='flex-wrap'>
+Flexbox Wrapping: the 'flex-wrap' property</h3>
+
<table class=propdef>
<tr>
<th>Name:</th>
@@ -313,6 +332,24 @@
<td>no
</table>
+ <p>The 'flex-wrap' property controls whether the flexbox is <i>single-line</i> or <i>multi-line</i>, and the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in and the meaning of the 'flex-align', 'flex-item-align', and 'flex-line-pack' properties.</p>
+
+ <dl>
+ <dt><dfn id='flex-flow-none'>none</dfn></dt>
+ <dd>The flexbox is <i>single-line</i>. The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.
+ <p class='issue'>For consistency with 'white-space', we should use ''nowrap''. For consistency with 'text-wrap', we should use ''none''. ''none'' is the less dumb of these. Can we switch both this and 'text-wrap' to ''no-wrap''?</p>
+ </dd>
+
+ <dt><dfn id='flex-flow-wrap'>wrap</dfn></dt>
+ <dd>The flexbox is <i>multi-line</i>. The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</dd>
+
+ <dt><dfn id='flex-flow-wrap-reverse'>wrap-reverse</dfn></dt>
+ <dd>Same as <i>wrap</i>, except the <i>cross-start</i> and <i>cross-end</i> directions are swapped.</dd>
+ </dl>
+
+<h3 id='flex-flow'>
+Flex Direction and Wrap: the 'flex-flow' shorthand</h3>
+
<table class=propdef>
<tr>
<th>Name:</th>
@@ -340,37 +377,6 @@
<td>no
</table>
- <p>The 'flex-direction' property specifies how <i>flexbox items</i> are placed in the flexbox, by setting the direction of the flexbox's <i>main axis</i>. This affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' property.</p>
-
- <dl>
- <dt><dfn id='flex-flow-row'>row</dfn></dt>
- <dd>The flexbox's <i>main axis</i> has the same orientation as the inline axis of the current writing mode (the direction that text is laid out in). The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "start" and "end" directions, respectively, of the current writing mode.</dd>
-
- <dt><dfn id='flex-flow-row-reverse'>row-reverse</dfn></dt>
- <dd>Same as <i>row</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
-
- <dt><dfn id='flex-flow-column'>column</dfn></dt>
- <dd>The flexbox's <i>main axis</i> has the same orientation as the block axis of the current writing mode (the direction that blocks are laid out in). The <i>main-start</i> and <i>main-end</i> directions are equivalent to the "before" and "after" directions, respectively, of the current writing mode.</dd>
-
- <dt><dfn id='flex-flow-column-reverse'>column-reverse</dfn></dt>
- <dd>Same as <i>column</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
- </dl>
-
- <p>The 'flex-wrap' property controls whether the flexbox is <i>single-line</i> or <i>multi-line</i>, and the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in and the meaning of the 'flex-align', 'flex-item-align', and 'flex-line-pack' properties.</p>
-
- <dl>
- <dt><dfn id='flex-flow-none'>none</dfn></dt>
- <dd>The flexbox is <i>single-line</i>. The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.
- <p class='issue'>For consistency with 'white-space', we should use ''nowrap''. For consistency with 'text-wrap', we should use ''none''. ''none'' is the less dumb of these. Can we switch both this and 'text-wrap' to ''no-wrap''?</p>
- </dd>
-
- <dt><dfn id='flex-flow-wrap'>wrap</dfn></dt>
- <dd>The flexbox is <i>multi-line</i>. The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</dd>
-
- <dt><dfn id='flex-flow-wrap-reverse'>wrap-reverse</dfn></dt>
- <dd>Same as <i>wrap</i>, except the <i>cross-start</i> and <i>cross-end</i> directions are swapped.</dd>
- </dl>
-
<p>The 'flex-flow' property is a shorthand for setting the 'flex-direction' and 'flex-wrap' properties together.</p>
<div class="example">
Received on Monday, 6 February 2012 21:47:24 UTC