Skip to content

Commit 423f209

Browse files
tabatkinstabatkins
committed
Rearrange the flex-flow section to split the properties into separate subsections.
1 parent 85c604b commit 423f209

2 files changed

Lines changed: 157 additions & 140 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 118 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -196,13 +196,19 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
196196
<li><a href="#ordering-orientation"><span class=secno>3. </span> Ordering
197197
and Orientation</a>
198198
<ul class=toc>
199-
<li><a href="#flex-flow"><span class=secno>3.1. </span> Flexbox Flow
200-
Direction: the &lsquo;<code
201-
class=property>flex-direction</code>&rsquo;, &lsquo;<code
202-
class=property>flex-wrap</code>&rsquo;, and &lsquo;<code
203-
class=property>flex-flow</code>&rsquo; properties</a>
199+
<li><a href="#flex-direction"><span class=secno>3.1. </span> Flexbox
200+
Flow Direction: the &lsquo;<code
201+
class=property>flex-direction</code>&rsquo; property</a>
204202

205-
<li><a href="#flex-order"><span class=secno>3.2. </span> Display Order:
203+
<li><a href="#flex-wrap"><span class=secno>3.2. </span> Flexbox
204+
Wrapping: the &lsquo;<code class=property>flex-wrap</code>&rsquo;
205+
property</a>
206+
207+
<li><a href="#flex-flow"><span class=secno>3.3. </span> Flex Direction
208+
and Wrap: the &lsquo;<code class=property>flex-flow</code>&rsquo;
209+
shorthand</a>
210+
211+
<li><a href="#flex-order"><span class=secno>3.4. </span> Display Order:
206212
the &lsquo;<code class=property>flex-order</code>&rsquo; property</a>
207213
</ul>
208214

@@ -637,19 +643,16 @@ <h2 id=ordering-orientation><span class=secno>3. </span> Ordering and
637643
href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
638644
properties.
639645

640-
<h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
641-
&lsquo;<a href="#flex-direction"><code
642-
class=property>flex-direction</code></a>&rsquo;, &lsquo;<a
643-
href="#flex-wrap"><code class=property>flex-wrap</code></a>&rsquo;, and
644-
&lsquo;<a href="#flex-flow0"><code
645-
class=property>flex-flow</code></a>&rsquo; properties</h3>
646+
<h3 id=flex-direction><span class=secno>3.1. </span> Flexbox Flow
647+
Direction: the &lsquo;<a href="#flex-direction0"><code
648+
class=property>flex-direction</code></a>&rsquo; property</h3>
646649

647650
<table class=propdef>
648651
<tbody>
649652
<tr>
650653
<th>Name:
651654

652-
<td><dfn id=flex-direction>flex-direction</dfn>
655+
<td><dfn id=flex-direction0>flex-direction</dfn>
653656

654657
<tr>
655658
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
@@ -687,65 +690,67 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
687690
<td>no
688691
</table>
689692

690-
<table class=propdef>
691-
<tbody>
692-
<tr>
693-
<th>Name:
694-
695-
<td><dfn id=flex-wrap>flex-wrap</dfn>
696-
697-
<tr>
698-
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
699-
700-
<td>none | wrap | wrap-reverse
701-
702-
<tr>
703-
<th>Initial:
704-
705-
<td>none
706-
707-
<tr>
708-
<th>Applies To:
693+
<p>The &lsquo;<a href="#flex-direction0"><code
694+
class=property>flex-direction</code></a>&rsquo; property specifies how <a
695+
href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox,
696+
by setting the direction of the flexbox's <a href="#main-axis"><i>main
697+
axis</i></a>. This affects the direction that flexbox items are laid out
698+
in, and the meaning of the &lsquo;<a href="#flex-pack0"><code
699+
class=property>flex-pack</code></a>&rsquo; property.
709700

710-
<td>flexboxes
701+
<dl>
702+
<dt><dfn id=flex-flow-row>row</dfn>
711703

712-
<tr>
713-
<th>Inherited:
704+
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
705+
orientation as the inline axis of the current writing mode (the direction
706+
that text is laid out in). The <a
707+
href="#main-start"><i>main-start</i></a> and <a
708+
href="#main-end"><i>main-end</i></a> directions are equivalent to the
709+
"start" and "end" directions, respectively, of the current writing mode.
714710

715-
<td>no
711+
<dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
716712

717-
<tr>
718-
<th>Computed Value:
713+
<dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
714+
href="#main-start"><i>main-start</i></a> and <a
715+
href="#main-end"><i>main-end</i></a> directions are swapped.
719716

720-
<td>specified value
717+
<dt><dfn id=flex-flow-column>column</dfn>
721718

722-
<tr>
723-
<th>Media:
719+
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
720+
orientation as the block axis of the current writing mode (the direction
721+
that blocks are laid out in). The <a
722+
href="#main-start"><i>main-start</i></a> and <a
723+
href="#main-end"><i>main-end</i></a> directions are equivalent to the
724+
"before" and "after" directions, respectively, of the current writing
725+
mode.
724726

725-
<td>visual
727+
<dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
726728

