Skip to content

Commit 3d82a56

Browse files
fantasaifantasai
committed
Update Changes, update DoC, shift some sections around and add a skip link for authors.
1 parent 311dda3 commit 3d82a56

4 files changed

Lines changed: 162 additions & 177 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 58 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,11 @@
103103

104104
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
105105

106-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 12 July 2012</h2>
106+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 17 July 2012</h2>
107107

108108
<dl>
109109
<dt>This version:
110-
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120712/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120712/</a>-->
110+
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120717/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120717/</a>-->
111111

112112

113113
<dd><a
@@ -279,15 +279,15 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
279279

280280
<li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a>
281281
<ul class=toc>
282-
<li><a href="#item-margins"><span class=secno>4.1. </span> Flex Item
282+
<li><a href="#abspos-items"><span class=secno>4.1. </span> Out-of-flow
283+
Items</a>
284+
285+
<li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item
283286
Margins</a>
284287

285-
<li><a href="#painting"><span class=secno>4.2. </span> Flex Item
288+
<li><a href="#painting"><span class=secno>4.3. </span> Flex Item
286289
Painting</a>
287290

288-
<li><a href="#abspos-items"><span class=secno>4.3. </span> Out-of-flow
289-
Items</a>
290-
291291
<li><a href="#visibility-collapse"><span class=secno>4.4. </span>
292292
Collapsed Items</a>
293293

@@ -856,6 +856,9 @@ <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2>
856856
specification that defines a new ‘<code class=property>display</code>’
857857
value specific to flex items.
858858

859+
<p class=note> Authors reading this spec may want to <a
860+
href="#item-margins">skip past these box-generation details</a>.
861+
859862
<div class=example>
860863
<p>Examples of flex items:
861864

@@ -898,27 +901,7 @@ <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2>
898901
ruby) or otherwise mangle the box tree (e.g. run-ins). It is intended that
899902
flex item determination run after these operations.
900903

901-
<h3 id=item-margins><span class=secno>4.1. </span> Flex Item Margins</h3>
902-
903-
<p> The margins of adjacent <a href="#flex-item"><i>flex items</i></a> do
904-
not collapse. Auto margins absorb extra space in the corresponding
905-
dimension and can be used for alignment and to push adjacent flex items
906-
apart; see <a href="#auto-margins">Aligning with ‘<code
907-
class=css>auto</code>’ margins</a>.
908-
909-
<h3 id=painting><span class=secno>4.2. </span> Flex Item Painting</h3>
910-
911-
<p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as
912-
block-level elements in the normal flow, except that ‘<code
913-
class=property>z-index</code>’ values other than ‘<a
914-
href="#align-self-auto"><code class=css>auto</code></a>’ create a
915-
stacking context even if ‘<code class=property>position</code>’ is
916-
‘<code class=css>static</code>’.
917-
918-
<p class=note> Note: Descendants that are positioned outside a flex item
919-
still participate in any stacking context established by the flex item.
920-
921-
<h3 id=abspos-items><span class=secno>4.3. </span> Out-of-flow Items</h3>
904+
<h3 id=abspos-items><span class=secno>4.1. </span> Out-of-flow Items</h3>
922905

923906
<p> Absolutely positioned children of a flex container are not themselves
924907
<a href="#flex-item"><i>flex items</i></a>, but they leave behind
@@ -952,6 +935,26 @@ <h3 id=abspos-items><span class=secno>4.3. </span> Out-of-flow Items</h3>
952935
where there would otherwise be only one, possibly resulting in increased
953936
space between two "real" items.
954937

938+
<h3 id=item-margins><span class=secno>4.2. </span> Flex Item Margins</h3>
939+
940+
<p> The margins of adjacent <a href="#flex-item"><i>flex items</i></a> do
941+
not collapse. Auto margins absorb extra space in the corresponding
942+
dimension and can be used for alignment and to push adjacent flex items
943+
apart; see <a href="#auto-margins">Aligning with ‘<code
944+
class=css>auto</code>’ margins</a>.
945+
946+
<h3 id=painting><span class=secno>4.3. </span> Flex Item Painting</h3>
947+
948+
<p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as
949+
block-level elements in the normal flow, except that ‘<code
950+
class=property>z-index</code>’ values other than ‘<a
951+
href="#align-self-auto"><code class=css>auto</code></a>’ create a
952+
stacking context even if ‘<code class=property>position</code>’ is
953+
‘<code class=css>static</code>’.
954+
955+
<p class=note> Note: Descendants that are positioned outside a flex item
956+
still participate in any stacking context established by the flex item.
957+
955958
<h3 id=visibility-collapse><span class=secno>4.4. </span> Collapsed Items</h3>
956959

