8000 Simplified flex-flow to only the pure-logical values. · w3c/csswg-drafts@5689af3 · GitHub
Skip to content

Commit 5689af3

Browse files
tabatkinstabatkins
committed
Simplified flex-flow to only the pure-logical values.
1 parent 9ab728e commit 5689af3

2 files changed

Lines changed: 75 additions & 340 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 55 additions & 241 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616

1717
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
1818

19-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 8 September 2011</h2>
19+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 September 2011</h2>
2020

2121
<dl>
2222
<dt>This version:
2323

24-
<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> -->
24+
<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> -->
2525
<a
2626
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
2727

@@ -546,15 +546,8 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
546546
<tr>
547547
<th>Values:
548548

549-
<td>
550-
<pre> [ row | row-reverse | column | column-reverse ]
551-
[ wrap | wrap-reverse ]?
552-
|
553-
[ horizontal | horizontal-reverse | horizontal-ltr | horizontal-rtl ]
554-
[ wrap | wrap-reverse | wrap-down | wrap-up ]?
555-
|
556-
[ vertical | vertical-reverse | vertical-ttb | vertical-btt ]
557-
[ wrap | wrap-reverse | wrap-left | wrap-right ]?</pre>
549+
<td>[ row | row-reverse | column | column-reverse ] [ wrap |
550+
wrap-reverse ]?
558551

559552
<tr>
560553
<th>Initial:
@@ -586,159 +579,55 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
586579
specifies how <a href="#flexbox-item"><i>flexbox items</i></a> are placed
587580
in the flexbox. The value consists of one or two keywords: the first sets
588581
the orientation and direction of the flexbox's <a
589-
href="#main-axis"><i>main axis</i></a>, while the second, if specified,
590-
marks the flexbox as being multiline and sets the direction in which new
591-
lines are stacked.
592-
593-
<p>The main directions affect how <a href="#flexbox-item"><i>flexbox
594-
items</i></a> are arranged, and how they respond to the &lsquo;<a
582+
href="#main-axis"><i>main axis</i></a>, which affects the direction that
583+
flexbox items are laid out in, and the meaning of the &lsquo;<a
595584
href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;
596-
property. They can be set with either logical directions (relative to the
597-
writing mode) or physical directions:
585+
properties; the second, if specified, marks the flexbox as being multiline
586+
and sets the direction of the <a href="#cross-axis"><i>cross axis</i></a>,
587+
which affects the direction new lines are stacked in, and the meaning of
588+
the &lsquo;<a href="#flex-align0"><code
589+
class=property>flex-align</code></a>&rsquo; and &lsquo;<a
590+
href="#flex-line-pack0"><code
591+
class=property>flex-line-pack</code></a>&rsquo; properties.
598592

599593
<dl>
600-
<dt>Logical Directions
601-
602-
<dd>
603-
<dl>
604-
<dt><dfn id=flex-flow-row>row</dfn>
605-
606-
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
607-
orientation as the inline axis of the current writing mode (the
608-
direction that text is laid out in). The <a
609-
href="#main-start"><i>main-start</i></a> and <a
610-
href="#main-end"><i>main-end</i></a> directions are equivalent to the
611-
"start" and "end" directions, respectively, of the current writing
612-
mode.
613-
614-
<dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
615-
616-
<dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
617-
href="#main-start"><i>main-start</i></a> and <a
618-
href="#main-end"><i>main-end</i></a> directions are swapped.
619-
620-
<dt><dfn id=flex-flow-column>column</dfn>
621-
622-
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
623-
orientation as the block axis of the current writing mode (the
624-
direction that blocks are laid out in). The <a
625-
href="#main-start"><i>main-start</i></a> and <a
626-
href="#main-end"><i>main-end</i></a> directions are equivalent to the
627-
"before" and "after" directions, respectively, of the current writing
628-
mode.
629-
630-
<dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
631-
632-
<dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
633-
href="#main-start"><i>main-start</i></a> and <a
634-
href="#main-end"><i>main-end</i></a> directions are swapped.
635-
</dl>
636-
637-
<dt>Physical Directions
638-
639-
<dd>
640-
<dl>
641-
<dt><dfn id=flex-flow-horizontal>horizontal</dfn>
594+
<dt><dfn id=flex-flow-row>row</dfn>
642595

643-
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> is
644-
horizontal. The <a href="#main-start"><i>main-start</i></a> direction
645-
is equivalent to either the "start" or "before" direction of the
646-
current writing mode, whichever is vertical, and the <a
647-
href="#main-end"><i>main-end</i></a> direction is the opposite
648-
direction of <a href="#main-start"><i>main-start</i></a>.
596+
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
597+
orientation as the inline axis of the current writing mode (the direction
598+
that text is laid out in). The <a
599+
href="#main-start"><i>main-start</i></a> and <a
600+
href="#main-end"><i>main-end</i></a> directions are equivalent to the
601+
"start" and "end" directions, respectively, of the current writing mode.
649602

