changeset
[css-flexbox] Specify that min-* stuff works when the main-axis overflow is visible, not both overflows.
Thu, 17 Jul 2014 15:17:29 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Thu, 17 Jul 2014 15:17:29 -0700
- changeset 14264
- c4cc9750acd5
- parent 14263
- 83e39e321548
- child 14265
- 0daa9ed2cf27
[css-flexbox] Specify that min-* stuff works when the main-axis overflow is visible, not both overflows.
| css-flexbox/Overview.bs | file | annotate | diff | comparison | revisions | |
| css-flexbox/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-flexbox/Overview.bs Thu Jul 17 13:37:13 2014 -0700 1.2 +++ b/css-flexbox/Overview.bs Thu Jul 17 15:17:29 2014 -0700 1.3 @@ -882,7 +882,7 @@ 1.4 <dl dfn-type=value dfn-for="min-width min-height"> 1.5 <dt><dfn>auto</dfn> 1.6 <dd> 1.7 - On a <a>flex item</a> whose 'overflow' is ''overflow/visible'', 1.8 + On a <a>flex item</a> whose 'overflow' is ''overflow/visible'' in the <a>main axis</a>, 1.9 when specified on the <a>flex item's</a> main-axis min-size property, 1.10 this keyword specifies as the minimum size the smallest of: 1.11
2.1 --- a/css-flexbox/Overview.html Thu Jul 17 13:37:13 2014 -0700 2.2 +++ b/css-flexbox/Overview.html Thu Jul 17 15:17:29 2014 -0700 2.3 @@ -246,7 +246,7 @@ 2.4 </p> 2.5 <h1 class="p-name no-ref" id=title>CSS Flexible Box Layout Module Level 1</h1> 2.6 <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, 2.7 - <span class=dt-updated><span class=value-title title=20140710>10 July 2014</span></span></span></h2> 2.8 + <span class=dt-updated><span class=value-title title=20140717>17 July 2014</span></span></span></h2> 2.9 <div data-fill-with=spec-metadata><dl> 2.10 <dt>This version: 2.11 <dd><a class=u-url href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a> 2.12 @@ -567,7 +567,7 @@ 2.13 Module interactions</span><a class=self-link href=#placement></a></h3> 2.14 2.15 <p> 2.16 - This module extends the definition of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> property <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>, 2.17 + This module extends the definition of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> property <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>, 2.18 adding a new block-level and new inline-level display type, 2.19 and defining a new type of formatting context 2.20 along with properties to control its layout. 2.21 @@ -577,10 +577,10 @@ 2.22 Values</span><a class=self-link href=#values></a></h3> 2.23 2.24 <p> 2.25 - This specification follows the <a href=http://www.w3.org/TR/CSS21/about.html#property-defs>CSS property definition conventions</a> from <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>. 2.26 - Value types not defined in this specification are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>. 2.27 + This specification follows the <a href=http://www.w3.org/TR/CSS21/about.html#property-defs>CSS property definition conventions</a> from <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>. 2.28 + Value types not defined in this specification are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>. 2.29 Other CSS modules may expand the definitions of these value types: 2.30 - for example <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3val title=biblio-css3val>[CSS3VAL]</a>, when combined with this module, 2.31 + for example <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3val title=biblio-CSS3VAL>[CSS3VAL]</a>, when combined with this module, 2.32 expands the definition of the <var><length></var> value type as used in this specification. 2.33 2.34 <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <span class=css data-link-type=maybe title=inherit>inherit</span> keyword as their property value. For readability it has not been repeated explicitly. 2.35 @@ -590,7 +590,7 @@ 2.36 2.37 <p> 2.38 A <dfn data-dfn-type=dfn data-export="" id=flex-container>flex container<a class=self-link href=#flex-container></a></dfn> is the box generated by an element with a 2.39 - computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> of <a class=css data-link-type=maybe href=#valdef-display.flex title=flex>flex</a> or <a class=css data-link-type=maybe href=#valdef-display.inline-flex title=inline-flex>inline-flex</a>. 2.40 + computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> of <a class=css data-link-type=maybe href=#valuedef-flex title=flex>flex</a> or <a class=css data-link-type=maybe href=#valuedef-inline-flex title=inline-flex>inline-flex</a>. 2.41 In-flow children of a flex container are called <dfn data-dfn-type=dfn data-export="" id=flex-item title="flex item">flex items<a class=self-link href=#flex-item></a></dfn> 2.42 and are laid out using the flex layout model. 2.43 2.44 @@ -607,7 +607,7 @@ 2.45 </p><figure> 2.46 <img alt="" height=277 src=images/flex-direction-terms.svg width=665> 2.47 <figcaption> 2.48 - An illustration of the various directions and sizing terms as applied to a <a class=css data-link-type=maybe href=#valdef-flex-direction.row title=row>row</a> flex container. 2.49 + An illustration of the various directions and sizing terms as applied to a <a class=css data-link-type=maybe href=#valuedef-row title=row>row</a> flex container. 2.50 </figcaption> 2.51 </figure> 2.52 2.53 @@ -646,7 +646,7 @@ 2.54 <dt class=side>cross-start 2.55 <dt class=side>cross-end 2.56 <dd> 2.57 - <a data-link-type=dfn href=#flex-line title="flex lines">Flex lines</a> are filled with items and placed into the container 2.58 + <a data-link-type=dfn href=#flex-line title="Flex lines">Flex lines</a> are filled with items and placed into the container 2.59 starting on the <dfn data-dfn-type=dfn data-export="" id=cross-start>cross-start<a class=self-link href=#cross-start></a></dfn> side of the flex container 2.60 and going toward the <dfn data-dfn-type=dfn data-export="" id=cross-end>cross-end<a class=self-link href=#cross-end></a></dfn> side. 2.61 2.62 @@ -663,16 +663,16 @@ 2.63 2.64 2.65 <h2 class="heading settled heading" data-level=3 id=flex-containers><span class=secno>3 </span><span class=content> 2.66 -Flex Containers: the <a class=css data-link-type=maybe href=#valdef-display.flex title=flex>flex</a> and <a class=css data-link-type=maybe href=#valdef-display.inline-flex title=inline-flex>inline-flex</a> <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> values</span><a class=self-link href=#flex-containers></a></h2> 2.67 +Flex Containers: the <a class=css data-link-type=maybe href=#valuedef-flex title=flex>flex</a> and <a class=css data-link-type=maybe href=#valuedef-inline-flex title=inline-flex>inline-flex</a> <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> values</span><a class=self-link href=#flex-containers></a></h2> 2.68 2.69 <table class="definition propdef partial"><tr><th>Name:<td><a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a><tr><th>New values:<td class=prod>flex <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> inline-flex</table> 2.70 2.71 <dl data-dfn-for=display data-dfn-type=value> 2.72 - <dt><dfn class=css-code data-dfn-for=display data-dfn-type=value data-export="" id=valdef-display.flex>flex<a class=self-link href=#valdef-display.flex></a></dfn> 2.73 + <dt><dfn class=css-code data-dfn-for=display data-dfn-type=value data-export="" id=valuedef-flex>flex<a class=self-link href=#valuedef-flex></a></dfn> 2.74 <dd> 2.75 This value causes an element to generate a block-level <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> box. 2.76 2.77 - <dt><dfn class=css-code data-dfn-for=display data-dfn-type=value data-export="" id=valdef-display.inline-flex>inline-flex<a class=self-link href=#valdef-display.inline-flex></a></dfn> 2.78 + <dt><dfn class=css-code data-dfn-for=display data-dfn-type=value data-export="" id=valuedef-inline-flex>inline-flex<a class=self-link href=#valuedef-inline-flex></a></dfn> 2.79 <dd> 2.80 This value causes an element to generate an inline-level <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> box. 2.81 </dl> 2.82 @@ -683,8 +683,8 @@ 2.83 except that flex layout is used instead of block layout: 2.84 floats do not intrude into the flex container, 2.85 and the flex container’s margins do not collapse with the margins of its contents. 2.86 - <a data-link-type=dfn href=#flex-container title="flex containers">Flex containers</a> form a containing block for their contents 2.87 - <a href=http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>exactly like block containers do</a>. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a> 2.88 + <a data-link-type=dfn href=#flex-container title="Flex containers">Flex containers</a> form a containing block for their contents 2.89 + <a href=http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>exactly like block containers do</a>. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a> 2.90 The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> property applies to <a data-link-type=dfn href=#flex-container title="flex containers">flex containers</a>. 2.91 2.92 2.93 @@ -711,13 +711,13 @@ 2.94 </ul> 2.95 2.96 <p> 2.97 - If an element’s specified <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> is <a class=css data-link-type=maybe href=#valdef-display.inline-flex title=inline-flex>inline-flex</a>, 2.98 - then its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> property computes to <a class=css data-link-type=maybe href=#valdef-display.flex title=flex>flex</a> 2.99 + If an element’s specified <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> is <a class=css data-link-type=maybe href=#valuedef-inline-flex title=inline-flex>inline-flex</a>, 2.100 + then its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> property computes to <a class=css data-link-type=maybe href=#valuedef-flex title=flex>flex</a> 2.101 in certain circumstances: 2.102 the table in <a href=http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo>CSS 2.1 Section 9.7</a> 2.103 is amended to contain an additional row, 2.104 - with <a class=css data-link-type=maybe href=#valdef-display.inline-flex title=inline-flex>inline-flex</a> in the "Specified Value" column 2.105 - and <a class=css data-link-type=maybe href=#valdef-display.flex title=flex>flex</a> in the "Computed Value" column. 2.106 + with <a class=css data-link-type=maybe href=#valuedef-inline-flex title=inline-flex>inline-flex</a> in the "Specified Value" column 2.107 + and <a class=css data-link-type=maybe href=#valuedef-flex title=flex>flex</a> in the "Computed Value" column. 2.108 2.109 2.110 2.111 @@ -864,7 +864,7 @@ 2.112 Flex Item Z-Ordering</span><a class=self-link href=#painting></a></h3> 2.113 2.114 <p> 2.115 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> paint exactly the same as inline blocks <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>, 2.116 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> paint exactly the same as inline blocks <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>, 2.117 except that <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a>-modified document order is used in place of raw document order, 2.118 and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> 2.119 values other than <span class=css data-link-for=z-index data-link-type=maybe title=auto>auto</span> create a stacking context 2.120 @@ -895,7 +895,7 @@ 2.121 <p> 2.122 Though collapsed flex items aren’t rendered, 2.123 they do appear in the <a href=http://www.w3.org/TR/CSS21/intro.html#formatting-structure>formatting structure</a>. 2.124 - Therefore, unlike on <span class=css data-link-type=maybe title=display:none>display:none</span> items <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>, 2.125 + Therefore, unlike on <span class=css data-link-type=maybe title=display:none>display:none</span> items <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>, 2.126 effects that depend on a box appearing in the formatting structure 2.127 (like incrementing counters or running animations and transitions) 2.128 still operate on collapsed items. 2.129 @@ -1009,20 +1009,20 @@ 2.130 Implied Minimum Size of Flex Items</span><a class=self-link href=#min-size-auto></a></h3> 2.131 2.132 <p>To provide a more reasonable default minimum size for <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>, 2.133 - this specification introduces a new <a class=css data-link-for=min-width data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a> value 2.134 - as the initial value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a> properties defined in CSS 2.1. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a></p> 2.135 + this specification introduces a new <a class=css data-link-for=min-width data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a> value 2.136 + as the initial value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a> properties defined in CSS 2.1. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a></p> 2.137 2.138 <table class="definition propdef partial"><tr><th>Name:<td><a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a>, <a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a><tr><th>New values:<td class=prod>auto<tr><th>New computed value:<td>the percentage as specified or the absolute length or a keyword<tr><th>New initial value:<td>auto</table> 2.139 2.140 <dl data-dfn-for="min-width min-height" data-dfn-type=value> 2.141 - <dt><dfn class=css-code data-dfn-for="min-width min-height" data-dfn-type=value data-export="" id="valdef-min-width min-height.auto">auto<a class=self-link href=#valdef-min-width%20min-height.auto></a></dfn> 2.142 + <dt><dfn class=css-code data-dfn-for="min-width min-height" data-dfn-type=value data-export="" id=valuedef-auto0>auto<a class=self-link href=#valuedef-auto0></a></dfn> 2.143 <dd> 2.144 - On a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> whose <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is <span class=css data-link-for=overflow data-link-type=maybe title=visible>visible</span>, 2.145 + On a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> whose <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is <span class=css data-link-for=overflow data-link-type=maybe title=visible>visible</span> in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>, 2.146 when specified on the <a data-link-type=dfn href=#flex-item title="flex item’s">flex item’s</a> main-axis min-size property, 2.147 this keyword specifies as the minimum size the smallest of: 2.148 2.149 <ul> 2.150 - <li>the used <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a>, if the computed <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> was <a class=css data-link-for=flex-basis data-link-type=maybe href=#valdef-flex.main-size title=main-size>main-size</a>, 2.151 + <li>the used <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a>, if the computed <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> was <a class=css data-link-for=flex-basis data-link-type=maybe href=#valuedef-main-size title=main-size>main-size</a>, 2.152 <li>the computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width title=max-width>max-width</a> (<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-max-height title=max-height>max-height</a>), if that value is <a data-link-type=dfn href=#definite title=definite>definite</a>, 2.153 <li>if the item has no intrinsic aspect ratio, its <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-measure title="min-content size">min-content size</a>, 2.154 <li>if the item has an intrinsic aspect ratio, 2.155 @@ -1096,7 +1096,7 @@ 2.156 This determines the direction that flex items are laid out in. 2.157 2.158 <dl data-dfn-for=flex-direction data-dfn-type=value> 2.159 - <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valdef-flex-direction.row>row<a class=self-link href=#valdef-flex-direction.row></a></dfn> 2.160 + <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valuedef-row>row<a class=self-link href=#valuedef-row></a></dfn> 2.161 <dd> 2.162 The flex container’s <a data-link-type=dfn href=#main-axis title="main axis">main axis</a> has the same orientation as the 2.163 <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#inline-axis- title="inline axis">inline axis</a> 2.164 @@ -1106,12 +1106,12 @@ 2.165 <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#inline-end title=inline-end>inline-end</a> directions, respectively, 2.166 of the current <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode0 title="writing mode">writing mode</a>. 2.167 2.168 - <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valdef-flex-direction.row-reverse>row-reverse<a class=self-link href=#valdef-flex-direction.row-reverse></a></dfn> 2.169 + <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valuedef-row-reverse>row-reverse<a class=self-link href=#valuedef-row-reverse></a></dfn> 2.170 <dd> 2.171 - Same as <a class=css data-link-type=maybe href=#valdef-flex-direction.row title=row>row</a>, 2.172 + Same as <a class=css data-link-type=maybe href=#valuedef-row title=row>row</a>, 2.173 except the <a data-link-type=dfn href=#main-start title=main-start>main-start</a> and <a data-link-type=dfn href=#main-end title=main-end>main-end</a> directions are swapped. 2.174 2.175 - <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valdef-flex-direction.column>column<a class=self-link href=#valdef-flex-direction.column></a></dfn> 2.176 + <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valuedef-column>column<a class=self-link href=#valuedef-column></a></dfn> 2.177 <dd> 2.178 The flex container’s <a data-link-type=dfn href=#main-axis title="main axis">main axis</a> has the same orientation as the 2.179 <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#block-axis- title="block axis">block axis</a> 2.180 @@ -1121,15 +1121,15 @@ 2.181 <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#block-end title=block-end>block-end</a> directions, respectively, 2.182 of the current <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode0 title="writing mode">writing mode</a>. 2.183 2.184 - <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valdef-flex-direction.column-reverse>column-reverse<a class=self-link href=#valdef-flex-direction.column-reverse></a></dfn> 2.185 + <dt><dfn class=css-code data-dfn-for=flex-direction data-dfn-type=value data-export="" id=valuedef-column-reverse>column-reverse<a class=self-link href=#valuedef-column-reverse></a></dfn> 2.186 <dd> 2.187 - Same as <a class=css data-link-type=maybe href=#valdef-flex-direction.column title=column>column</a>, 2.188 + Same as <a class=css data-link-type=maybe href=#valuedef-column title=column>column</a>, 2.189 except the <a data-link-type=dfn href=#main-start title=main-start>main-start</a> and <a data-link-type=dfn href=#main-end title=main-end>main-end</a> directions are swapped. 2.190 </dl> 2.191 2.192 <p class=note> 2.193 The reverse values do not reverse box ordering: 2.194 - like <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode title=writing-mode>writing-mode</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction title=direction>direction</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-writing-modes title=biblio-css3-writing-modes>[CSS3-WRITING-MODES]</a>, 2.195 + like <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode title=writing-mode>writing-mode</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction title=direction>direction</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-writing-modes title=biblio-CSS3-WRITING-MODES>[CSS3-WRITING-MODES]</a>, 2.196 they only change the direction of flow. 2.197 Painting order, speech order, and sequential navigation orders 2.198 are not affected. 2.199 @@ -1147,7 +1147,7 @@ 2.200 which determines the direction new lines are stacked in. 2.201 2.202 <dl data-dfn-for=flex-wrap data-dfn-type=value> 2.203 - <dt><dfn class=css-code data-dfn-for=flex-wrap data-dfn-type=value data-export="" id=valdef-flex-wrap.nowrap>nowrap<a class=self-link href=#valdef-flex-wrap.nowrap></a></dfn> 2.204 + <dt><dfn class=css-code data-dfn-for=flex-wrap data-dfn-type=value data-export="" id=valuedef-nowrap>nowrap<a class=self-link href=#valuedef-nowrap></a></dfn> 2.205 <dd> 2.206 The flex container is <a data-link-type=dfn href=#single-line title=single-line>single-line</a>. 2.207 The <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> direction is equivalent to either 2.208 @@ -1158,7 +1158,7 @@ 2.209 and the <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> direction is the opposite direction of <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a>. 2.210 2.211 2.212 - <dt><dfn class=css-code data-dfn-for=flex-wrap data-dfn-type=value data-export="" id=valdef-flex-wrap.wrap>wrap<a class=self-link href=#valdef-flex-wrap.wrap></a></dfn> 2.213 + <dt><dfn class=css-code data-dfn-for=flex-wrap data-dfn-type=value data-export="" id=valuedef-wrap>wrap<a class=self-link href=#valuedef-wrap></a></dfn> 2.214 <dd> 2.215 The flex container is <a data-link-type=dfn href=#multi-line title=multi-line>multi-line</a>. 2.216 The <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> direction is equivalent to either 2.217 @@ -1168,9 +1168,9 @@ 2.218 whichever is in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>, 2.219 and the <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> direction is the opposite direction of <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a>. 2.220 2.221 - <dt><dfn class=css-code data-dfn-for=flex-wrap data-dfn-type=value data-export="" id=valdef-flex-wrap.wrap-reverse>wrap-reverse<a class=self-link href=#valdef-flex-wrap.wrap-reverse></a></dfn> 2.222 + <dt><dfn class=css-code data-dfn-for=flex-wrap data-dfn-type=value data-export="" id=valuedef-wrap-reverse>wrap-reverse<a class=self-link href=#valuedef-wrap-reverse></a></dfn> 2.223 <dd> 2.224 - Same as <a class=css data-link-type=maybe href=#valdef-flex-wrap.wrap title=wrap>wrap</a>, 2.225 + Same as <a class=css data-link-type=maybe href=#valuedef-wrap title=wrap>wrap</a>, 2.226 except the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> and <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> directions are swapped. 2.227 </dl> 2.228 2.229 @@ -1213,7 +1213,7 @@ 2.230 <p> 2.231 Note that the <a class=property data-link-type=propdesc href=#propdef-flex-flow title=flex-flow>flex-flow</a> directions are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#writing-mode0 title="writing mode">writing mode</a> sensitive. 2.232 In vertical Japanese, for example, 2.233 - a <a class=css data-link-type=maybe href=#valdef-flex-direction.row title=row>row</a> flex container lays out its contents from top to bottom, 2.234 + a <a class=css data-link-type=maybe href=#valuedef-row title=row>row</a> flex container lays out its contents from top to bottom, 2.235 as seen in this example: 2.236 2.237 <table style="margin: 1em auto; text-align: center;"> 2.238 @@ -1237,7 +1237,7 @@ 2.239 Display Order: the <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> property</span><a class=self-link href=#order-property></a></h3> 2.240 2.241 <p> 2.242 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> are, by default, displayed and laid out in the same order as they appear in the source document. 2.243 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> are, by default, displayed and laid out in the same order as they appear in the source document. 2.244 The <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> property can be used to change this ordering. 2.245 2.246 <table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-order>order<a class=self-link href=#propdef-order></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>"><integer></a><tr><th>Initial:<td>0<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a> and absolutely-positioned children of <a data-link-type=dfn href=#flex-container title="flex containers">flex containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Animatable:<td>yes</table> 2.247 @@ -1245,14 +1245,14 @@ 2.248 <p> 2.249 The <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> property controls the order in which flex items appear within their flex container, 2.250 by assigning them to ordinal groups. 2.251 - It takes a single <dfn class=css-code data-dfn-for=order data-dfn-type=value data-export="" id=valdef-flex-wrap.integer><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>"><integer></a><a class=self-link href=#valdef-flex-wrap.integer></a></dfn> value, 2.252 + It takes a single <dfn class=css-code data-dfn-for=order data-dfn-type=value data-export="" id=valuedef-integer><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>"><integer></a><a class=self-link href=#valuedef-integer></a></dfn> value, 2.253 which specifies which ordinal group the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> belongs to. 2.254 2.255 <p> 2.256 A flex container lays out its content in <dfn data-dfn-type=dfn data-export="" id=order-modified-document-order>order-modified document order<a class=self-link href=#order-modified-document-order></a></dfn>, 2.257 starting from the lowest numbered ordinal group and going up. 2.258 Items with the same ordinal group are laid out in the order they appear in the source document. 2.259 - This also affects the <a href=http://www.w3.org/TR/CSS2/zindex.html>painting order</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>, 2.260 + This also affects the <a href=http://www.w3.org/TR/CSS2/zindex.html>painting order</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>, 2.261 exactly as if the flex items were reordered in the source document. 2.262 2.263 <div class=example> 2.264 @@ -1287,7 +1287,7 @@ 2.265 (such as <a href=http://www.w3.org/TR/css3-speech/>speech</a>). 2.266 Likewise, <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> does not affect 2.267 the default traversal order of sequential navigation modes 2.268 - (such as cycling through links, see e.g. <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#nav-index0 title=nav-index>nav-index</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3ui title=biblio-css3ui>[CSS3UI]</a> or <a href=http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-tabindex><code>tabindex</code></a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-html40 title=biblio-html40>[HTML40]</a>). 2.269 + (such as cycling through links, see e.g. <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#nav-index0 title=nav-index>nav-index</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3ui title=biblio-CSS3UI>[CSS3UI]</a> or <a href=http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-tabindex><code>tabindex</code></a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-html40 title=biblio-HTML40>[HTML40]</a>). 2.270 Authors <em>must</em> use <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> only for visual, not logical, reordering of content; 2.271 style sheets that use <a class=property data-link-type=propdesc href=#propdef-order title=order>order</a> to perform logical reordering are non-conforming. 2.272 2.273 @@ -1361,7 +1361,7 @@ 2.274 Flex Lines</span><a class=self-link href=#flex-lines></a></h2> 2.275 2.276 <p> 2.277 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> in a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> are laid out and aligned 2.278 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> in a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> are laid out and aligned 2.279 within <dfn data-dfn-type=dfn data-export="" id=flex-line title="flex line">flex lines<a class=self-link href=#flex-line></a></dfn>, 2.280 hypothetical containers used for grouping and alignment by the layout algorithm. 2.281 A flex container can be either <a data-link-type=dfn href=#single-line title=single-line>single-line</a> or <a data-link-type=dfn href=#multi-line title=multi-line>multi-line</a>, 2.282 @@ -1407,7 +1407,7 @@ 2.283 Since the container is 300px wide, only three of the items fit onto a single line. 2.284 They take up 240px, with 60px left over of remaining space. 2.285 Because the <a class=property data-link-type=propdesc href=#propdef-flex-flow title=flex-flow>flex-flow</a> property specifies a <a data-link-type=dfn href=#multi-line title=multi-line>multi-line</a> flex container 2.286 - (due to the <a class=css data-link-type=maybe href=#valdef-flex-wrap.wrap title=wrap>wrap</a> keyword appearing in its value), 2.287 + (due to the <a class=css data-link-type=maybe href=#valuedef-wrap title=wrap>wrap</a> keyword appearing in its value), 2.288 the flex container will create an additional line to contain the last item. 2.289 2.290 </p><figure> 2.291 @@ -1485,7 +1485,7 @@ 2.292 <a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> has no effect. 2.293 2.294 <dl data-dfn-for=flex data-dfn-type=value> 2.295 - <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valdef-flex.flex-grow><a class=production data-link-type=propdesc href=#propdef-flex-grow title=flex-grow><‘flex-grow’></a><a class=self-link href=#valdef-flex.flex-grow></a></dfn> 2.296 + <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valuedef-flex-grow><a class=production data-link-type=propdesc href=#propdef-flex-grow title=flex-grow><‘flex-grow’></a><a class=self-link href=#valuedef-flex-grow></a></dfn> 2.297 <dd> 2.298 <p> 2.299 This <var><number></var> component sets <a class=property data-link-type=propdesc href=#propdef-flex-grow title=flex-grow>flex-grow</a> <a href=#flex-components>longhand</a> 2.300 @@ -1495,7 +1495,7 @@ 2.301 when positive free space is distributed. 2.302 When omitted, it is set to <span class=css data-link-type=maybe title=1>1</span>. 2.303 2.304 - <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valdef-flex.flex-shrink><a class=production data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink><‘flex-shrink’></a><a class=self-link href=#valdef-flex.flex-shrink></a></dfn> 2.305 + <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valuedef-flex-shrink><a class=production data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink><‘flex-shrink’></a><a class=self-link href=#valuedef-flex-shrink></a></dfn> 2.306 <dd> 2.307 <p> 2.308 This <var><number></var> component sets <a class=property data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a> <a href=#flex-components>longhand</a> 2.309 @@ -1506,7 +1506,7 @@ 2.310 When omitted, it is set to <span class=css data-link-type=maybe title=1>1</span>. 2.311 The <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a> is multiplied by the <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> when distributing negative space. 2.312 2.313 - <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valdef-flex.flex-basis><a class=production data-link-type=propdesc href=#propdef-flex-basis title=flex-basis><‘flex-basis’></a><a class=self-link href=#valdef-flex.flex-basis></a></dfn> 2.314 + <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valuedef-flex-basis><a class=production data-link-type=propdesc href=#propdef-flex-basis title=flex-basis><‘flex-basis’></a><a class=self-link href=#valuedef-flex-basis></a></dfn> 2.315 <dd> 2.316 <p> 2.317 This component, which takes the same values as the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> property, 2.318 @@ -1516,7 +1516,7 @@ 2.319 before free space is distributed according to the flex factors. 2.320 When omitted from the <a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> shorthand, its specified value is <span class=css data-link-type=maybe title=0%>0%</span>. 2.321 <p> 2.322 - If the specified <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> is <a class=css-code data-link-for=flex-basis data-link-type=value href=#valdef-flex.main-size title=main-size>main-size</a>, 2.323 + If the specified <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> is <a class=css-code data-link-for=flex-basis data-link-type=value href=#valuedef-main-size title=main-size>main-size</a>, 2.324 the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is the value of the flex item’s <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>. 2.325 2.326 </p><figure> 2.327 @@ -1530,16 +1530,16 @@ 2.328 </figcaption> 2.329 </figure> 2.330 2.331 - <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valdef-flex.auto>auto<a class=self-link href=#valdef-flex.auto></a></dfn> 2.332 + <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valuedef-auto1>auto<a class=self-link href=#valuedef-auto1></a></dfn> 2.333 <dd> 2.334 - The keyword <a class=css data-link-for=flex data-link-type=maybe href=#valdef-flex.auto title=auto>auto</a> expands to <span class=css data-link-type=maybe title="1 1 main-size">1 1 main-size</span>. 2.335 + The keyword <a class=css data-link-for=flex data-link-type=maybe href=#valuedef-auto1 title=auto>auto</a> expands to <span class=css data-link-type=maybe title="1 1 main-size">1 1 main-size</span>. 2.336 2.337 2.338 2.339 2.340 - <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valdef-flex.none>none<a class=self-link href=#valdef-flex.none></a></dfn> 2.341 + <dt><dfn class=css-code data-dfn-for=flex data-dfn-type=value data-export="" id=valuedef-none>none<a class=self-link href=#valuedef-none></a></dfn> 2.342 <dd> 2.343 - <p>The keyword <a class=css data-link-type=maybe href=#valdef-flex.none title=none>none</a> expands to <span class=css data-link-type=maybe title="0 0 main-size">0 0 main-size</span>. 2.344 + <p>The keyword <a class=css data-link-type=maybe href=#valuedef-none title=none>none</a> expands to <span class=css data-link-type=maybe title="0 0 main-size">0 0 main-size</span>. 2.345 </dl> 2.346 2.347 <p> 2.348 @@ -1632,7 +1632,7 @@ 2.349 2.350 <p> 2.351 The <a class=property data-link-type=propdesc href=#propdef-flex-grow title=flex-grow>flex-grow</a> property sets the <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a> 2.352 - to the provided <dfn class=css-code data-dfn-for=flex-grow data-dfn-type=value data-export="" id=valdef-flex.number><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>"><number></a><a class=self-link href=#valdef-flex.number></a></dfn>. 2.353 + to the provided <dfn class=css-code data-dfn-for=flex-grow data-dfn-type=value data-export="" id=valuedef-number0><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>"><number></a><a class=self-link href=#valuedef-number0></a></dfn>. 2.354 Negative numbers are invalid. 2.355 2.356 <h4 class="heading settled heading" data-level=7.3.2 id=flex-shrink-property><span class=secno>7.3.2 </span><span class=content> 2.357 @@ -1647,7 +1647,7 @@ 2.358 2.359 <p> 2.360 The <a class=property data-link-type=propdesc href=#propdef-flex-shrink title=flex-shrink>flex-shrink</a> property sets the <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a> 2.361 - to the provided <dfn class=css-code data-dfn-for=flex-shrink data-dfn-type=value data-export="" id=valdef-flex.number><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>"><number></a><a class=self-link href=#valdef-flex.number></a></dfn>. 2.362 + to the provided <dfn class=css-code data-dfn-for=flex-shrink data-dfn-type=value data-export="" id=valuedef-number><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>"><number></a><a class=self-link href=#valuedef-number></a></dfn>. 2.363 Negative numbers are invalid. 2.364 2.365 <h4 class="heading settled heading" data-level=7.3.3 id=flex-basis-property><span class=secno>7.3.3 </span><span class=content> 2.366 @@ -1665,21 +1665,21 @@ 2.367 It accepts the same values as the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a> property. 2.368 2.369 <p> 2.370 - The <dfn class=css-code data-dfn-for=flex-basis data-dfn-type=value data-export="" id=valdef-flex.main-size>main-size<a class=self-link href=#valdef-flex.main-size></a></dfn> keyword, when specified on a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>, 2.371 + The <dfn class=css-code data-dfn-for=flex-basis data-dfn-type=value data-export="" id=valuedef-main-size>main-size<a class=self-link href=#valuedef-main-size></a></dfn> keyword, when specified on a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>, 2.372 retrieves the value of the <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>. 2.373 2.374 <p class=issue id=issue-cdba524f><a class=self-link href=#issue-cdba524f></a>This value was originally named "auto", 2.375 but that was confusing</p> 2.376 2.377 <p> 2.378 - The <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is resolved the same way as <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> in horizontal writing modes <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>: 2.379 + The <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is resolved the same way as <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> in horizontal writing modes <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>: 2.380 percentage values of <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> are resolved against 2.381 the flex item’s containing block, i.e. its flex container, 2.382 and if that containing block’s size is <a data-link-type=dfn href=#indefinite title=indefinite>indefinite</a>, 2.383 the result is the same as a <a data-link-type=dfn href=#main-size title="main size">main size</a> of <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a>. 2.384 Similarly, <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> determines the size of the content box, 2.385 unless otherwise specified 2.386 - such as by <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#box-sizing0 title=box-sizing>box-sizing</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3ui title=biblio-css3ui>[CSS3UI]</a>. 2.387 + such as by <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#box-sizing0 title=box-sizing>box-sizing</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3ui title=biblio-CSS3UI>[CSS3UI]</a>. 2.388 2.389 <h2 class="heading settled heading" data-level=8 id=alignment><span class=secno>8 </span><span class=content> 2.390 Alignment</span><a class=self-link href=#alignment></a></h2> 2.391 @@ -1691,7 +1691,7 @@ 2.392 2.393 <p> 2.394 The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-margin title=margin>margin</a> properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. 2.395 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> also respect the alignment properties from the Box Alignment spec, 2.396 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> also respect the alignment properties from the Box Alignment spec, 2.397 which allow easy keyword-based alignment of items in both the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a> and <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>. 2.398 These properties make many common types of alignment trivial, 2.399 including some things that were very difficult in CSS 2.1, 2.400 @@ -1826,23 +1826,23 @@ 2.401 It also exerts some control over the alignment of items when they overflow the line. 2.402 2.403 <dl data-dfn-for=justify-content data-dfn-type=value> 2.404 - <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valdef-justify-content.flex-start>flex-start<a class=self-link href=#valdef-justify-content.flex-start></a></dfn> 2.405 + <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valuedef-flex-start0>flex-start<a class=self-link href=#valuedef-flex-start0></a></dfn> 2.406 <dd> 2.407 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> are packed toward the start of the line. 2.408 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> are packed toward the start of the line. 2.409 The <a data-link-type=dfn href=#main-start title=main-start>main-start</a> margin edge of the first <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> on the line 2.410 is placed flush with the <a data-link-type=dfn href=#main-start title=main-start>main-start</a> edge of the line, 2.411 and each subsequent <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> is placed flush with the preceding item. 2.412 2.413 - <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valdef-justify-content.flex-end>flex-end<a class=self-link href=#valdef-justify-content.flex-end></a></dfn> 2.414 + <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valuedef-flex-end0>flex-end<a class=self-link href=#valuedef-flex-end0></a></dfn> 2.415 <dd> 2.416 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> are packed toward the end of the line. 2.417 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> are packed toward the end of the line. 2.418 The <a data-link-type=dfn href=#main-end title=main-end>main-end</a> margin edge of the last <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> 2.419 is placed flush with the <a data-link-type=dfn href=#main-end title=main-end>main-end</a> edge of the line, 2.420 and each preceding <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> is placed flush with the subsequent item. 2.421 2.422 - <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valdef-justify-content.center>center<a class=self-link href=#valdef-justify-content.center></a></dfn> 2.423 + <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valuedef-center0>center<a class=self-link href=#valuedef-center0></a></dfn> 2.424 <dd> 2.425 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> are packed toward the center of the line. 2.426 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> are packed toward the center of the line. 2.427 The <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> on the line are placed flush with each other 2.428 and aligned in the center of the line, 2.429 with equal amounts of empty space between the <a data-link-type=dfn href=#main-start title=main-start>main-start</a> edge of the line and the first item on the line 2.430 @@ -1850,12 +1850,12 @@ 2.431 (If the leftover free-space is negative, 2.432 the <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> will overflow equally in both directions.) 2.433 2.434 - <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valdef-justify-content.space-between>space-between<a class=self-link href=#valdef-justify-content.space-between></a></dfn> 2.435 + <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valuedef-space-between0>space-between<a class=self-link href=#valuedef-space-between0></a></dfn> 2.436 <dd> 2.437 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> are evenly distributed in the line. 2.438 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> are evenly distributed in the line. 2.439 If the leftover free-space is negative 2.440 or there is only a single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> on the line, 2.441 - this value is identical to <a class=css-code data-link-for=justify-content data-link-type=value href=#valdef-justify-content.flex-start title=flex-start>flex-start</a>. 2.442 + this value is identical to <a class=css-code data-link-for=justify-content data-link-type=value href=#valuedef-flex-start0 title=flex-start>flex-start</a>. 2.443 Otherwise, 2.444 the <a data-link-type=dfn href=#main-start title=main-start>main-start</a> margin edge of the first <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> on the line 2.445 is placed flush with the <a data-link-type=dfn href=#main-start title=main-start>main-start</a> edge of the line, 2.446 @@ -1864,13 +1864,13 @@ 2.447 and the remaining <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> on the line are distributed 2.448 so that the spacing between any two adjacent items is the same. 2.449 2.450 - <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valdef-justify-content.space-around>space-around<a class=self-link href=#valdef-justify-content.space-around></a></dfn> 2.451 + <dt><dfn class=css-code data-dfn-for=justify-content data-dfn-type=value data-export="" id=valuedef-space-around0>space-around<a class=self-link href=#valuedef-space-around0></a></dfn> 2.452 <dd> 2.453 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> are evenly distributed in the line, 2.454 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> are evenly distributed in the line, 2.455 with half-size spaces on either end. 2.456 If the leftover free-space is negative or 2.457 there is only a single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> on the line, 2.458 - this value is identical to <a class=css-code data-link-for=justify-content data-link-type=value href=#valdef-justify-content.center title=center>center</a>. 2.459 + this value is identical to <a class=css-code data-link-for=justify-content data-link-type=value href=#valuedef-center0 title=center>center</a>. 2.460 Otherwise, the <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> on the line are distributed 2.461 such that the spacing between any two adjacent <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> on the line is the same, 2.462 and the spacing between the first/last <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> and the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> edges 2.463 @@ -1889,10 +1889,10 @@ 2.464 2.465 <table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-align-items>align-items<a class=self-link href=#propdef-align-items></a></dfn><tr><th>Value:<td class=prod>flex-start <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> flex-end <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> stretch<tr><th>Initial:<td>stretch<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-container title="flex containers">flex containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table> 2.466 2.467 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-align-self>align-self<a class=self-link href=#propdef-align-self></a></dfn><tr><th>Value:<td class=prod>auto <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> flex-start <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> flex-end <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> stretch<tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td><a class=css-code data-link-for=align-self data-link-type=value href=#valdef-justify-content.auto title=auto>auto</a> computes to parent’s <a class=property data-link-type=propdesc href=#propdef-align-items title=align-items>align-items</a> value; otherwise as specified</table> 2.468 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-align-self>align-self<a class=self-link href=#propdef-align-self></a></dfn><tr><th>Value:<td class=prod>auto <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> flex-start <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> flex-end <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> stretch<tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#flex-item title="flex items">flex items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td><a class=css-code data-link-for=align-self data-link-type=value href=#valuedef-auto title=auto>auto</a> computes to parent’s <a class=property data-link-type=propdesc href=#propdef-align-items title=align-items>align-items</a> value; otherwise as specified</table> 2.469 2.470 <p> 2.471 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> can be aligned in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a> of the current line of the flex container, 2.472 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> can be aligned in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a> of the current line of the flex container, 2.473 similar to <a class=property data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content</a> but in the perpendicular direction. 2.474 <a class=property data-link-type=propdesc href=#propdef-align-items title=align-items>align-items</a> sets the default alignment for all of the flex container’s <a data-link-type=dfn href=#flex-item title="flex items">items</a>, 2.475 including anonymous <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>. 2.476 @@ -1905,33 +1905,33 @@ 2.477 <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> has no effect. 2.478 2.479 <p> 2.480 - A value of <dfn class=css-code data-dfn-for=align-self data-dfn-type=value data-export="" id=valdef-justify-content.auto>auto<a class=self-link href=#valdef-justify-content.auto></a></dfn> for <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> 2.481 + A value of <dfn class=css-code data-dfn-for=align-self data-dfn-type=value data-export="" id=valuedef-auto>auto<a class=self-link href=#valuedef-auto></a></dfn> for <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> 2.482 computes to the value of <a class=property data-link-type=propdesc href=#propdef-align-items title=align-items>align-items</a> on the element’s parent, 2.483 - or <a class=css data-link-for=align-self data-link-type=maybe href="#valdef-align-items align-self.stretch" title=stretch>stretch</a> if the element has no parent. 2.484 + or <a class=css data-link-for=align-self data-link-type=maybe href=#valuedef-stretch0 title=stretch>stretch</a> if the element has no parent. 2.485 The alignments are defined as: 2.486 2.487 <dl data-dfn-for="align-items align-self" data-dfn-type=value> 2.488 - <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id="valdef-align-items align-self.flex-start">flex-start<a class=self-link href=#valdef-align-items%20align-self.flex-start></a></dfn> 2.489 + <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valuedef-flex-start1>flex-start<a class=self-link href=#valuedef-flex-start1></a></dfn> 2.490 <dd> 2.491 The <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> margin edge of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> 2.492 is placed flush with the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the line. 2.493 2.494 - <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id="valdef-align-items align-self.flex-end">flex-end<a class=self-link href=#valdef-align-items%20align-self.flex-end></a></dfn> 2.495 + <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valuedef-flex-end1>flex-end<a class=self-link href=#valuedef-flex-end1></a></dfn> 2.496 <dd> 2.497 The <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> margin edge of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> 2.498 is placed flush with the <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> edge of the line. 2.499 2.500 - <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id="valdef-align-items align-self.center">center<a class=self-link href=#valdef-align-items%20align-self.center></a></dfn> 2.501 + <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valuedef-center1>center<a class=self-link href=#valuedef-center1></a></dfn> 2.502 <dd> 2.503 The <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s margin box is centered in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a> within the line. 2.504 (If the <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of the flex line is less than that of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>, 2.505 it will overflow equally in both directions.) 2.506 2.507 - <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id="valdef-align-items align-self.baseline">baseline<a class=self-link href=#valdef-align-items%20align-self.baseline></a></dfn> 2.508 + <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valuedef-baseline>baseline<a class=self-link href=#valuedef-baseline></a></dfn> 2.509 <dd> 2.510 <p> 2.511 If the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s inline axis is the same as the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>, 2.512 - this value is identical to <a class=css-code data-link-for=align-self data-link-type=value href="#valdef-align-items align-self.flex-start" title=flex-start>flex-start</a>. 2.513 + this value is identical to <a class=css-code data-link-for=align-self data-link-type=value href=#valuedef-flex-start1 title=flex-start>flex-start</a>. 2.514 2.515 <p> 2.516 Otherwise, 2.517 @@ -1942,7 +1942,7 @@ 2.518 is placed flush against the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the line. 2.519 2.520 2.521 - <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id="valdef-align-items align-self.stretch">stretch<a class=self-link href=#valdef-align-items%20align-self.stretch></a></dfn> 2.522 + <dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valuedef-stretch0>stretch<a class=self-link href=#valuedef-stretch0></a></dfn> 2.523 <dd> 2.524 If the <a data-link-type=dfn href=#cross-size-property title="cross size property">cross size property</a> of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> computes to <span class=css data-link-for=width data-link-type=maybe title=auto>auto</span>, 2.525 the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> is <dfn data-dfn-for="" data-dfn-type=dfn data-noexport="" id=stretched>stretched<a class=self-link href=#stretched></a></dfn>. 2.526 @@ -1977,21 +1977,21 @@ 2.527 Values have the following meanings: 2.528 2.529 <dl data-dfn-for=align-content data-dfn-type=value> 2.530 - <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valdef-align-content.flex-start>flex-start<a class=self-link href=#valdef-align-content.flex-start></a></dfn> 2.531 + <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valuedef-flex-start>flex-start<a class=self-link href=#valuedef-flex-start></a></dfn> 2.532 <dd> 2.533 Lines are packed toward the start of the flex container. 2.534 The <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the first line in the flex container 2.535 is placed flush with the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the flex container, 2.536 and each subsequent line is placed flush with the preceding line. 2.537 2.538 - <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valdef-align-content.flex-end>flex-end<a class=self-link href=#valdef-align-content.flex-end></a></dfn> 2.539 + <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valuedef-flex-end>flex-end<a class=self-link href=#valuedef-flex-end></a></dfn> 2.540 <dd> 2.541 Lines are packed toward the end of the flex container. 2.542 The <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> edge of the last line 2.543 is placed flush with the <a data-link-type=dfn href=#cross-end title=cross-end>cross-end</a> edge of the flex container, 2.544 and each preceding line is placed flush with the subsequent line. 2.545 2.546 - <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valdef-align-content.center>center<a class=self-link href=#valdef-align-content.center></a></dfn> 2.547 + <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valuedef-center>center<a class=self-link href=#valuedef-center></a></dfn> 2.548 <dd> 2.549 Lines are packed toward the center of the flex container. 2.550 The lines in the flex container are placed flush with each other 2.551 @@ -2004,11 +2004,11 @@ 2.552 (If the leftover free-space is negative, 2.553 the lines will overflow equally in both directions.) 2.554 2.555 - <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valdef-align-content.space-between>space-between<a class=self-link href=#valdef-align-content.space-between></a></dfn> 2.556 + <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valuedef-space-between>space-between<a class=self-link href=#valuedef-space-between></a></dfn> 2.557 <dd> 2.558 Lines are evenly distributed in the flex container. 2.559 If the leftover free-space is negative 2.560 - this value is identical to <a class=css-code data-link-for=align-content data-link-type=value href=#valdef-align-content.flex-start title=flex-start>flex-start</a>. 2.561 + this value is identical to <a class=css-code data-link-for=align-content data-link-type=value href=#valuedef-flex-start title=flex-start>flex-start</a>. 2.562 Otherwise, 2.563 the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the first line in the flex container 2.564 is placed flush with the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> content edge of the flex container, 2.565 @@ -2017,22 +2017,22 @@ 2.566 and the remaining lines in the flex container are distributed 2.567 so that the spacing between any two adjacent lines is the same. 2.568 2.569 - <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valdef-align-content.space-around>space-around<a class=self-link href=#valdef-align-content.space-around></a></dfn> 2.570 + <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valuedef-space-around>space-around<a class=self-link href=#valuedef-space-around></a></dfn> 2.571 <dd> 2.572 Lines are evenly distributed in the flex container, 2.573 with half-size spaces on either end. 2.574 If the leftover free-space is negative 2.575 - this value is identical to <a class=css-code data-link-for=align-content data-link-type=value href=#valdef-align-content.center title=center>center</a>. 2.576 + this value is identical to <a class=css-code data-link-for=align-content data-link-type=value href=#valuedef-center title=center>center</a>. 2.577 Otherwise, the lines in the flex container are distributed 2.578 such that the spacing between any two adjacent lines is the same, 2.579 and the spacing between the first/last lines and the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> edges 2.580 is half the size of the spacing between <a data-link-type=dfn href=#flex-line title="flex lines">flex lines</a>. 2.581 2.582 - <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valdef-align-content.stretch>stretch<a class=self-link href=#valdef-align-content.stretch></a></dfn> 2.583 + <dt><dfn class=css-code data-dfn-for=align-content data-dfn-type=value data-export="" id=valuedef-stretch>stretch<a class=self-link href=#valuedef-stretch></a></dfn> 2.584 <dd> 2.585 Lines stretch to take up the remaining space. 2.586 If the leftover free-space is negative, 2.587 - this value is identical to <a class=css-code data-link-for=align-content data-link-type=value href=#valdef-align-content.flex-start title=flex-start>flex-start</a>. 2.588 + this value is identical to <a class=css-code data-link-for=align-content data-link-type=value href=#valuedef-flex-start title=flex-start>flex-start</a>. 2.589 Otherwise, 2.590 the free-space is split equally between all of the lines, 2.591 increasing their cross size. 2.592 @@ -2105,11 +2105,11 @@ 2.593 2.594 <p> 2.595 When <a href=http://www.w3.org/TR/CSS21/tables.html#height-layout>determining the baseline of a table cell</a>, 2.596 - a flex container provides a baseline just as a line box or table-row does. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a> 2.597 + a flex container provides a baseline just as a line box or table-row does. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a> 2.598 2.599 <p> 2.600 See <a href=http://www.w3.org/TR/css3-align/#baseline-rules>Baseline Rules</a> 2.601 - in <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-align title=biblio-css3-align>[CSS3-ALIGN]</a> for more information on baseline alignment. 2.602 + in <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-align title=biblio-CSS3-ALIGN>[CSS3-ALIGN]</a> for more information on baseline alignment. 2.603 2.604 2.605 2.606 @@ -2199,7 +2199,7 @@ 2.607 If the flex item has ... 2.608 <ul> 2.609 <li>an intrinsic aspect ratio, 2.610 - <li>a <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> of <a class=css data-link-for=flex-basis data-link-type=maybe href=#valdef-flex.main-size title=main-size>main-size</a>, and 2.611 + <li>a <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> of <a class=css data-link-for=flex-basis data-link-type=maybe href=#valuedef-main-size title=main-size>main-size</a>, and 2.612 <li>a <a data-link-type=dfn href=#definite title=definite>definite</a> <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> 2.613 </ul> 2.614 then the <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a> is calculated from its inner <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> 2.615 @@ -2208,7 +2208,7 @@ 2.616 <li> 2.617 If the <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a> or depends on its available size, 2.618 and the flex container is being sized under a min-content or max-content constraint 2.619 - (e.g. when performing <a href=http://www.w3.org/TR/CSS21/tables.html#auto-table-layout>automatic table layout</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>), 2.620 + (e.g. when performing <a href=http://www.w3.org/TR/CSS21/tables.html#auto-table-layout>automatic table layout</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>), 2.621 size the item under that constraint. 2.622 The <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a> is the item’s resulting main size. 2.623 2.624 @@ -2218,7 +2218,7 @@ 2.625 the available main size is infinite, 2.626 and the flex item’s inline axis is parallel to the main axis, 2.627 lay the item out using 2.628 - <a href=http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows>the rules for a box in an orthogonal flow</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-writing-modes title=biblio-css3-writing-modes>[CSS3-WRITING-MODES]</a>. 2.629 + <a href=http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows>the rules for a box in an orthogonal flow</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-writing-modes title=biblio-CSS3-WRITING-MODES>[CSS3-WRITING-MODES]</a>. 2.630 The <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a> is the item’s max-content main size. 2.631 2.632 <li> 2.633 @@ -2228,7 +2228,7 @@ 2.634 treating a <a data-link-type=dfn href=#main-size title="main size">main size</a> of <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a> as <span class=css data-link-type=maybe title=max-content>max-content</span>. 2.635 If a <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> is needed to determine the <a data-link-type=dfn href=#main-size title="main size">main size</a> 2.636 (e.g. when the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <a data-link-type=dfn href=#main-size title="main size">main size</a> is in its block axis) 2.637 - and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s cross size is <a class=css data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a> and not <a data-link-type=dfn href=#definite title=definite>definite</a>, 2.638 + and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s cross size is <a class=css data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a> and not <a data-link-type=dfn href=#definite title=definite>definite</a>, 2.639 in this calculation use <span class=css data-link-type=maybe title=fit-content>fit-content</span> as the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>. 2.640 The <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a> is the item’s resulting <a data-link-type=dfn href=#main-size title="main size">main size</a>. 2.641 2.642 @@ -2265,8 +2265,8 @@ 2.643 If the very first uncollected item wouldn’t fit, 2.644 collect just it into the line. 2.645 A break is forced wherever 2.646 - the CSS2.1 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/page.html#propdef-page-break-before title=page-break-before>page-break-before</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/page.html#propdef-page-break-after title=page-break-after>page-break-after</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a> 2.647 - or the CSS3 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-before title=break-before>break-before</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-after title=break-after>break-after</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-break title=biblio-css3-break>[CSS3-BREAK]</a> properties 2.648 + the CSS2.1 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/page.html#propdef-page-break-before title=page-break-before>page-break-before</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/page.html#propdef-page-break-after title=page-break-after>page-break-after</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a> 2.649 + or the CSS3 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-before title=break-before>break-before</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#break-after title=break-after>break-after</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-break title=biblio-CSS3-BREAK>[CSS3-BREAK]</a> properties 2.650 specify a fragmentation break. 2.651 2.652 <p> 2.653 @@ -2313,7 +2313,7 @@ 2.654 <ol> 2.655 <li> 2.656 Collect all the flex items whose inline-axis is parallel to the main-axis, 2.657 - whose <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> is <a class=css data-link-for=align-self data-link-type=maybe href="#valdef-align-items align-self.baseline" title=baseline>baseline</a>, 2.658 + whose <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> is <a class=css data-link-for=align-self data-link-type=maybe href=#valuedef-baseline title=baseline>baseline</a>, 2.659 and whose cross-axis margins are both non-<a class=css-code data-link-for=margin data-link-type=value title=auto>auto</a>. 2.660 Find the largest of the distances between each item’s baseline and its hypothetical outer cross-start edge, 2.661 and the largest of the distances between each item’s baseline and its hypothetical outer cross-end edge, 2.662 @@ -2337,7 +2337,7 @@ 2.663 <li id=algo-line-stretch><a class=self-link href=#algo-line-stretch></a> 2.664 <strong>Handle 'align-content: stretch'.</strong> 2.665 If the flex container has a <a data-link-type=dfn href=#definite title=definite>definite</a> cross size, 2.666 - <a class=property data-link-type=propdesc href=#propdef-align-content title=align-content>align-content</a> is <a class=css-code data-link-for=align-content data-link-type=value href=#valdef-align-content.stretch title=stretch>stretch</a>, 2.667 + <a class=property data-link-type=propdesc href=#propdef-align-content title=align-content>align-content</a> is <a class=css-code data-link-for=align-content data-link-type=value href=#valuedef-stretch title=stretch>stretch</a>, 2.668 and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size, 2.669 increase the cross size of each flex line by equal amounts 2.670 such that the sum of their cross sizes exactly equals the flex container’s inner cross size. 2.671 @@ -2727,7 +2727,7 @@ 2.672 when sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content</a>/<a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint title="max-content constraint">max-content constraint</a> (respectively). 2.673 2.674 <p> 2.675 - See <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-sizing title=biblio-css3-sizing>[CSS3-SIZING]</a> for a definition of the terms in this section. 2.676 + See <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-sizing title=biblio-CSS3-SIZING>[CSS3-SIZING]</a> for a definition of the terms in this section. 2.677 2.678 2.679 2.680 @@ -2747,7 +2747,7 @@ 2.681 The following breaking rules refer to the fragmentation container as the “page”. 2.682 The same rules apply to any other fragmenters. 2.683 (Substitute “page” with the appropriate fragmenter type as needed.) 2.684 - See the CSS3 Fragmentation Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-break title=biblio-css3-break>[CSS3-BREAK]</a>. 2.685 + See the CSS3 Fragmentation Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-break title=biblio-CSS3-BREAK>[CSS3-BREAK]</a>. 2.686 For readability, in this section the terms "row" and "column" refer to the relative orientation 2.687 of the flex container with respect to the block flow direction of the fragmentation context, 2.688 rather than to that of the flex container itself. 2.689 @@ -2783,7 +2783,7 @@ 2.690 In a column flex container, 2.691 <a href=http://www.w3.org/TR/css3-break/#btw-blocks>Class A break opportunities</a> occur between sibling flex items, 2.692 and <a href=http://www.w3.org/TR/css3-break/#end-block>Class C break opportunities</a> occur between the first/last flex items on a line and the flex container’s content edges. 2.693 - <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-break title=biblio-css3-break>[CSS3-BREAK]</a> 2.694 + <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-break title=biblio-CSS3-BREAK>[CSS3-BREAK]</a> 2.695 2.696 <li> 2.697 When a flex container is continued after a break, 2.698 @@ -2828,7 +2828,7 @@ 2.699 Advanced layout engines may be able to honor alignment across fragments. 2.700 2.701 <dl> 2.702 - <dt><a data-link-type=dfn href=#single-line title=single-line>Single-line</a> column flex container 2.703 + <dt><a data-link-type=dfn href=#single-line title=Single-line>Single-line</a> column flex container 2.704 <dd> 2.705 <ol> 2.706 <li> 2.707 @@ -2880,7 +2880,7 @@ 2.708 a block with in-flow children with same content, 2.709 same used size and same used margins. 2.710 2.711 - <dt><a data-link-type=dfn href=#multi-line title=multi-line>Multi-line</a> column flex container 2.712 + <dt><a data-link-type=dfn href=#multi-line title=Multi-line>Multi-line</a> column flex container 2.713 <dd> 2.714 <ol> 2.715 <li> 2.716 @@ -2944,12 +2944,12 @@ 2.717 If a flex item does not entirely fit on a single page, 2.718 it will <em>not</em> be paginated in <a data-link-type=dfn href=#multi-line title=multi-line>multi-line</a> column flex containers. 2.719 2.720 - <dt><a data-link-type=dfn href=#single-line title=single-line>Single-line</a> row flex container 2.721 + <dt><a data-link-type=dfn href=#single-line title=Single-line>Single-line</a> row flex container 2.722 <dd> 2.723 <ol> 2.724 <li> 2.725 Run the entire flex layout algorithm (without regards to pagination), 2.726 - except treat any <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> other than <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-writing-modes-3/#start title=start>start</a> or <a class=css data-link-type=maybe href="#valdef-align-items align-self.baseline" title=baseline>baseline</a> as <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-writing-modes-3/#start title=start>start</a>. 2.727 + except treat any <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> other than <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-writing-modes-3/#start title=start>start</a> or <a class=css data-link-type=maybe href=#valuedef-baseline title=baseline>baseline</a> as <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-writing-modes-3/#start title=start>start</a>. 2.728 2.729 <li> 2.730 If an unbreakable item doesn’t fit within the space left on the page, 2.731 @@ -2988,7 +2988,7 @@ 2.732 and aligned appropriately. 2.733 </ol> 2.734 2.735 - <dt><a data-link-type=dfn href=#multi-line title=multi-line>Multi-line</a> row flex container 2.736 + <dt><a data-link-type=dfn href=#multi-line title=Multi-line>Multi-line</a> row flex container 2.737 <dd> 2.738 <ol> 2.739 <li> 2.740 @@ -3126,7 +3126,7 @@ 2.741 as the layout algo no longer has a discontinuity in behavior there. 2.742 2.743 <li id=change-2012-min-width><a class=self-link href=#change-2012-min-width></a> 2.744 - Changed the behavior of the new <a class=css data-link-for=min-width data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a> initial value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a> to 2.745 + Changed the behavior of the new <a class=css data-link-for=min-width data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a> initial value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a> to 2.746 <ul> 2.747 <li>Take into account whether <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is <span class=css data-link-type=maybe title=visible>visible</span>, 2.748 since when <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is explicitly handled, it is confusing (and unnecessary) 2.749 @@ -3147,7 +3147,7 @@ 2.750 to help ensure that the item is large enough to fit its contents. 2.751 <p class=note> 2.752 It is intended that this will compute to the <span class=css data-link-type=maybe title=min-content>min-content</span> keyword 2.753 - when the specification defining it (<a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-sizing title=biblio-css3-sizing>[CSS3-SIZING]</a>) is sufficiently mature. 2.754 + when the specification defining it (<a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-sizing title=biblio-CSS3-SIZING>[CSS3-SIZING]</a>) is sufficiently mature. 2.755 2.756 <ins> 2.757 </ins><p>On a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> whose <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is not <span class=css data-link-for=overflow data-link-type=maybe title=visible>visible</span>, 2.758 @@ -3221,7 +3221,7 @@ 2.759 <blockquote> 2.760 <p><ins>If a <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> is needed to determine the <a data-link-type=dfn href=#main-size title="main size">main size</a> 2.761 (e.g. when the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <a data-link-type=dfn href=#main-size title="main size">main size</a> is in its block axis) 2.762 - and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s cross size is <a class=css data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a> and not <a data-link-type=dfn href=#definite title=definite>definite</a>, 2.763 + and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s cross size is <a class=css data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a> and not <a data-link-type=dfn href=#definite title=definite>definite</a>, 2.764 in this calculation use <span class=css data-link-type=maybe title=fit-content>fit-content</span> as the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>.</ins> 2.765 </blockquote> 2.766 <li id=change-2012-intrinsic-sizes><a class=self-link href=#change-2012-intrinsic-sizes></a> 2.767 @@ -3261,7 +3261,7 @@ 2.768 when sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content</a>/<a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint title="max-content constraint">max-content constraint</a> (respectively). 2.769 2.770 <p> 2.771 - See <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-sizing title=biblio-css3-sizing>[CSS3-SIZING]</a> for a definition of the terms in this section.</p> 2.772 + See <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-sizing title=biblio-CSS3-SIZING>[CSS3-SIZING]</a> for a definition of the terms in this section.</p> 2.773 </ins> 2.774 </blockquote> 2.775 <li id=change-2012-flex-line-bug><a class=self-link href=#change-2012-flex-line-bug></a> 2.776 @@ -3288,12 +3288,12 @@ 2.777 (<a href=http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-18>Issue 18</a>) 2.778 <blockquote> 2.779 <p> 2.780 - <a data-link-type=dfn href=#flex-item title="flex items">Flex items</a> paint exactly the same as <del>block-level elements in the normal flow</del> <ins>inline blocks <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a></ins>. 2.781 + <a data-link-type=dfn href=#flex-item title="Flex items">Flex items</a> paint exactly the same as <del>block-level elements in the normal flow</del> <ins>inline blocks <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a></ins>. 2.782 </blockquote> 2.783 <li id=change-2012-flex-basis-zero><a class=self-link href=#change-2012-flex-basis-zero></a> 2.784 An omitted <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> component of the <a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> shorthand 2.785 now resolves to <span class=css data-link-type=maybe title=0%>0%</span> instead of <span class=css data-link-type=maybe title=0px>0px</span>. 2.786 - Because percentages resolved against indefinite sizes behave as <a class=css data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a>, 2.787 + Because percentages resolved against indefinite sizes behave as <a class=css data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a>, 2.788 this gives better behavior in shrink-wrapped flex containers. 2.789 (<a href=http://dev.w3.org/csswg/css-flexbox-1/issues-cr-2012#issue-20>Issue 20</a>) 2.790 <blockquote> 2.791 @@ -3322,17 +3322,17 @@ 2.792 2.793 <del> 2.794 </del><p> 2.795 - However, if both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a> or both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a> are <a class=css data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a>, 2.796 + However, if both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a> or both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a> are <a class=css data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a>, 2.797 then the used value of those properties 2.798 are computed from its <dfn data-dfn-type=dfn data-noexport="" id=flex-item-static-position>static position<a class=self-link href=#flex-item-static-position></a></dfn>, as follows: 2.799 2.800 <p> 2.801 - If both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a> are <a class=css data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a>, 2.802 + If both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a> are <a class=css data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a>, 2.803 the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> must be positioned so that 2.804 its <a data-link-type=dfn href=#main-start title=main-start>main-start</a> or <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge 2.805 (whichever is in the horizontal axis) 2.806 is aligned with the <a data-link-type=dfn href=#flex-item-static-position title="static position">static position</a>. 2.807 - If both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a> are <a class=css data-link-type=maybe href="#valdef-min-width min-height.auto" title=auto>auto</a>, 2.808 + If both <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a> are <a class=css data-link-type=maybe href=#valuedef-auto0 title=auto>auto</a>, 2.809 the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> must be positioned so that 2.810 its <a data-link-type=dfn href=#main-start title=main-start>main-start</a> or <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge 2.811 (whichever is in the vertical axis) 2.812 @@ -3371,7 +3371,7 @@ 2.813 2.814 <p class=note> 2.815 The static position is intended to more-or-less match the position of 2.816 - an anonymous 0×0 in-flow <a class=css data-link-for=align-self data-link-type=maybe href="#valdef-align-items align-self.flex-start" title=flex-start>flex-start</a>-aligned 2.817 + an anonymous 0×0 in-flow <a class=css data-link-for=align-self data-link-type=maybe href=#valuedef-flex-start1 title=flex-start>flex-start</a>-aligned 2.818 flex item that participates in flex layout, 2.819 the primary difference being that any packing spaces due to 2.820 <a class=css data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content: space-around</a> or <a class=css data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content: space-between</a> 2.821 @@ -3458,7 +3458,7 @@ 2.822 Clarified that <span class=css data-link-type=maybe title=::first-line>::first-line</span> and <span class=css data-link-type=maybe title=::first-letter>::first-letter</span> pseudo-elements 2.823 do not apply to flex containers (because they are not block containers). 2.824 <li id=clarify-2012-stretch-computed-auto><a class=self-link href=#clarify-2012-stretch-computed-auto></a> 2.825 - Clarify that <a class=css-code data-link-for=align-self data-link-type=value href="#valdef-align-items align-self.stretch" title=stretch>stretch</a> checks for the <em>computed</em> 2.826 + Clarify that <a class=css-code data-link-for=align-self data-link-type=value href=#valuedef-stretch0 title=stretch>stretch</a> checks for the <em>computed</em> 2.827 value of the cross-size property being <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a>, 2.828 which means that percentage cross-sizes that behave as <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a> 2.829 (because they don’t resolve against definite sizes) aren’t stretched. 2.830 @@ -3546,7 +3546,7 @@ 2.831 letters in this specification. 2.832 2.833 <p>All of the text of this specification is normative except sections 2.834 - explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=biblio-rfc2119>[RFC2119]</a></p> 2.835 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=biblio-RFC2119>[RFC2119]</a></p> 2.836 2.837 <p>Examples in this specification are introduced with the words "for example" 2.838 or are set apart from the normative text with <code>class="example"</code>, 2.839 @@ -3561,6 +3561,14 @@ 2.840 2.841 <p class=note>Note, this is an informative note.</p> 2.842 2.843 + <p>Advisements are normative sections styled to evoke special attention and are 2.844 + set apart from other normative text with <code><strong class="advisement"></code>, like 2.845 + this: 2.846 + 2.847 + <strong class=advisement> 2.848 + UAs MUST provide an accessible alternative. 2.849 + </strong> 2.850 + 2.851 <h3 class="no-ref heading settled heading" id=conformance-classes><span class=content> 2.852 Conformance classes</span><a class=self-link href=#conformance-classes></a></h3> 2.853 2.854 @@ -3679,17 +3687,17 @@ 2.855 <li>align-content, <a href=#propdef-align-content title="section 8.4">8.4</a> 2.856 <li>align-items, <a href=#propdef-align-items title="section 8.3">8.3</a> 2.857 <li>align-self, <a href=#propdef-align-self title="section 8.3">8.3</a> 2.858 -<li>auto<ul><li>value for min-width, min-height, <a href="#valdef-min-width min-height.auto" title="section 4.5">4.5</a> 2.859 -<li>value for flex, <a href=#valdef-flex.auto title="section 7.1">7.1</a> 2.860 -<li>value for align-self, <a href=#valdef-justify-content.auto title="section 8.3">8.3</a> 2.861 -</ul><li>baseline, <a href="#valdef-align-items align-self.baseline" title="section 8.3">8.3</a> 2.862 -<li>center<ul><li>value for justify-content, <a href=#valdef-justify-content.center title="section 8.2">8.2</a> 2.863 -<li>value for align-items, align-self, <a href="#valdef-align-items align-self.center" title="section 8.3">8.3</a> 2.864 -<li>value for align-content, <a href=#valdef-align-content.center title="section 8.4">8.4</a> 2.865 +<li>auto<ul><li>value for min-width, min-height, <a href=#valuedef-auto0 title="section 4.5">4.5</a> 2.866 +<li>value for flex, <a href=#valuedef-auto1 title="section 7.1">7.1</a> 2.867 +<li>value for align-self, <a href=#valuedef-auto title="section 8.3">8.3</a> 2.868 +</ul><li>baseline, <a href=#valuedef-baseline title="section 8.3">8.3</a> 2.869 +<li>center<ul><li>value for justify-content, <a href=#valuedef-center0 title="section 8.2">8.2</a> 2.870 +<li>value for align-items, align-self, <a href=#valuedef-center1 title="section 8.3">8.3</a> 2.871 +<li>value for align-content, <a href=#valuedef-center title="section 8.4">8.4</a> 2.872 </ul><li>collapsed, <a href=#collapsed-flex-item title="section 4.4">4.4</a> 2.873 <li>collapsed flex item, <a href=#collapsed-flex-item title="section 4.4">4.4</a> 2.874 -<li>column, <a href=#valdef-flex-direction.column title="section 5.1">5.1</a> 2.875 -<li>column-reverse, <a href=#valdef-flex-direction.column-reverse title="section 5.1">5.1</a> 2.876 +<li>column, <a href=#valuedef-column title="section 5.1">5.1</a> 2.877 +<li>column-reverse, <a href=#valuedef-column-reverse title="section 5.1">5.1</a> 2.878 <li>cross axis, <a href=#cross-axis title="section 2">2</a> 2.879 <li>cross-axis, <a href=#cross-axis title="section 2">2</a> 2.880 <li>cross-axis baseline, <a href=#cross-axis-baseline title="section 8.5">8.5</a> 2.881 @@ -3701,33 +3709,33 @@ 2.882 <li>definite, <a href=#definite title="section 9">9</a> 2.883 <li>definite size, <a href=#definite title="section 9">9</a> 2.884 <li>desired free space, <a href=#desired-free-space title="section 9.7.1">9.7.1</a> 2.885 -<li>flex<ul><li>value for display, <a href=#valdef-display.flex title="section 3">3</a> 2.886 +<li>flex<ul><li>value for display, <a href=#valuedef-flex title="section 3">3</a> 2.887 <li>(property), <a href=#propdef-flex title="section 7.1">7.1</a> 2.888 </ul><li>flex base size, <a href=#flex-base-size title="section 9.2">9.2</a> 2.889 <li>flex basis, <a href=#flex-basis title="section 7.1">7.1</a> 2.890 -<li><‘flex-basis’>, <a href=#valdef-flex.flex-basis title="section 7.1">7.1</a> 2.891 +<li><‘flex-basis’>, <a href=#valuedef-flex-basis title="section 7.1">7.1</a> 2.892 <li>flex-basis, <a href=#propdef-flex-basis title="section 7.3.3">7.3.3</a> 2.893 <li>flex container, <a href=#flex-container title="section 2">2</a> 2.894 <li>flex-direction, <a href=#propdef-flex-direction title="section 5.1">5.1</a> 2.895 <li>flex direction, <a href=#flex-direction title="section 2">2</a> 2.896 -<li>flex-end<ul><li>value for justify-content, <a href=#valdef-justify-content.flex-end title="section 8.2">8.2</a> 2.897 -<li>value for align-items, align-self, <a href="#valdef-align-items align-self.flex-end" title="section 8.3">8.3</a> 2.898 -<li>value for align-content, <a href=#valdef-align-content.flex-end title="section 8.4">8.4</a> 2.899 +<li>flex-end<ul><li>value for justify-content, <a href=#valuedef-flex-end0 title="section 8.2">8.2</a> 2.900 +<li>value for align-items, align-self, <a href=#valuedef-flex-end1 title="section 8.3">8.3</a> 2.901 +<li>value for align-content, <a href=#valuedef-flex-end title="section 8.4">8.4</a> 2.902 </ul><li>flex-flow, <a href=#propdef-flex-flow title="section 5.3">5.3</a> 2.903 <li>flex formatting context, <a href=#flex-formatting-context title="section 3">3</a> 2.904 <li>flex-grow, <a href=#propdef-flex-grow title="section 7.3.1">7.3.1</a> 2.905 -<li><‘flex-grow’>, <a href=#valdef-flex.flex-grow title="section 7.1">7.1</a> 2.906 +<li><‘flex-grow’>, <a href=#valuedef-flex-grow title="section 7.1">7.1</a> 2.907 <li>flex grow factor, <a href=#flex-grow-factor title="section 7.1">7.1</a> 2.908 <li>flexible length, <a href=#flexible-length title="section 7.1">7.1</a> 2.909 <li>flex item, <a href=#flex-item title="section 2">2</a> 2.910 <li>flex layout, <a href=#flex-layout title="section 1">1</a> 2.911 <li>flex line, <a href=#flex-line title="section 6">6</a> 2.912 -<li><‘flex-shrink’>, <a href=#valdef-flex.flex-shrink title="section 7.1">7.1</a> 2.913 +<li><‘flex-shrink’>, <a href=#valuedef-flex-shrink title="section 7.1">7.1</a> 2.914 <li>flex-shrink, <a href=#propdef-flex-shrink title="section 7.3.2">7.3.2</a> 2.915 <li>flex shrink factor, <a href=#flex-shrink-factor title="section 7.1">7.1</a> 2.916 -<li>flex-start<ul><li>value for justify-content, <a href=#valdef-justify-content.flex-start title="section 8.2">8.2</a> 2.917 -<li>value for align-items, align-self, <a href="#valdef-align-items align-self.flex-start" title="section 8.3">8.3</a> 2.918 -<li>value for align-content, <a href=#valdef-align-content.flex-start title="section 8.4">8.4</a> 2.919 +<li>flex-start<ul><li>value for justify-content, <a href=#valuedef-flex-start0 title="section 8.2">8.2</a> 2.920 +<li>value for align-items, align-self, <a href=#valuedef-flex-start1 title="section 8.3">8.3</a> 2.921 +<li>value for align-content, <a href=#valuedef-flex-start title="section 8.4">8.4</a> 2.922 </ul><li>flex-wrap, <a href=#propdef-flex-wrap title="section 5.2">5.2</a> 2.923 <li>free space, <a href=#free-space title="section 9.7.1">9.7.1</a> 2.924 <li>hypothetical cross size, <a href=#hypothetical-cross-size title="section 9.4">9.4</a> 2.925 @@ -3735,15 +3743,15 @@ 2.926 <li>indefinite, <a href=#indefinite title="section 9">9</a> 2.927 <li>indefinite size, <a href=#indefinite title="section 9">9</a> 2.928 <li>initial free space, <a href=#initial-free-space title="section 9.7.2">9.7.2</a> 2.929 -<li>inline-flex, <a href=#valdef-display.inline-flex title="section 3">3</a> 2.930 -<li><integer>, <a href=#valdef-flex-wrap.integer title="section 5.4">5.4</a> 2.931 +<li>inline-flex, <a href=#valuedef-inline-flex title="section 3">3</a> 2.932 +<li><integer>, <a href=#valuedef-integer title="section 5.4">5.4</a> 2.933 <li>justify-content, <a href=#propdef-justify-content title="section 8.2">8.2</a> 2.934 <li>main-axis, <a href=#main-axis title="section 2">2</a> 2.935 <li>main axis, <a href=#main-axis title="section 2">2</a> 2.936 <li>main-axis baseline, <a href=#main-axis-baseline title="section 8.5">8.5</a> 2.937 <li>main dimension, <a href=#main-dimension title="section 2">2</a> 2.938 <li>main-end, <a href=#main-end title="section 2">2</a> 2.939 -<li>main-size, <a href=#valdef-flex.main-size title="section 7.3.3">7.3.3</a> 2.940 +<li>main-size, <a href=#valuedef-main-size title="section 7.3.3">7.3.3</a> 2.941 <li>main size, <a href=#main-size title="section 2">2</a> 2.942 <li>main size property, <a href=#main-size-property title="section 2">2</a> 2.943 <li>main-start, <a href=#main-start title="section 2">2</a> 2.944 @@ -3752,33 +3760,33 @@ 2.945 <li>min-content cross size, <a href=#min-content-cross-size title="section 9.8">9.8</a> 2.946 <li>min-content main size, <a href=#min-content-main-size title="section 9.8">9.8</a> 2.947 <li>multi-line, <a href=#multi-line title="section 6">6</a> 2.948 -<li>none, <a href=#valdef-flex.none title="section 7.1">7.1</a> 2.949 +<li>none, <a href=#valuedef-none title="section 7.1">7.1</a> 2.950 <li>normalized free space, <a href=#normalized-free-space title="section 9.7.1">9.7.1</a> 2.951 -<li>nowrap, <a href=#valdef-flex-wrap.nowrap title="section 5.2">5.2</a> 2.952 -<li><number><ul><li>value for flex-grow, <a href=#valdef-flex.number title="section 7.3.1">7.3.1</a> 2.953 -<li>value for flex-shrink, <a href=#valdef-flex.number title="section 7.3.2">7.3.2</a> 2.954 +<li>nowrap, <a href=#valuedef-nowrap title="section 5.2">5.2</a> 2.955 +<li><number><ul><li>value for flex-grow, <a href=#valuedef-number0 title="section 7.3.1">7.3.1</a> 2.956 +<li>value for flex-shrink, <a href=#valuedef-number title="section 7.3.2">7.3.2</a> 2.957 </ul><li>order, <a href=#propdef-order title="section 5.4">5.4</a> 2.958 <li>order-modified document order, <a href=#order-modified-document-order title="section 5.4">5.4</a> 2.959 <li>participates in baseline alignment, <a href=#baseline-participation title="section 8.3">8.3</a> 2.960 <li>remaining free space, <a href=#remaining-free-space title="section 9.7.2">9.7.2</a> 2.961 -<li>row, <a href=#valdef-flex-direction.row title="section 5.1">5.1</a> 2.962 -<li>row-reverse, <a href=#valdef-flex-direction.row-reverse title="section 5.1">5.1</a> 2.963 +<li>row, <a href=#valuedef-row title="section 5.1">5.1</a> 2.964 +<li>row-reverse, <a href=#valuedef-row-reverse title="section 5.1">5.1</a> 2.965 <li>scaled flex factor, <a href=#scaled-flex-factor title="section 9.7.1">9.7.1</a> 2.966 <li>scaled flex factor sum, <a href=#scaled-flex-factor-sum title="section 9.7.1">9.7.1</a> 2.967 <li>scaled flex shrink factor, <a href=#scaled-flex-shrink-factor title="section 9.7.2">9.7.2</a> 2.968 <li>single-line, <a href=#single-line title="section 6">6</a> 2.969 -<li>space-around<ul><li>value for justify-content, <a href=#valdef-justify-content.space-around title="section 8.2">8.2</a> 2.970 -<li>value for align-content, <a href=#valdef-align-content.space-around title="section 8.4">8.4</a> 2.971 -</ul><li>space-between<ul><li>value for justify-content, <a href=#valdef-justify-content.space-between title="section 8.2">8.2</a> 2.972 -<li>value for align-content, <a href=#valdef-align-content.space-between title="section 8.4">8.4</a> 2.973 +<li>space-around<ul><li>value for justify-content, <a href=#valuedef-space-around0 title="section 8.2">8.2</a> 2.974 +<li>value for align-content, <a href=#valuedef-space-around title="section 8.4">8.4</a> 2.975 +</ul><li>space-between<ul><li>value for justify-content, <a href=#valuedef-space-between0 title="section 8.2">8.2</a> 2.976 +<li>value for align-content, <a href=#valuedef-space-between title="section 8.4">8.4</a> 2.977 </ul><li>static position, <a href=#flex-item-static-position title="section Unnumbered section">Unnumbered section</a> 2.978 -<li>stretch<ul><li>value for align-items, align-self, <a href="#valdef-align-items align-self.stretch" title="section 8.3">8.3</a> 2.979 -<li>value for align-content, <a href=#valdef-align-content.stretch title="section 8.4">8.4</a> 2.980 +<li>stretch<ul><li>value for align-items, align-self, <a href=#valuedef-stretch0 title="section 8.3">8.3</a> 2.981 +<li>value for align-content, <a href=#valuedef-stretch title="section 8.4">8.4</a> 2.982 </ul><li>stretched, <a href=#stretched title="section 8.3">8.3</a> 2.983 <li>strut size, <a href=#strut-size title="section 9.4">9.4</a> 2.984 <li>target main size, <a href=#target-main-size title="section 9.7.2">9.7.2</a> 2.985 -<li>wrap, <a href=#valdef-flex-wrap.wrap title="section 5.2">5.2</a> 2.986 -<li>wrap-reverse, <a href=#valdef-flex-wrap.wrap-reverse title="section 5.2">5.2</a> 2.987 +<li>wrap, <a href=#valuedef-wrap title="section 5.2">5.2</a> 2.988 +<li>wrap-reverse, <a href=#valuedef-wrap-reverse title="section 5.2">5.2</a> 2.989 </ul></div> 2.990 2.991 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