957960
<p> Specifying ‘<code class=css>visibility:collapse</code>’ on a flex
@@ -3797,92 +3800,43 @@ <h3 class=no-num id=informative>Other references</h3>
37973800

37983801
<h2 class=no-num id=changes>Changes</h2>
37993802

3800-
<p> The following major changes were made since the <a
3801-
href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">22 March 2012
3802-
Working Draft</a>:
3803+
<p> The following significant changes were made since the <a
3804+
href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012
3805+
Last Call Working Draft</a>:
38033806

38043807
<ul>
3805-
<li> The ‘<code class=property>display</code>’ values for flex
3806-
containers have been changed from ‘<code class=css>flexbox</code>’
3807-
and ‘<code class=css>inline-flexbox</code>’ to ‘<a
3808-
href="#display-flex"><code class=css>flex</code></a>’ and ‘<a
3809-
href="#display-inline-flex"><code class=css>inline-flex</code></a>’.
3810-
3811-
<li> The alignment properties and values have been renamed to align with
3812-
the new <a href="http://www.w3.org/TR/css3-align/">Box Alignment</a>
3813-
module:
3814-
<ul>
3815-
<li>‘<code class=property>flex-align</code>’ → ‘<a
3816-
href="#align-items"><code class=property>align-items</code></a>’
3817-
3818-
<li>‘<code class=property>flex-item-align</code>’ → ‘<a
3819-
href="#align-self"><code class=property>align-self</code></a>’
3820-
3821-
<li>‘<code class=property>flex-line-pack</code>’ → ‘<a
3822-
href="#align-content"><code class=property>align-content</code></a>’
3823-
3824-
<li>‘<code class=property>flex-pack</code>’ → ‘<a
3825-
href="#justify-content"><code
3826-
class=property>justify-content</code></a>’
3827-
</ul>
3828-
3829-
<li> The ‘<code class=property>flex-order</code>’ property has been
3830-
renamed to ‘<a href="#order"><code class=property>order</code></a>’,
3831-
to allow it to be used with other layout models in the future.
3832-
3833-
<li> The ‘<a href="#flex"><code class=property>flex</code></a>’
3834-
shorthand has been split into the ‘<a href="#flex-grow"><code
3835-
class=property>flex-grow</code></a>’, ‘<a href="#flex-shrink"><code
3836-
class=property>flex-shrink</code></a>’, and ‘<a
3837-
href="#flex-basis0"><code class=property>flex-basis</code></a>’
3838-
longhands.
3839-
3840-
<li> Negative free space is now distributed in proportion to <a
3841-
href="#flex-base-size"><var>flex base size</var></a> × <a
3842-
href="#flex-shrink-ratio"><var>flex shrink ratio</var></a>, rather than
3843-
just the flex shrink ratio.
3844-
3845-
<li> Flex items are now allowed to shrink by default. (The initial value
3846-
of ‘<a href="#flex-shrink"><code
3847-
class=property>flex-shrink</code></a>’ is ‘<code
3848-
class=css>1</code>’.)
3849-
3850-
<li> A new <a href="#min-size-auto">‘<code class=css>auto</code>’
3851-
value for ‘<code class=css>min-width/height</code>’</a> has been
3852-
added to set a reasonable default minimum main size for flex items.
3853-
3854-
<li> The <a href="#visibility-collapse">effect of ‘<code
3855-
class=css>visibility: collapse</code>’</a> on flex items is now
3856-
defined.
3857-
3858-
<li> Inline replaced elements are no longer promoted to flex items;
3859-
instead certain HTML elements intended to be replaced elements are
3860-
promoted to flex items. This produces a consistent layout model
3861-
regardless of whether the replaced content can be loaded.
3808+
<li>All children of a flex container now become flex items (not just those
3809+
that are not ‘<code class=css>inline</code>’).
38623810

3863-
<li> For <a href="#pagination">pagination</a>, the effect and propagation
3864-
of page-breaking controls has been tweaked and clarified, and most of the
3865-
details of fragmentation are now informative, allowing UAs to do better.
3811+
<li>Defined <a href="#painting">painting behavior of flex items</a>.
38663812

