- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 07 Dec 2011 19:49:45 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv10696
Modified Files:
Overview.html Overview.src.html
Log Message:
Per ML discussion, split flex-flow into flex-direction and flex-wrap.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.74
retrieving revision 1.75
diff -u -d -r1.74 -r1.75
--- Overview.html 7 Dec 2011 17:33:05 -0000 1.74
+++ Overview.html 7 Dec 2011 19:49:43 -0000 1.75
@@ -157,8 +157,10 @@
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-flow</code>’
- property</a>
+ 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-order"><span class=secno>3.2. </span> Display Order:
the ‘<code class=property>flex-order</code>’ property</a>
@@ -551,21 +553,23 @@
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>’ property</h3>
+ class=property>flex-flow</code></a>’ properties</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
- <td><dfn id=flex-flow0>flex-flow</dfn>
+ <td><dfn id=flex-direction>flex-direction</dfn>
<tr>
<th>Values:
- <td>[ row | row-reverse | column | column-reverse ] [ wrap |
- wrap-reverse ]?
+ <td>row | row-reverse | column | column-reverse
<tr>
<th>Initial:
@@ -593,13 +597,96 @@
<td>visual
</table>
- <p>The ‘<a href="#flex-flow0"><code
- class=property>flex-flow</code></a>’ property specifies how <a
- href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox.
- The value consists of one or two keywords: the first sets the orientation
- and direction of the flexbox's <a href="#main-axis"><i>main axis</i></a>,
- which affects the direction that flexbox items are laid out in, and the
- meaning of the ‘<a href="#flex-pack0"><code
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=flex-wrap>flex-wrap</dfn>
+
+ <tr>
+ <th>Values:
+
+ <td>no-wrap | wrap | wrap-reverse
+
+ <tr>
+ <th>Initial:
+
+ <td>no-wrap
+
+ <tr>
+ <th>Applies To:
+
+ <td>flexboxes
+
+ <tr>
+ <th>Inherited:
+
+ <td>no
+
+ <tr>
+ <th>Computed Value:
+
+ <td>specified value
+
+ <tr>
+ <th>Media:
+
+ <td>visual
+ </table>
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=flex-flow0>flex-flow</dfn>
+
+ <tr>
+ <th>Values:
+
+ <td><‘<a href="#flex-direction"><code
+ class=property>flex-direction</code></a>’> <‘<a
+ href="#flex-wrap"><code class=property>flex-wrap</code></a>’>?
+
+ <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
+ </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.
+
+ <p> The value consists of one or two keywords: the first sets the
+ orientation and direction of the flexbox's <a href="#main-axis"><i>main
+ axis</i></a>, which 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>’ properties; the second, if
specified, marks the flexbox as being multiline and sets the direction of
the <a href="#cross-axis"><i>cross axis</i></a>, which affects the
@@ -639,6 +726,27 @@
<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
+ 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-line"><i>multi-line</i></a>, and the direction of the <a
+ href="#cross-axis"><i>cross axis</i></a>, which affects the direction new
+ lines are stacked in and the meaning of the ‘<a
+ href="#flex-align0"><code class=property>flex-align</code></a>’ and
+ ‘<a href="#flex-line-pack0"><code
+ class=property>flex-line-pack</code></a>’ properties.
+
+ <dl>
+ <dt><dfn id=flex-flow-no-wrap>no-wrap</dfn>
+
+ <dd>The flexbox is <a href="#single-line"><i>single-line</i></a>. The <a
+ href="#cross-start"><i>cross-start</i></a> 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 <a
+ href="#cross-end"><i>cross-end</i></a> direction is the opposite
+ direction of <a href="#cross-start"><i>cross-start</i></a>.
<dt><dfn id=flex-flow-wrap>wrap</dfn>
@@ -656,12 +764,12 @@
href="#cross-end"><i>cross-end</i></a> directions are swapped.
</dl>
- <p>If the second keyword is omitted, the flexbox is <a
- href="#single-line"><i>single-line</i></a>, and the <a
- href="#cross-start"><i>cross-start</i></a> and <a
- href="#cross-end"><i>cross-end</i></a> directions are set as described
- above for the ‘<a href="#flex-flow-wrap"><code
- class=css>wrap</code></a>’ keyword.
+ <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
+ class=property>flex-direction</code></a>’ and ‘<a
+ href="#flex-wrap"><code class=property>flex-wrap</code></a>’
+ properties together.
<div class=example>
<p>Some examples of valid flows:</p>
@@ -678,7 +786,7 @@
</div>
<p class=issue>Is there a good, shorter way to refer to the reversed
- physical directions than the 8-character "-reverse" suffix?
+ directions than the 8-character "-reverse" suffix?
<h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
‘<a href="#flex-order0"><code
@@ -1689,10 +1797,9 @@
<td>visual
<tr>
- <th><a class=property href="#flex-flow0">flex-flow</a>
+ <th><a class=property href="#flex-direction">flex-direction</a>
- <td>[ row | row-reverse | column | column-reverse ] [ wrap |
- wrap-reverse ]?
+ <td>row | row-reverse | column | column-reverse
<td>row
@@ -1705,6 +1812,21 @@
<td>visual
<tr>
+ <th><a class=property href="#flex-flow0">flex-flow</a>
+
+ <td><‘flex-direction’> <‘flex-wrap’>?
+
+ <td>see individual properties
+
+ <td>flexboxes
+
+ <td>see individual properties
+
+ <td>see individual properties
+
+ <td>visual
+
+ <tr>
<th><a class=property href="#flex-line-pack0">flex-line-pack</a>
<td>start | end | center | justify
@@ -1748,6 +1870,21 @@
<td>specified value
<td>visual
+
+ <tr>
+ <th><a class=property href="#flex-wrap">flex-wrap</a>
+
+ <td>no-wrap | wrap | wrap-reverse
+
+ <td>no-wrap
+
+ <td>flexboxes
+
+ <td>no
+
+ <td>specified value
+
+ <td>visual
</table>
<!--end-properties-->
@@ -1805,6 +1942,9 @@
<li>flexbox item's, <a href="#flexbox-item"
title="flexbox item's"><strong>2.</strong></a>
+ <li>flex-direction, <a href="#flex-direction"
+ title=flex-direction><strong>3.1.</strong></a>
+
<li>flex-flow, <a href="#flex-flow0"
title=flex-flow><strong>3.1.</strong></a>
@@ -1828,6 +1968,9 @@
<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>hypothetical neighbors, <a href="#hypothetical-neighbors"
title="hypothetical neighbors"><strong>2.2.1.</strong></a>
@@ -1855,6 +1998,9 @@
<li>negative flexibility, <a href="#negative-flexibility"
title="negative flexibility"><strong>4.1.</strong></a>
+ <li>no-wrap, <a href="#flex-flow-no-wrap"
+ title=no-wrap><strong>3.1.</strong></a>
+
<li>positive flexibility, <a href="#positive-flexibility"
title="positive flexibility"><strong>4.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.74
retrieving revision 1.75
diff -u -d -r1.74 -r1.75
--- Overview.src.html 7 Dec 2011 17:33:06 -0000 1.74
+++ Overview.src.html 7 Dec 2011 19:49:43 -0000 1.75
@@ -208,15 +208,15 @@
<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-flow' property</h3>
+Flexbox Flow Direction: the 'flex-direction', 'flex-wrap', and 'flex-flow' properties</h3>
<table class=propdef>
<tr>
<th>Name:</th>
- <td><dfn>flex-flow</dfn>
+ <td><dfn>flex-direction</dfn>
<tr>
<th>Values:
- <td>[ row | row-reverse | column | column-reverse ] [ wrap | wrap-reverse ]?
+ <td>row | row-reverse | column | column-reverse
<tr>
<th>Initial:
<td>row
@@ -234,7 +234,57 @@
<td>visual
</table>
- <p>The 'flex-flow' property specifies how <i>flexbox items</i> are placed in the flexbox. The value consists of one or two keywords: the first sets the orientation and direction of the flexbox's <i>main axis</i>, which affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' properties; the second, if specified, marks the flexbox as being multiline and sets the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in, and the meaning of the 'flex-align' and 'flex-line-pack' properties.</p>
+ <table class=propdef>
+ <tr>
+ <th>Name:</th>
+ <td><dfn>flex-wrap</dfn>
+ <tr>
+ <th>Values:
+ <td>no-wrap | wrap | wrap-reverse
+ <tr>
+ <th>Initial:
+ <td>no-wrap
+ <tr>
+ <th>Applies To:
+ <td>flexboxes
+ <tr>
+ <th>Inherited:
+ <td>no
+ <tr>
+ <th>Computed Value:
+ <td>specified value
+ <tr>
+ <th>Media:
+ <td>visual
+ </table>
+
+ <table class=propdef>
+ <tr>
+ <th>Name:</th>
+ <td><dfn>flex-flow</dfn>
+ <tr>
+ <th>Values:
+ <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
+ </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>
+
+ The value consists of one or two keywords: the first sets the orientation and direction of the flexbox's <i>main axis</i>, which affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' properties; the second, if specified, marks the flexbox as being multiline and sets the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in, and the meaning of the 'flex-align' and 'flex-line-pack' properties.</p>
<dl>
<dt><dfn id='flex-flow-row'>row</dfn></dt>
@@ -248,6 +298,13 @@
<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' and 'flex-line-pack' properties.</p>
+
+ <dl>
+ <dt><dfn id='flex-flow-no-wrap'>no-wrap</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>.</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>
@@ -256,7 +313,7 @@
<dd>Same as <i>wrap</i>, except the <i>cross-start</i> and <i>cross-end</i> directions are swapped.</dd>
</dl>
- <p>If the second keyword is omitted, the flexbox is <i>single-line</i>, and the <i>cross-start</i> and <i>cross-end</i> directions are set as described above for the ''wrap'' keyword.</p>
+ <p>The 'flex-flow' property is a shorthand for setting the 'flex-direction' and 'flex-wrap' properties together.</p>
<div class="example">
<p>Some examples of valid flows:</p>
@@ -272,7 +329,7 @@
flex-flow: column wrap-reverse; } /* New lines wrap upwards. */</pre>
</div>
- <p class='issue'>Is there a good, shorter way to refer to the reversed physical directions than the 8-character "-reverse" suffix?</p>
+ <p class='issue'>Is there a good, shorter way to refer to the reversed directions than the 8-character "-reverse" suffix?</p>
<h3 id='flex-order'>
@@ -747,7 +804,7 @@
<ol>
<li>...
</ol>
-
+
<h2 id="pagination">
Received on Wednesday, 7 December 2011 19:49:49 UTC