650-
<dt><dfn id=flex-flow-horizontal-reverse>horizontal-reverse</dfn>
603+
<dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
651604

652-
<dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
653-
except the <a href="#main-start"><i>main-start</i></a> and <a
654-
href="#main-end"><i>main-end</i></a> directions are swapped.
605+
<dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
606+
href="#main-start"><i>main-start</i></a> and <a
607+
href="#main-end"><i>main-end</i></a> directions are swapped.
655608

656-
<dt><dfn id=flex-flow-horizontal-ltr>horizontal-ltr</dfn>
609+
<dt><dfn id=flex-flow-column>column</dfn>
657610

658-
<dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
659-
except the <a href="#main-start"><i>main-start</i></a> direction is to
660-
the left and the <a href="#main-end"><i>main-end</i></a> direction is
661-
to the right.
611+
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
612+
orientation as the block axis of the current writing mode (the direction
613+
that blocks are laid out in). The <a
614+
href="#main-start"><i>main-start</i></a> and <a
615+
href="#main-end"><i>main-end</i></a> directions are equivalent to the
616+
"before" and "after" directions, respectively, of the current writing
617+
mode.
662618

663-
<dt><dfn id=flex-flow-horizontal-rtl>horizontal-rtl</dfn>
619+
<dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
664620

665-
<dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
666-
except the <a href="#main-start"><i>main-start</i></a> direction is to
667-
the right and the <a href="#main-end"><i>main-end</i></a> direction is
668-
to the left.
621+
<dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
622+
href="#main-start"><i>main-start</i></a> and <a
623+
href="#main-end"><i>main-end</i></a> directions are swapped.
669624

670-
<dt><dfn id=flex-flow-vertical>vertical</dfn>
671-
672-
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> is vertical.
673-
The <a href="#main-start"><i>main-start</i></a> direction is equivalent
674-
to either the "start" or "before" direction of the current writing
675-
mode, whichever is horizontal, and the <a
676-
href="#main-end"><i>main-end</i></a> direction is the opposite
677-
direction of <a href="#main-start"><i>main-start</i></a>.
678-
679-
<dt><dfn id=flex-flow-vertical-reverse>vertical-reverse</dfn>
680-
681-
<dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
682-
the <a href="#main-start"><i>main-start</i></a> and <a
683-
href="#main-end"><i>main-end</i></a> directions are swapped.
684-
685-
<dt><dfn id=flex-flow-vertical-ttb>vertical-ttb</dfn>
686-
687-
<dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
688-
the <a href="#main-start"><i>main-start</i></a> direction is upwards
689-
and the <a href="#main-end"><i>main-end</i></a> direction is downwards.
690-
691-
<dt><dfn id=flex-flow-row-vertical-btt>vertical-btt</dfn>
692-
693-
<dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
694-
the <a href="#main-start"><i>main-start</i></a> direction is downwards
695-
and the <a href="#main-end"><i>main-end</i></a> direction is upwards.
696-
</dl>
697-
</dl>
698-
699-
<p class=note>Usually, the logical keywords are sufficient, which is why
700-
their names are purposely short. For example, if the page's writing mode
701-
is lr-tb, like it is when the primary language is English, the &lsquo;<a
702-
href="#flex-flow-row"><code class=css>row</code></a>&rsquo; value makes
< 10986 code>703-
the flexbox horizontal and going from left to right, while the &lsquo;<a
704-
href="#flex-flow-column"><code class=css>column</code></a>&rsquo; value
705-
makes the flexbox vertical and going from top to bottom. If this were
706-
specified as part of a page template, and the page as a whole was switched
707-
to a tb-rl writing-mode like what Japanese uses, the flexboxes would
708-
automatically shift to vertical and horizontal, respectively, which is
709-
often what is desired.
710-
711-
<p>The <a href="#cross-axis"><i>cross axis</i></a> is always perpendicular
712-
to the <a href="#main-axis"><i>main axis</i></a>. The second keyword, or
713-
the lack of it, sets the cross directions (<a
714-
href="#cross-start"><i>cross-start</i></a> and <a
715-
href="#cross-end"><i>cross-end</i></a>), and dictates whether the flexbox
716-
is single-line or multi-line. The cross directions affect how individual
717-
<a href="#flexbox-item"><i>flexbox items</i></a> respond to the &lsquo;<a
718-
href="#flex-align0"><code class=property>flex-align</code></a>&rsquo;
719-
property, and the direction in which multiple lines are stacked and
720-
aligned by the &lsquo;<a href="#flex-line-pack0"><code
721-
class=property>flex-line-pack</code></a>&rsquo; property.
722-
723-
<p>If the second keyword is omitted, the flexbox is <a
724-
href="#single-line"><i>single-line</i></a>, the <a
725-
href="#cross-start"><i>cross-start</i></a> direction is equivalent to
726-
either the "start" or "before" direction of the current writing mode,
727-
whichever is in the <i>cross-axis</i>, and the <a
728-
href="#cross-end"><i>cross-end</i></a> direction is the opposite direction
729-
of <a href="#cross-start"><i>cross-start</i></a>.
730-
731-
<p>If the second keyword is provided, the flexbox is <a
732-
href="#multi-line"><i>multi-line</i></a>. The <a
733-
href="#cross-start"><i>cross-start</i></a> and <a
734-
href="#cross-end"><i>cross-end</i></a> directions are set as follows:
735-
736-
<dl>
737625
<dt><dfn id=flex-flow-wrap>wrap</dfn>
738626