3867-
<li> The flex layout algorithm has received an editorial overhaul, and
3868-
many error fixes and clarifications were made.
3869-
3870-
<li> A lot of terminology has been updated to make it less confusing:
3871-
<ul>
3872-
<li>flexbox → flex container
3873-
3874-
<li>flexbox item → flex item
3813+
<li>Made ‘<code class=property>z-index</code>’ automatically apply to
3814+
flex items. <!--
3815+
<li>Defined which properties affect placeholders.
3816+
<li>Defined which properties apply to the table wrapper box vs. the table box of a table element.
3817+
-->
3818+
38753819

3876-
<li>positive flexibility → flex grow ratio
3820+
<li>Defined interaction of ‘<a href="#order"><code
3821+
class=property>order</code></a>’ and <a
3822+
href="http://www.w3.org/TR/css3-speec/">speech</a>, <a
3823+
href="http://www.w3.org/TR/css3-ui/#nav-index">‘<code
3824+
class=property>tab-index</code>’</a>.
38773825

3878-
<li>negative flexibility → flex shrink ratio
3826+
<li>Corrected errors in the <a href="#layout-algorithm">flex layout
3827+
algorithm</a>.
38793828

3880-
<li>preferred size → flex basis
3829+
<li>Added or rewrote many examples to make them more realistic and more
3830+
interesting.
38813831

3882-
<li>hypothetical main size → flex base size
3883-
</ul>
3832+
<li>Various clarifications to the <a href="#flex-containers">flex
3833+
containers</a> and <a href="#flex-items">flex items</a> chapters.
38843834
</ul>
38853835

3836+
<p>A <a
3837+
href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of
3838+
Last Call Comments</a> is available.
3839+
38863840
<h2 class=no-num id=property>Property index</h2>
38873841
<!--begin-properties-->
38883842

‎css3-flexbox/Overview.src.html‎

Lines changed: 42 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,10 @@ <h2 id='flex-items'>
553553
is expected to be superseded by a future specification
554554
that defines a new 'display' value specific to flex items.
555555

556+
<p class="note">
557+
Authors reading this spec may want to
558+
<a href="#item-margins">skip past these box-generation details</a>.
559+
556560
<div class="example">
557561
<p>Examples of flex items:
558562
<pre>
@@ -589,27 +593,6 @@ <h2 id='flex-items'>
589593
Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins).
590594
It is intended that flex item determination run after these operations.
591595

592-
<h3 id='item-margins'>
593-
Flex Item Margins</h3>
594-
595-
<p>
596-
The margins of adjacent <i>flex items</i> do not collapse.
597-
Auto margins absorb extra space in the corresponding dimension and can be used for alignment
598-
and to push adjacent flex items apart;
599-
see <a href="#auto-margins">Aligning with ''auto'' margins</a>.
600-
601-
602-
<h3 id='painting'>
603-
Flex Item Painting</h3>
604-
605-
<p>
606-
<i>Flex items</i> paint exactly the same as block-level elements in the normal flow,
607-
except that 'z-index' values other than ''auto'' create a stacking context
608-
even if 'position' is ''static''.
609-
<p class="note">
610-
Note: Descendants that are positioned outside a flex item still participate
611-
in any stacking context established by the flex item.
612-
613596
<h3 id='abspos-items'>
614597
Out-of-flow Items</h3>
615598

@@ -640,6 +623,27 @@ <h3 id='abspos-items'>
640623
where there would otherwise be only one,
641624
possibly resulting in increased space between two "real" items.
642625

626+
<h3 id='item-margins'>
627+
Flex Item Margins</h3>
628+
629+
<p>
630+
The margins of adjacent <i>flex items</i> do not collapse.
631+
Auto margins absorb extra space in the corresponding dimension and can be used for alignment
632+
and to push adjacent flex items apart;
633+
see <a href="#auto-margins">Aligning with ''auto'' margins</a>.
634+
635+
636+
<h3 id='painting'>
637+
Flex Item Painting</h3>
638+
639+
<p>
640+
<i>Flex items</i> paint exactly the same as block-level elements in the normal flow,
641+
except that 'z-index' values other than ''auto'' create a stacking context
642+
even if 'position' is ''static''.
643+
<p class="note">
644+
Note: Descendants that are positioned outside a flex item still participate
645+
in any stacking context established by the flex item.
646+
643647
<h3 id='visibility-collapse'>
644648
Collapsed Items</h3>
645649