727-
<tr>
728-
<th>Animatable:
729+
<dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
730+
href="#main-start"><i>main-start</i></a> and <a
731+
href="#main-end"><i>main-end</i></a> directions are swapped.
732+
</dl>
729733

730-
<td>no
731-
</table>
734+
<h3 id=flex-wrap><span class=secno>3.2. </span> Flexbox Wrapping: the
735+
&lsquo;<a href="#flex-wrap0"><code
736+
class=property>flex-wrap</code></a>&rsquo; property</h3>
732737

733738
<table class=propdef>
734739
<tbody>
735740
<tr>
736741
<th>Name:
737742

738-
<td><dfn id=flex-flow0>flex-flow</dfn>
743+
<td><dfn id=flex-wrap0>flex-wrap</dfn>
739744

740745
<tr>
741746
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
742747

743-
<td>&lt;&apos;flex-direction&apos;> || &lt;&apos;flex-wrap&apos;>
748+
<td>none | wrap | wrap-reverse
744749

745750
<tr>
746751
<th>Initial:
747752

748-
<td>see individual properties
753+
<td>none
749754

750755
<tr>
751756
<th>Applies To:
@@ -755,12 +760,12 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
755760
<tr>
756761
<th>Inherited:
757762

758-
<td>see individual properties
763+
<td>no
759764

760765
<tr>
761766
<th>Computed Value:
762767

763-
<td>see individual properties
768+
<td>specified value
764769

765770
<tr>
766771
<th>Media:
@@ -773,48 +778,7 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
773778
<td>no
774779
</table>
775780

776-
<p>The &lsquo;<a href="#flex-direction"><code
777-
class=property>flex-direction</code></a>&rsquo; property specifies how <a
778-
href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox,
779-
by setting the direction of the flexbox's <a href="#main-axis"><i>main
780-
axis</i></a>. This affects the direction that flexbox items are laid out
781-
in, and the meaning of the &lsquo;<a href="#flex-pack0"><code
782-
class=property>flex-pack</code></a>&rsquo; property.
783-
784-
<dl>
785-
<dt><dfn id=flex-flow-row>row</dfn>
786-
787-
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
788-
orientation as the inline axis of the current writing mode (the direction
789-
that text is laid out in). The <a
790-
href="#main-start"><i>main-start</i></a> and <a
791-
href="#main-end"><i>main-end</i></a> directions are equivalent to the
792-
"start" and "end" directions, respectively, of the current writing mode.
793-
794-
<dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
795-
796-
<dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
797-
href="#main-start"><i>main-start</i></a> and <a
798-
href="#main-end"><i>main-end</i></a> directions are swapped.
799-
800-
<dt><dfn id=flex-flow-column>column</dfn>
801-
802-
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
803-
orientation as the block axis of the current writing mode (the direction
804-
that blocks are laid out in). The <a
805-
href="#main-start"><i>main-start</i></a> and <a
806-
href="#main-end"><i>main-end</i></a> directions are equivalent to the
807-
"before" and "after" directions, respectively, of the current writing
808-
mode.
809-
810-
<dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
811-
812-
<dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
813-
href="#main-start"><i>main-start</i></a> and <a
814-
href="#main-end"><i>main-end</i></a> directions are swapped.
815-
</dl>
816-
817-
<p>The &lsquo;<a href="#flex-wrap"><code
781+
<p>The &lsquo;<a href="#flex-wrap0"><code
818782
class=property>flex-wrap</code></a>&rsquo; property controls whether the
819783
flexbox is <a href="#single-line"><i>single-line</i></a> or <a
820784
href="#multi-line0"><i>multi-line</i></a>, and the direction of the <a
@@ -861,11 +825,58 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
861825
href="#cross-end"><i>cross-end</i></a> directions are swapped.
862826
</dl>
863827

828+
<h3 id=flex-flow><span class=secno>3.3. </span> Flex Direction and Wrap:
829+
the &lsquo;<a href="#flex-flow0"><code
830+
class=property>flex-flow</code></a>&rsquo; shorthand</h3>
831+
832+
<table class=propdef>
833+
<tbody>
834+
<tr>
835+
<th>Name:
836+
837+
<td><dfn id=flex-flow0>flex-flow</dfn>
838+
839+
<tr>
840+
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
841+
842+
<td>&lt;&apos;flex-direction&apos;> || &lt;&apos;flex-wrap&apos;>
843+
844+
<tr>
845+
<th>Initial:
846+
847+
<td>see individual properties
848+
849+
<tr>
850+
<th>Applies To:
851+
852+
<td>flexboxes
853+
854+
<tr>
855+
<th>Inherited:
856+
857+
<td>see individual properties
858+
859+
<tr>
860+
<th>Computed Value:
861+
862+
<td>see individual properties
863+
864+
<tr>
865+
<th>Media:
866+
867+
<td>visual
868+
869+
<tr>
870+
<th>Animatable:
871+
872+
<td>no
873+
</table>
874+
864875
<p>The &lsquo;<a href="#flex-flow0"><code
865876
class=property>flex-flow</code></a>&rsquo; property is a shorthand for
866-
setting the &lsquo;<a href="#flex-direction"><code
877+
setting the &lsquo;<a href="#flex-direction0"><code
867878
class=property>flex-direction</code></a>&rsquo; and &lsquo;<a
868-
href="#flex-wrap"><code class=property>flex-wrap</code></a>&rsquo;
879+
href="#flex-wrap0"><code class=property>flex-wrap</code></a>&rsquo;
869880
properties together.
870881