739-
<dd>The <a href="#cross-start"><i>cross-start</i></a> direction is
740-
equivalent to either the "start" or "before" direction of the current
741-
writing mode, whichever is in the <i>cross-axis</i>, and the <a
627+
<dd>The flexbox is <a href="#multi-line"><i>multi-line</i></a>. The <a
628+
href="#cross-start"><i>cross-start</i></a> direction is equivalent to
629+
either the "start" or "before" direction of the current writing mode,
630+
whichever is in the <i>cross-axis</i>, and the <a
742631
href="#cross-end"><i>cross-end</i></a> direction is the opposite
743632
direction of <a href="#cross-start"><i>cross-start</i></a>.
744633

@@ -747,63 +636,27 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
747636
<dd>Same as <a href="#flex-flow-wrap"><i>wrap</i></a>, except the <a
748637
href="#cross-start"><i>cross-start</i></a> and <a
749638
href="#cross-end"><i>cross-end</i></a> directions are swapped.
750-
751-
<dt><dfn id=flex-flow-wrap-up>wrap-up</dfn>
752-
753-
<dd>The <a href="#cross-start"><i>cross-start</i></a> direction is
754-
downwards and the <a href="#cross-end"><i>cross-end</i></a> direction is
755-
upwards.
756-
757-
<dt><dfn id=flex-flow-wrap-right>wrap-right</dfn>
758-
759-
<dd>The <a href="#cross-start"><i>cross-start</i></a> direction is to the
760-
left and the <a href="#cross-end"><i>cross-end</i></a> direction is to
761-
the right.
762-
763-
<dt><dfn id=flex-flow-wrap-down>wrap-down</dfn>
764-
765-
<dd>The <a href="#cross-start"><i>cross-start</i></a> direction is upwards
766-
and the <a href="#cross-end"><i>cross-end</i></a> direction is downwards.
767-
768-
<dt><dfn id=flex-flow-wrap-left>wrap-left</dfn>
769-
770-
<dd>The <a href="#cross-start"><i>cross-start</i></a> direction is to the
771-
right and the <a href="#cross-end"><i>cross-end</i></a> direction is to
772-
the left.
773639
</dl>
774640

775-
<p class=note>Note that not all combinations of first and second keyword
776-
are allowed by the property's syntax, as they don't all make sense. For
777-
example, &lsquo;<code class=css>flex-flow: horizontal
778-
wrap-right</code>&rsquo; is an invalid declaration.
641+
<p>If the second keyword is omitted, the flexbox is <a
642+
href="#single-line"><i>single-line</i></a>, and the <a
643+
href="#cross-start"><i>cross-start</i></a> and <a
644+
href="#cross-end"><i>cross-end</i></a> directions are set as described
645+
above for the &lsquo;<a href="#flex-flow-wrap"><code
646+
class=css>wrap</code></a>&rsquo; keyword.
779647

780648
<div class=example>
781649
<p>Some examples of valid flows:</p>
782650

