- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 16 Sep 2011 22:27:01 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv18413
Modified Files:
Overview.html Overview.src.html
Log Message:
Simplified flex-flow to only the pure-logical values.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.63
retrieving revision 1.64
diff -u -d -r1.63 -r1.64
--- Overview.html 8 Sep 2011 23:23:07 -0000 1.63
+++ Overview.html 16 Sep 2011 22:26:59 -0000 1.64
@@ -16,12 +16,12 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 8 September 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 September 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110908/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110908/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110916/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110916/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -546,15 +546,8 @@
<tr>
<th>Values:
- <td>
- <pre> [ row | row-reverse | column | column-reverse ]
- [ wrap | wrap-reverse ]?
-|
- [ horizontal | horizontal-reverse | horizontal-ltr | horizontal-rtl ]
- [ wrap | wrap-reverse | wrap-down | wrap-up ]?
-|
- [ vertical | vertical-reverse | vertical-ttb | vertical-btt ]
- [ wrap | wrap-reverse | wrap-left | wrap-right ]?</pre>
+ <td>[ row | row-reverse | column | column-reverse ] [ wrap |
+ wrap-reverse ]?
<tr>
<th>Initial:
@@ -586,159 +579,55 @@
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>, while the second, if specified,
- marks the flexbox as being multiline and sets the direction in which new
- lines are stacked.
-
- <p>The main directions affect how <a href="#flexbox-item"><i>flexbox
- items</i></a> are arranged, and how they respond to the ‘<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>’
- property. They can be set with either logical directions (relative to the
- writing mode) or physical directions:
+ 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 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>Logical Directions
-
- <dd>
- <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>
-
- <dt>Physical Directions
-
- <dd>
- <dl>
- <dt><dfn id=flex-flow-horizontal>horizontal</dfn>
-
- <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> is
- horizontal. The <a href="#main-start"><i>main-start</i></a> direction
- is equivalent to either the "start" or "before" direction of the
- current writing mode, whichever is vertical, and the <a
- href="#main-end"><i>main-end</i></a> direction is the opposite
- direction of <a href="#main-start"><i>main-start</i></a>.
-
- <dt><dfn id=flex-flow-horizontal-reverse>horizontal-reverse</dfn>
-
- <dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</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-horizontal-ltr>horizontal-ltr</dfn>
-
- <dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
- except the <a href="#main-start"><i>main-start</i></a> direction is to
- the left and the <a href="#main-end"><i>main-end</i></a> direction is
- to the right.
-
- <dt><dfn id=flex-flow-horizontal-rtl>horizontal-rtl</dfn>
-
- <dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
- except the <a href="#main-start"><i>main-start</i></a> direction is to
- the right and the <a href="#main-end"><i>main-end</i></a> direction is
- to the left.
-
- <dt><dfn id=flex-flow-vertical>vertical</dfn>
-
- <dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> is vertical.
- The <a href="#main-start"><i>main-start</i></a> direction is equivalent
- to either the "start" or "before" direction of the current writing
- mode, whichever is horizontal, and the <a
- href="#main-end"><i>main-end</i></a> direction is the opposite
- direction of <a href="#main-start"><i>main-start</i></a>.
-
- <dt><dfn id=flex-flow-vertical-reverse>vertical-reverse</dfn>
-
- <dd>Same as <a href="#flex-flow-vertical"><i>vertical</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-vertical-ttb>vertical-ttb</dfn>
+ <dt><dfn id=flex-flow-row>row</dfn>
- <dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
- the <a href="#main-start"><i>main-start</i></a> direction is upwards
- and the <a href="#main-end"><i>main-end</i></a> direction is downwards.
+ <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-vertical-btt>vertical-btt</dfn>
+ <dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
- <dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
- the <a href="#main-start"><i>main-start</i></a> direction is downwards
- and the <a href="#main-end"><i>main-end</i></a> direction is upwards.
- </dl>
- </dl>
+ <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.
- <p class=note>Usually, the logical keywords are sufficient, which is why
- their names are purposely short. For example, if the page's writing mode
- is lr-tb, like it is when the primary language is English, the ‘<a
- href="#flex-flow-row"><code class=css>row</code></a>’ value makes
- the flexbox horizontal and going from left to right, while the ‘<a
- href="#flex-flow-column"><code class=css>column</code></a>’ value
- makes the flexbox vertical and going from top to bottom. If this were
- specified as part of a page template, and the page as a whole was switched
- to a tb-rl writing-mode like what Japanese uses, the flexboxes would
- automatically shift to vertical and horizontal, respectively, which is
- often what is desired.
+ <dt><dfn id=flex-flow-column>column</dfn>
- <p>The <a href="#cross-axis"><i>cross axis</i></a> is always perpendicular
- to the <a href="#main-axis"><i>main axis</i></a>. The second keyword, or
- the lack of it, sets the cross directions (<a
- href="#cross-start"><i>cross-start</i></a> and <a
- href="#cross-end"><i>cross-end</i></a>), and dictates whether the flexbox
- is single-line or multi-line. The cross directions affect how individual
- <a href="#flexbox-item"><i>flexbox items</i></a> respond to the ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’
- property, and the direction in which multiple lines are stacked and
- aligned by the ‘<a href="#flex-line-pack0"><code
- class=property>flex-line-pack</code></a>’ property.
+ <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.
- <p>If the second keyword is omitted, 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-column-reverse>column-reverse</dfn>
- <p>If the second keyword is provided, the flexbox is <a
- href="#multi-line"><i>multi-line</i></a>. The <a
- href="#cross-start"><i>cross-start</i></a> and <a
- href="#cross-end"><i>cross-end</i></a> directions are set as follows:
+ <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>
<dt><dfn id=flex-flow-wrap>wrap</dfn>
- <dd>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
+ <dd>The flexbox is <a href="#multi-line"><i>multi-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>.
@@ -747,63 +636,27 @@
<dd>Same as <a href="#flex-flow-wrap"><i>wrap</i></a>, except the <a
href="#cross-start"><i>cross-start</i></a> and <a
href="#cross-end"><i>cross-end</i></a> directions are swapped.
-
- <dt><dfn id=flex-flow-wrap-up>wrap-up</dfn>
-
- <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is
- downwards and the <a href="#cross-end"><i>cross-end</i></a> direction is
- upwards.
-
- <dt><dfn id=flex-flow-wrap-right>wrap-right</dfn>
-
- <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is to the
- left and the <a href="#cross-end"><i>cross-end</i></a> direction is to
- the right.
-
- <dt><dfn id=flex-flow-wrap-down>wrap-down</dfn>
-
- <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is upwards
- and the <a href="#cross-end"><i>cross-end</i></a> direction is downwards.
-
- <dt><dfn id=flex-flow-wrap-left>wrap-left</dfn>
-
- <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is to the
- right and the <a href="#cross-end"><i>cross-end</i></a> direction is to
- the left.
</dl>
- <p class=note>Note that not all combinations of first and second keyword
- are allowed by the property's syntax, as they don't all make sense. For
- example, ‘<code class=css>flex-flow: horizontal
- wrap-right</code>’ is an invalid declaration.
+ <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.
<div class=example>
<p>Some examples of valid flows:</p>
<pre>
-div { flex-flow:row } /* initial value. Main axis is inline,
- no wrap. */
-div { flex-flow:horizontal-ltr wrap-down } /* main axis is horizontal, flow left-to-right,
- wrap down */
-div { writing-mode:tb-rl; /* main axis is vertical top-to-bottom (as line direction),
- flex-flow:vertical wrap-reverse } /* cross axis is left-to-right (opposite to block direction) */</pre>
- </div>
-
- <div class=issue>
- <p>Are all these values necessary? I suspect we could get away with just:</p>
-
- <pre>
- [ row | row-reverse | column | column-reverse ]
- [ wrap | wrap-reverse ]?
-|
- to [ top | bottom ]
- [ wrap-right | wrap-left ]?
-|
- to [ right | left ]
- [ wrap-up | wrap-down ]?</pre>
-
- <p>In other words, just provide a pure-logical or pure-physical variant,
- rather than mixing physical and logical like with "horizontal wrap".</p>
+div { flex-flow: row; } /* Initial value. Main axis is inline,
+ no wrap. */
+div { flex-flow: column wrap; } /* Main axis is block-direction and lines
+ wrap in the inline direction. For an
+ English page, the main axis is top-to-bottom
+ and lines wrap to the right. */
+div { writing-mode: tb-rl; /* Main axis is block direction (right to left).
+ 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
@@ -1662,10 +1515,7 @@
<th><a class=property href="#flex-flow0">flex-flow</a>
<td>[ row | row-reverse | column | column-reverse ] [ wrap |
- wrap-reverse ]? | [ horizontal | horizontal-reverse | horizontal-ltr |
- horizontal-rtl ] [ wrap | wrap-reverse | wrap-down | wrap-up ]? | [
- vertical | vertical-reverse | vertical-ttb | vertical-btt ] [ wrap |
- wrap-reverse | wrap-left | wrap-right ]?
+ wrap-reverse ]?
<td>row
@@ -1801,18 +1651,6 @@
<li>flex-pack, <a href="#flex-pack0"
title=flex-pack><strong>5.1.</strong></a>
- <li>horizontal, <a href="#flex-flow-horizontal"
- title=horizontal><strong>3.1.</strong></a>
-
- <li>horizontal-ltr, <a href="#flex-flow-horizontal-ltr"
- title=horizontal-ltr><strong>3.1.</strong></a>
-
- <li>horizontal-reverse, <a href="#flex-flow-horizontal-reverse"
- title=horizontal-reverse><strong>3.1.</strong></a>
-
- <li>horizontal-rtl, <a href="#flex-flow-horizontal-rtl"
- title=horizontal-rtl><strong>3.1.</strong></a>
-
<li>hypothetical neighbors, <a href="#hypothetical-neighbors"
title="hypothetical neighbors"><strong>2.2.</strong></a>
@@ -1858,34 +1696,10 @@
<li>stretch, <a href="#flex-align-stretch"
title=stretch><strong>5.2.</strong></a>
- <li>vertical, <a href="#flex-flow-vertical"
- title=vertical><strong>3.1.</strong></a>
-
- <li>vertical-btt, <a href="#flex-flow-row-vertical-btt"
- title=vertical-btt><strong>3.1.</strong></a>
-
- <li>vertical-reverse, <a href="#flex-flow-vertical-reverse"
- title=vertical-reverse><strong>3.1.</strong></a>
-
- <li>vertical-ttb, <a href="#flex-flow-vertical-ttb"
- title=vertical-ttb><strong>3.1.</strong></a>
-
<li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>
- <li>wrap-down, <a href="#flex-flow-wrap-down"
- title=wrap-down><strong>3.1.</strong></a>
-
- <li>wrap-left, <a href="#flex-flow-wrap-left"
- title=wrap-left><strong>3.1.</strong></a>
-
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
title=wrap-reverse><strong>3.1.</strong></a>
-
- <li>wrap-right, <a href="#flex-flow-wrap-right"
- title=wrap-right><strong>3.1.</strong></a>
-
- <li>wrap-up, <a href="#flex-flow-wrap-up"
- title=wrap-up><strong>3.1.</strong></a>
</ul>
<!--end-index-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.62
retrieving revision 1.63
diff -u -d -r1.62 -r1.63
--- Overview.src.html 8 Sep 2011 23:23:07 -0000 1.62
+++ Overview.src.html 16 Sep 2011 22:26:59 -0000 1.63
@@ -208,14 +208,7 @@
<td><dfn>flex-flow</dfn></td>
<tr>
<th>Values:
- <td><pre> [ row | row-reverse | column | column-reverse ]
- [ wrap | wrap-reverse ]?
-|
- [ horizontal | horizontal-reverse | horizontal-ltr | horizontal-rtl ]
- [ wrap | wrap-reverse | wrap-down | wrap-up ]?
-|
- [ vertical | vertical-reverse | vertical-ttb | vertical-btt ]
- [ wrap | wrap-reverse | wrap-left | wrap-right ]?</pre></td>
+ <td>[ row | row-reverse | column | column-reverse ] [ wrap | wrap-reverse ]?</td>
<tr>
<th>Initial:
<td>row</td>
@@ -239,114 +232,42 @@
</tbody>
</table>
- <p>The 'flexbox-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>, while the second, if specified, marks the flexbox as being multiline and sets the direction in which new lines are stacked.</p>
-
- <p>The main directions affect how <i>flexbox items</i> are arranged, and how they respond to the 'flex-pack' property. They can be set with either logical directions (relative to the writing mode) or physical directions:</p>
+ <p>The 'flexbox-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>
<dl>
- <dt>Logical Directions</dt>
- <dd>
- <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>
- </dd>
-
- <dt>Physical Directions</dt>
- <dd>
- <dl>
- <dt><dfn id='flex-flow-horizontal'>horizontal</dfn></dt>
- <dd>The flexbox's <i>main axis</i> is horizontal. The <i>main-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is vertical, and the <i>main-end</i> direction is the opposite direction of <i>main-start</i>.</dd>
-
- <dt><dfn id='flex-flow-horizontal-reverse'>horizontal-reverse</dfn></dt>
- <dd>Same as <i>horizontal</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
-
- <dt><dfn id='flex-flow-horizontal-ltr'>horizontal-ltr</dfn></dt>
- <dd>Same as <i>horizontal</i>, except the <i>main-start</i> direction is to the left and the <i>main-end</i> direction is to the right.</dd>
-
- <dt><dfn id='flex-flow-horizontal-rtl'>horizontal-rtl</dfn></dt>
- <dd>Same as <i>horizontal</i>, except the <i>main-start</i> direction is to the right and the <i>main-end</i> direction is to the left.</dd>
-
- <dt><dfn id='flex-flow-vertical'>vertical</dfn></dt>
- <dd>The flexbox's <i>main axis</i> is vertical. The <i>main-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is horizontal, and the <i>main-end</i> direction is the opposite direction of <i>main-start</i>.</dd>
-
- <dt><dfn id='flex-flow-vertical-reverse'>vertical-reverse</dfn></dt>
- <dd>Same as <i>vertical</i>, except the <i>main-start</i> and <i>main-end</i> directions are swapped.</dd>
-
- <dt><dfn id='flex-flow-vertical-ttb'>vertical-ttb</dfn></dt>
- <dd>Same as <i>vertical</i>, except the <i>main-start</i> direction is upwards and the <i>main-end</i> direction is downwards.</dd>
-
- <dt><dfn id='flex-flow-row-vertical-btt'>vertical-btt</dfn></dt>
- <dd>Same as <i>vertical</i>, except the <i>main-start</i> direction is downwards and the <i>main-end</i> direction is upwards.</dd>
- </dl>
- </dd>
- </dl>
-
- <p class='note'>Usually, the logical keywords are sufficient, which is why their names are purposely short. For example, if the page's writing mode is lr-tb, like it is when the primary language is English, the ''row'' value makes the flexbox horizontal and going from left to right, while the ''column'' value makes the flexbox vertical and going from top to bottom. If this were specified as part of a page template, and the page as a whole was switched to a tb-rl writing-mode like what Japanese uses, the flexboxes would automatically shift to vertical and horizontal, respectively, which is often what is desired.</p>
+ <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>
- <p>The <i>cross axis</i> is always perpendicular to the <i>main axis</i>. The second keyword, or the lack of it, sets the cross directions (<i>cross-start</i> and <i>cross-end</i>), and dictates whether the flexbox is single-line or multi-line. The cross directions affect how individual <i>flexbox items</i> respond to the 'flex-align' property, and the direction in which multiple lines are stacked and aligned by the 'flex-line-pack' property.</p>
+ <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>
- <p>If the second keyword is omitted, 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>
+ <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>
- <p>If the second keyword is provided, the flexbox is <i>multi-line</i>. The <i>cross-start</i> and <i>cross-end</i> directions are set as follows:</p>
+ <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>
<dt><dfn id='flex-flow-wrap'>wrap</dfn></dt>
- <dd>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>
+ <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>
-
- <dt><dfn id='flex-flow-wrap-up'>wrap-up</dfn></dt>
- <dd>The <i>cross-start</i> direction is downwards and the <i>cross-end</i> direction is upwards.</dd>
-
- <dt><dfn id='flex-flow-wrap-right'>wrap-right</dfn></dt>
- <dd>The <i>cross-start</i> direction is to the left and the <i>cross-end</i> direction is to the right.</dd>
-
- <dt><dfn id='flex-flow-wrap-down'>wrap-down</dfn></dt>
- <dd>The <i>cross-start</i> direction is upwards and the <i>cross-end</i> direction is downwards.</dd>
-
- <dt><dfn id='flex-flow-wrap-left'>wrap-left</dfn></dt>
- <dd>The <i>cross-start</i> direction is to the right and the <i>cross-end</i> direction is to the left.</dd>
</dl>
- <p class='note'>Note that not all combinations of first and second keyword are allowed by the property's syntax, as they don't all make sense. For example, ''flex-flow: horizontal wrap-right'' is an invalid declaration.</p>
+ <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>
<div class="example">
<p>Some examples of valid flows:</p>
<pre>
-div { flex-flow:row } /* initial value. Main axis is inline,
- no wrap. */
-div { flex-flow:horizontal-ltr wrap-down } /* main axis is horizontal, flow left-to-right,
- wrap down */
-div { writing-mode:tb-rl; /* main axis is vertical top-to-bottom (as line direction),
- flex-flow:vertical wrap-reverse } /* cross axis is left-to-right (opposite to block direction) */</pre>
- </div>
-
- <div class='issue'>
- <p>Are all these values necessary? I suspect we could get away with just:</p>
-
- <pre>
- [ row | row-reverse | column | column-reverse ]
- [ wrap | wrap-reverse ]?
-|
- to [ top | bottom ]
- [ wrap-right | wrap-left ]?
-|
- to [ right | left ]
- [ wrap-up | wrap-down ]?</pre>
-
- <p>In other words, just provide a pure-logical or pure-physical variant, rather than mixing physical and logical like with "horizontal wrap".</p>
+div { flex-flow: row; } /* Initial value. Main axis is inline,
+ no wrap. */
+div { flex-flow: column wrap; } /* Main axis is block-direction and lines
+ wrap in the inline direction. For an
+ English page, the main axis is top-to-bottom
+ and lines wrap to the right. */
+div { writing-mode: tb-rl; /* Main axis is block direction (right to left).
+ 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>
Received on Friday, 16 September 2011 22:27:04 UTC