871882
<div class=example>
@@ -906,7 +917,7 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
906917
</table>
907918
</div>
908919

909-
<h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
920+
<h3 id=flex-order><span class=secno>3.4. </span> Display Order: the
910921
&lsquo;<a href="#flex-order0"><code
911922
class=property>flex-order</code></a>&rsquo; property</h3>
912923

@@ -1512,7 +1523,7 @@ <h2 id=multi-line><span class=secno>6. </span> Multi-line Flexbox</h2>
15121523

15131524
<p>A flexbox can be either <a href="#single-line"><i>single-line</i></a> or
15141525
<a href="#multi-line0"><i>multi-line</i></a>, depending on the &lsquo;<a
1515-
href="#flex-wrap"><code class=property>flex-wrap</code></a>&rsquo;
1526+
href="#flex-wrap0"><code class=property>flex-wrap</code></a>&rsquo;
15161527
property. A <dfn id=single-line>single-line</dfn> flexbox lays out all of
15171528
its children in a single line, even if that would cause the flexbox to
15181529
overflow its bounds. A <dfn id=multi-line0>multi-line</dfn> flexbox breaks
@@ -2380,7 +2391,7 @@ <h2 class=no-num id=property>Property index</h2>
23802391
<td>visual
23812392

23822393
<tr>
2383-
<th><a class=property href="#flex-direction">flex-direction</a>
2394+
<th><a class=property href="#flex-direction0">flex-direction</a>
23842395

23852396
<td>row | row-reverse | column | column-reverse
23862397

@@ -2471,7 +2482,7 @@ <h2 class=no-num id=property>Property index</h2>
24712482
<td>visual
24722483

24732484
<tr>
2474-
<th><a class=property href="#flex-wrap">flex-wrap</a>
2485+
<th><a class=property href="#flex-wrap0">flex-wrap</a>
24752486

24762487
<td>none | wrap | wrap-reverse
24772488

@@ -2569,11 +2580,11 @@ <h2 class=no-num id=index>Index</h2>
25692580
<li>flexbox item's, <a href="#flexbox-item"
25702581
title="flexbox item's"><strong>2.</strong></a>
25712582

2572-
<li>flex-direction, <a href="#flex-direction"
2583+
<li>flex-direction, <a href="#flex-direction0"
25732584
title=flex-direction><strong>3.1.</strong></a>
25742585

25752586
<li>flex-flow, <a href="#flex-flow0"
2576-
title=flex-flow><strong>3.1.</strong></a>
2587+
title=flex-flow><strong>3.3.</strong></a>
25772588

25782589
<li>flexible length, <a href="#flexible-length"
25792590
title="flexible length"><strong>4.</strong></a>
@@ -2591,13 +2602,13 @@ <h2 class=no-num id=index>Index</h2>
25912602
title=flex-line-pack><strong>6.1.</strong></a>
25922603

25932604
<li>flex-order, <a href="#flex-order0"
2594-
title=flex-order><strong>3.2.</strong></a>
2605+
title=flex-order><strong>3.4.</strong></a>
25952606

25962607
<li>flex-pack, <a href="#flex-pack0"
25972608
title=flex-pack><strong>5.1.</strong></a>
25982609

2599-
<li>flex-wrap, <a href="#flex-wrap"
2600-
title=flex-wrap><strong>3.1.</strong></a>
2610+
<li>flex-wrap, <a href="#flex-wrap0"
2611+
title=flex-wrap><strong>3.2.</strong></a>
26012612

26022613
<li>inline flexbox, <a href="#inline-flexbox"
26032614
title="inline flexbox"><strong>2.1.</strong></a>
@@ -2629,7 +2640,7 @@ <h2 class=no-num id=index>Index</h2>
26292640
<li>negative flexibility, <a href="#negative-flexibility"
26302641
title="negative flexibility"><strong>4.</strong></a>
26312642

2632-
<li>none, <a href="#flex-flow-none" title=none><strong>3.1.</strong></a>
2643+
<li>none, <a href="#flex-flow-none" title=none><strong>3.2.</strong></a>
26332644

26342645
<li>positive flexibility, <a href="#positive-flexibility"
26352646
title="positive flexibility"><strong>4.</strong></a>
@@ -2666,10 +2677,10 @@ <h2 class=no-num id=index>Index</h2>
26662677
title="style sheet, as conformance class"><strong>9.2.</strong></a>
26672678
</ul>
26682679

2669-
<li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>
2680+
<li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.2.</strong></a>
26702681

26712682
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
2672-
title=wrap-reverse><strong>3.1.</strong></a>
2683+
title=wrap-reverse><strong>3.2.</strong></a>
26732684
</ul>
26742685
<!--end-index-->
26752686
</html>

0 commit comments

Comments
 (0)