783651
<pre>
784-
div { flex-flow:row } /* initial value. Main axis is inline,
785-
no wrap. */
786-
div { flex-flow:horizontal-ltr wrap-down } /* main axis is horizontal, flow left-to-right,
787-
wrap down */
788-
div { writing-mode:tb-rl; /* main axis is vertical top-to-bottom (as line direction),
789-
flex-flow:vertical wrap-reverse } /* cross axis is left-to-right (opposite to block direction) */</pre>
790-
</div>
791-
792-
<div class=issue>
793-
<p>Are all these values necessary? I suspect we could get away with just:</p>
794-
795-
<pre>
796-
[ row | row-reverse | column | column-reverse ]
797-
[ wrap | wrap-reverse ]?
798-
|
799-
to [ top | bottom ]
800-
[ wrap-right | wrap-left ]?
801-
|
802-
to [ right | left ]
803-
[ wrap-up | wrap-down ]?</pre>
804-
805-
<p>In other words, just provide a pure-logical or pure-physical variant,
806-
rather than mixing physical and logical like with "horizontal wrap".</p>
652+
div { flex-flow: row; } /* Initial value. Main axis is inline,
653+
no wrap. */
654+
div { flex-flow: column wrap; } /* Main axis is block-direction and lines
655+
wrap in the inline direction. For an
656+
English page, the main axis is top-to-bottom
657+
and lines wrap to the right. */
658+
div { writing-mode: tb-rl; /* Main axis is block direction (right to left).
659+
flex-flow: column wrap-reverse; } /* New lines wrap upwards. */</pre>
807660
</div>
808661

809662
<p class=issue>Is there a good, shorter way to refer to the reversed
@@ -1662,10 +1515,7 @@ <h2 class=no-num id=property>Property index</h2>
16621515
<th><a class=property href="#flex-flow0">flex-flow</a>
16631516

16641517
<td>[ row | row-reverse | column | column-reverse ] [ wrap |
1665-
wrap-reverse ]? | [ horizontal | horizontal-reverse | horizontal-ltr |
1666-
horizontal-rtl ] [ wrap | wrap-reverse | wrap-down | wrap-up ]? | [
1667-
vertical | vertical-reverse | vertical-ttb | vertical-btt ] [ wrap |
1668-
wrap-reverse | wrap-left | wrap-right ]?
1518+
wrap-reverse ]?
16691519

16701520
<td>row
16711521

@@ -1801,18 +1651,6 @@ <h2 class=no-num id=index>Index</h2>
18011651
<li>flex-pack, <a href="#flex-pack0"
18021652
title=flex-pack><strong>5.1.</strong></a>
18031653

1804-
<li>horizontal, <a href="#flex-flow-horizontal"
1805-
title=horizontal><strong>3.1.</strong></a>
1806-
1807-
<li>horizontal-ltr, <a href="#flex-flow-horizontal-ltr"
1808-
title=horizontal-ltr><strong>3.1.</strong></a>
1809-
1810-
<li>horizontal-reverse, <a href="#flex-flow-horizontal-reverse"
1811-
title=horizontal-reverse><strong>3.1.</strong></a>
1812-
1813-
<li>horizontal-rtl, <a href="#flex-flow-horizontal-rtl"
1814-
title=horizontal-rtl><strong>3.1.</strong></a>
1815-
18161654
<li>hypothetical neighbors, <a href="#hypothetical-neighbors"
18171655
title="hypothetical neighbors"><strong>2.2.</strong></a>
18181656

@@ -1858,34 +1696,10 @@ <h2 class=no-num id=index>Index</h2>
18581696
<li>stretch, <a href="#flex-align-stretch"
18591697
title=stretch><strong>5.2.</strong></a>
18601698

1861-
<li>vertical, <a href="#flex-flow-vertical"
1862-
title=vertical><strong>3.1.</strong></a>
1863-
1864-
<li>vertical-btt, <a href="#flex-flow-row-vertical-btt"
1865-
title=vertical-btt><strong>3.1.</strong></a>
1866-
1867-
<li>vertical-reverse, <a href="#flex-flow-vertical-reverse"
1868-
title=vertical-reverse><strong>3.1.</strong></a>
1869-
1870-
<li>vertical-ttb, <a href="#flex-flow-vertical-ttb"
1871-
title=vertical-ttb><strong>3.1.</strong></a>
1872-
18731699
<li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>
18741700

1875-
<li>wrap-down, <a href="#flex-flow-wrap-down"
1876-
title=wrap-down><strong>3.1.</strong></a>
1877-
1878-
<li>wrap-left, <a href="#flex-flow-wrap-left"
1879-
title=wrap-left><strong>3.1.</strong></a>
1880-
18811701
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
18821702
title=wrap-reverse><strong>3.1.</strong></a>
1883-
1884-
<li>wrap-right, <a href="#flex-flow-wrap-right"
1885-
title=wrap-right><strong>3.1.</strong></a>
1886-
1887-
<li>wrap-up, <a href="#flex-flow-wrap-up"
1888-
title=wrap-up><strong>3.1.</strong></a>
18891703
</ul>
18901704
<!--end-index-->
18911705
</html>

0 commit comments

Comments
 (0)