@@ -3130,61 +3134,26 @@ <h3 class="no-num" id="informative">Other references</h3>
31303134
<h2 class="no-num" id="changes">Changes</h2>
31313135

31323136
<p>
3133-
The following major changes were made since the
3134-
<a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">22 March 2012 Working Draft</a>:
3137+
The following significant changes were made since the
3138+
<a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 Last Call Working Draft</a>:
31353139
<ul>
3136-
<li>
3137-
The 'display' values for flex containers have been changed
3138-
from ''flexbox'' and ''inline-flexbox'' to ‘<a href="#display-flex"><code class=css>flex</code></a>’ and ''inline-flex''.
3139-
<li>
3140-
The alignment properties and values have been renamed to align with the new
3141-
<a href="http://www.w3.org/TR/css3-align/">Box Alignment</a> module:
3142-
<ul>
3143-
<li>'flex-align' &rarr; 'align-items'
3144-
<li>'flex-item-align' &rarr; 'align-self'
3145-
<li>'flex-line-pack' &rarr; 'align-content'
3146-
<li>'flex-pack' &rarr; 'justify-content'
3147-
</ul>
3148-
<li>
3149-
The 'flex-order' property has been renamed to 'order',
3150-
to allow it to be used with other layout models in the future.
3151-
<li>
3152-
The 'flex' shorthand has been split into the 'flex-grow', 'flex-shrink', and 'flex-basis' longhands.
3153-
<li>
3154-
Negative free space is now distributed in proportion to <var>flex base size</var> &times; <var>flex shrink ratio</var>,
3155-
rather than just the flex shrink ratio.
3156-
<li>
3157-
Flex items are now allowed to shrink by default. (The initial value of 'flex-shrink' is ''1''.)
3158-
<li>
3159-
A new <a href="#min-size-auto">''auto'' value for 'min-width/height'</a> has been added
3160-
to set a reasonable default minimum main size for flex items.
3161-
<li>
3162-
The <a href="#visibility-collapse">effect of ''visibility: collapse''</a>
3163-
on flex items is now defined.
3164-
<li>
3165-
Inline replaced elements are no longer promoted to flex items;
3166-
instead certain HTML elements intended to be replaced elements are promoted to flex items.
3167-
This produces a consistent layout model regardless of whether the replaced content can be loaded.
3168-
<li>
3169-
For <a href="#pagination">pagination</a>, the effect and propagation of
3170-
page-breaking controls has been tweaked and clarified,
3171-
and most of the details of fragmentation are now informative,
3172-
allowing UAs to do better.
3173-
<li>
3174-
The flex layout algorithm has received an editorial overhaul,
3175-
and many error fixes and clarifications were made.
3176-
<li>
3177-
A lot of terminology has been updated to make it less confusing:
3178-
<ul>
3179-
<li>flexbox &rarr; flex container
3180-
<li>flexbox item &rarr; flex item
3181-
<li>positive flexibility &rarr; flex grow ratio
3182-
<li>negative flexibility &rarr; flex shrink ratio
3183-
<li>preferred size &rarr; flex basis
3184-
<li>hypothetical main size &rarr; flex base size
3185-
</ul>
3140+
<li>All children of a flex container now become flex items (not just those that are not ''inline'').
3141+
<li>Defined <a href="#painting">painting behavior of flex items</a>.
3142+
<li>Made 'z-index' automatically apply to flex items.
3143+
<!--
3144+
<li>Defined which properties affect placeholders.
3145+
<li>Defined which properties apply to the table wrapper box vs. the table box of a table element.
3146+
-->
3147+
<li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speec/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'tab-index'</a>.
3148+
<li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>.
3149+
<li>Added or rewrote many examples to make them more realistic and more interesting.
3150+
<li>Various clarifications to the
3151+
<a href="#flex-containers">flex containers</a> and
3152+
<a href="#flex-items">flex items</a> chapters.
31863153
</ul>
31873154

3155+
<p>A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of Last Call Comments</a> is available.
3156+
31883157
<h2 id="property" class="no-num">Property index</h2>
31893158
<!--properties-->
31903159

0 commit comments

Comments
 (0)