changeset
Markup and linking fixes.
Sun, 05 Aug 2012 20:49:51 -0700
- author
- fantasai <fantasai.cvs@inkedblade.net>
- date
- Sun, 05 Aug 2012 20:49:51 -0700
- changeset 6356
- b2a41fac8bd9
- parent 6355
- 15c32dca2e6a
- child 6357
- 4e1547aca385
Markup and linking fixes.
| css3-flexbox/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-flexbox/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-flexbox/Overview.html Sat Aug 04 20:58:49 2012 -0700 1.2 +++ b/css3-flexbox/Overview.html Sun Aug 05 20:49:51 2012 -0700 1.3 @@ -206,11 +206,11 @@ 1.4 1.5 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 1.6 1.7 - <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 5 August 2012</h2> 1.8 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 6 August 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120805/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120805/</a>--> 1.13 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120806/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120806/</a>--> 1.14 1.15 1.16 <dd><a 1.17 @@ -619,9 +619,9 @@ 1.18 later in the content to the top, and ‘<a href="#align-self"><code 1.19 class=property>align-self</code></a>’ to center it horizontally. 1.20 1.21 - <li> An ‘<a href="#align-self-auto"><code class=css>auto</code></a>’ 1.22 - margin above the purchase button forces it to the bottom of the entry 1.23 - box, regardless of the height of the description. 1.24 + <li> An <a href="#auto-margins">‘<code class=css>auto</code>’ 1.25 + margin</a> above the purchase button forces it to the bottom of the 1.26 + entry box, regardless of the height of the description. 1.27 </ul> 1.28 1.29 <pre> 1.30 @@ -756,7 +756,8 @@ 1.31 laid out using the flex layout model. 1.32 1.33 <p> Unlike block and inline layout, whose layout calculations are biased to 1.34 - the writing mode directions, flex layout is biased to the <a 1.35 + the <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-box">block 1.36 + and inline flow directions</a>, flex layout is biased to the <a 1.37 href="#flex-flow-property">flex flow</a> directions. To make it easier to 1.38 talk about flex layout, this section defines a set of flex flow–relative 1.39 terms. The ‘<a href="#flex-flow"><code 1.40 @@ -789,14 +790,14 @@ 1.41 1.42 <dt class=size>main size property 1.43 1.44 - <dd> A <a href="#flex-item"><i>flex item</i></a>‘<code class=css>s width 1.45 - or height, whichever is in the <a href="#main-dimension"><i>main 1.46 - dimension</i></a>, is the item</code>’s <dfn id=main-size>main 1.47 - size</dfn>. The <a href="#flex-item"><i>flex item</i></a>‘<code 1.48 - class=css>s <dfn id=main-size-property>main size property</dfn> is either 1.49 - the </code>’width' or ‘<code class=property>height</code>’ 1.50 - property, whichever is in the <a href="#main-dimension"><i>main 1.51 - dimension</i></a>. 1.52 + <dd> A <a href="#flex-item"><i>flex item</i></a>'s width or height, 1.53 + whichever is in the <a href="#main-dimension"><i>main dimension</i></a>, 1.54 + is the item's <dfn id=main-size>main size</dfn>. The <a 1.55 + href="#flex-item"><i>flex item</i></a>'s <dfn 1.56 + id=main-size-property>main size property</dfn> is either the ‘<code 1.57 + class=property>width</code>’ or ‘<code 1.58 + class=property>height</code>’ property, whichever is in the <a 1.59 + href="#main-dimension"><i>main dimension</i></a>. 1.60 </dl> 1.61 1.62 <dl id=cross> 1.63 @@ -829,10 +830,10 @@ 1.64 href="#cross-dimension"><i>cross dimension</i></a>. 1.65 </dl> 1.66 1.67 - <h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the 1.68 - ‘<a href="#flex"><code class=css>flex</code></a>’ and ‘<a 1.69 - href="#display-inline-flex"><code class=css>inline-flex</code></a>’ 1.70 - ‘<code class=property>display</code>’ values</h2> 1.71 + <h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the <a 1.72 + href="#display-flex">‘<code class=css>flex</code>’</a> and <a 1.73 + href="#display-inline-flex">‘<code class=css>inline-flex</code>’ 1.74 + ‘<code class=property>display</code>’ values</a></h2> 1.75 1.76 <table class=propdef> 1.77 <tbody> 1.78 @@ -892,13 +893,13 @@ 1.79 ‘<a href="#display-inline-flex"><code 1.80 class=css>inline-flex</code></a>’ and the element is floated or 1.81 absolutely positioned, the computed value of ‘<code 1.82 - class=property>display</code>’ is ‘<a href="#flex"><code 1.83 - class=css>flex</code></a>’. The table in <a 1.84 + class=property>display</code>’ is <a href="#display-flex">‘<code 1.85 + class=css>flex</code>’</a>. The table in <a 1.86 href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 1.87 9.7</a> is thus amended to contain an additional row, with ‘<a 1.88 href="#display-inline-flex"><code class=css>inline-flex</code></a>’ in 1.89 - the "Specified Value" column and ‘<a href="#flex"><code 1.90 - class=css>flex</code></a>’ in the "Computed Value" column. 1.91 + the "Specified Value" column and <a href="#display-flex">‘<code 1.92 + class=css>flex</code>’</a> in the "Computed Value" column. 1.93 1.94 <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2> 1.95 1.96 @@ -998,24 +999,21 @@ 1.97 href="#algo-flex-order">reordering step</a>. However, if both ‘<code 1.98 class=property>left</code>’ and ‘<code class=property>right</code>’ 1.99 or both ‘<code class=property>top</code>’ and ‘<code 1.100 - class=property>bottom</code>’ are ‘<a href="#align-self-auto"><code 1.101 - class=css>auto</code></a>’, then the used value of those properties are 1.102 - computed from its <dfn id=flex-item-static-position>static position</dfn>, 1.103 - as follows: 1.104 + class=property>bottom</code>’ are ‘<code class=css>auto</code>’, 1.105 + then the used value of those properties are computed from its <dfn 1.106 + id=flex-item-static-position>static position</dfn>, as follows: 1.107 1.108 <p> If both ‘<code class=property>left</code>’ and ‘<code 1.109 - class=property>right</code>’ are ‘<a href="#align-self-auto"><code 1.110 - class=css>auto</code></a>’, the <a href="#flex-item"><i>flex 1.111 - item</i></a> must be positioned so that its <a 1.112 - href="#main-start"><i>main-start</i></a> or <a 1.113 + class=property>right</code>’ are ‘<code class=css>auto</code>’, the 1.114 + <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 1.115 + <a href="#main-start"><i>main-start</i></a> or <a 1.116 href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 1.117 horizontal axis) is aligned with the <a 1.118 href="#flex-item-static-position"><i>static position</i></a>. If both 1.119 ‘<code class=property>top</code>’ and ‘<code 1.120 - class=property>bottom</code>’ are ‘<a href="#align-self-auto"><code 1.121 - class=css>auto</code></a>’, the <a href="#flex-item"><i>flex 1.122 - item</i></a> must be positioned so that its <a 1.123 - href="#main-start"><i>main-start</i></a> or <a 1.124 + class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the 1.125 + <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 1.126 + <a href="#main-start"><i>main-start</i></a> or <a 1.127 href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 1.128 vertical axis) is aligned with the <a 1.129 href="#flex-item-static-position"><i>static position</i></a>. 1.130 @@ -1078,11 +1076,11 @@ 1.131 <h3 id=painting><span class=secno>4.3. </span> Flex Item Painting</h3> 1.132 1.133 <p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as 1.134 - block-level elements in the normal flow, except that ‘<code 1.135 - class=property>z-index</code>’ values other than ‘<a 1.136 - href="#align-self-auto"><code class=css>auto</code></a>’ create a 1.137 - stacking context even if ‘<code class=property>position</code>’ is 1.138 - ‘<code class=css>static</code>’. 1.139 + block-level elements in the normal flow, except that <a 1.140 + href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">‘<code 1.141 + class=property>z-index</code>’</a> values other than ‘<code 1.142 + class=css>auto</code>’ create a stacking context even if ‘<code 1.143 + class=property>position</code>’ is ‘<code class=css>static</code>’. 1.144 1.145 <p class=note> Note: Descendants that are positioned outside a flex item 1.146 still participate in any stacking context established by the flex item. 1.147 @@ -1980,14 +1978,13 @@ 1.148 href="#main-size"><i>main size</i></a> of the <a href="#flex-item"><i>flex 1.149 item</i></a>, before free space is distributed according to the flex 1.150 ratios. If omitted, the <a href="#flex-basis"><i>flex basis</i></a> 1.151 - defaults to ‘<code class=css>0%</code>’. <span class=note>Note that 1.152 - this is different from the initial value of ‘<a 1.153 - href="#flex-basis0"><code class=property>flex-basis</code></a>’, which 1.154 - is ‘<a href="#align-self-auto"><code 1.155 - class=css>auto</code></a>’.</span> Zero values for the 1.156 - <var><'flex-basis'></var> component must be specified with a 1.157 - unit. Unitless zero will either be interpreted as one of the flex ratios, 1.158 - or will make the declaration invalid. 1.159 + defaults to the length zero. <span class=note>Note that this is different 1.160 + from the initial value of ‘<a href="#flex-basis0"><code 1.161 + class=property>flex-basis</code></a>’, which is <a 1.162 + href="#flex-basis-auto">‘<code class=css>auto</code>’</a>.</span> Zero 1.163 + values for the <var><'flex-basis'></var> component must be 1.164 + specified with a unit. Unitless zero will either be interpreted as one of 1.165 + the flex ratios, or will make the declaration invalid. 1.166 1.167 <p> The <var><'flex-grow'></var> and 1.168 <var><'flex-shrink'></var> components set the <dfn 1.169 @@ -2001,12 +1998,12 @@ 1.170 class=property>flex-grow</code></a>’, which is ‘<code 1.171 class=css>0</code>’.</span> 1.172 1.173 - <p> The keyword ‘<code class=property>none</code>’ computes to ‘<code 1.174 - class=css>0 0 auto</code>’. <figure> <img height=240 1.175 - src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A diagram showing 1.176 - the difference between "absolute" flex (starting from a basis of zero) and 1.177 - "relative" flex (starting from a basis of the item's content size). 1.178 - </figcaption> </figure> 1.179 + <p id=flex-none> The keyword ‘<code class=property>none</code>’ 1.180 + computes to ‘<code class=css>0 0 auto</code>’. <figure> <img 1.181 + height=240 src="images/rel-vs-abs-flex.svg" width=504> <figcaption> A 1.182 + diagram showing the difference between "absolute" flex (starting from a 1.183 + basis of zero) and "relative" flex (starting from a basis of the item's 1.184 + content size). </figcaption> </figure> 1.185 1.186 <h3 id=flex-examples><span class=secno>7.2. </span> Common Values of ‘<a 1.187 href="#flex"><code class=property>flex</code></a>’</h3> 1.188 @@ -2017,7 +2014,9 @@ 1.189 href="#flex"><code class=property>flex</code></a>’ values: 1.190 1.191 <dl> 1.192 - <dt>‘<code class=css>flex: initial</code>’ 1.193 + <dt id=flex-initial>‘<code class=css>flex: initial</code>’ 1.194 + 1.195 + <dt>‘<code class=css>flex: 0 auto</code>’ 1.196 1.197 <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. The value 1.198 sets the size of the item according to the ‘<code 1.199 @@ -2027,10 +2026,10 @@ 1.200 href="#min-size-auto">minimum</a> when there is insufficient space. (If 1.201 the ‘<code class=property>width</code>’/‘<code 1.202 class=property>height</code>’ used as the <a href="#flex-basis"><i>flex 1.203 - basis</i></a> computes to ‘<a href="#align-self-auto"><code 1.204 - class=css>auto</code></a>’, this will size the flex item based on its 1.205 - contents.) The alignment properties or ‘<a 1.206 - href="#align-self-auto"><code class=css>auto</code></a>’ margins may be 1.207 + basis</i></a> computes to ‘<code class=css>auto</code>’, this will 1.208 + size the flex item based on its contents.) The <a 1.209 + href="#alignment">alignment abilities</a> or <a 1.210 + href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be 1.211 used to align flex items within the flex container. 1.212 1.213 <dt>‘<code class=css>flex: auto</code>’ 1.214 @@ -2052,10 +2051,10 @@ 1.215 class=property>height</code>’ properties. To size things normally but 1.216 still use the <a href="#alignment">alignment abilities</a> of flex 1.217 layout, set all the flex items to ‘<code class=css>flex: none</code>’ 1.218 - and then use ‘<a href="#align-self-auto"><code 1.219 - class=css>auto</code></a>’ margins or the alignment properties. This is 1.220 - similar to ‘<code class=css>initial</code>’, except that flex items 1.221 - are not allowed to shrink, even in overflow situations. 1.222 + and then use ‘<code class=css>auto</code>’ margins or the alignment 1.223 + properties. This is similar to <a href="#flex-initial">‘<code 1.224 + class=css>initial</code>’</a>, except that flex items are not allowed 1.225 + to shrink, even in overflow situations. 1.226 1.227 <dt>‘<code class=css>flex: <positive-number></code>’ 1.228 1.229 @@ -2261,14 +2260,15 @@ 1.230 class=property>flex-basis</code></a>’ property sets the <a 1.231 href="#flex-basis"><i>flex basis</i></a>. Negative lengths are invalid. 1.232 1.233 - <p> If the computed value is ‘<a href="#align-self-auto"><code 1.234 - class=css>auto</code></a>’ on a <a href="#flex-item"><i>flex 1.235 - item</i></a>, the used value of ‘<a href="#flex-basis0"><code 1.236 - class=property>flex-basis</code></a>’ is the used value of the element's 1.237 - <a href="#main-size-property"><i>main size property</i></a>. Otherwise, 1.238 - the used value of ‘<a href="#flex-basis0"><code 1.239 - class=property>flex-basis</code></a>’ is resolved the same way as the <a 1.240 - href="#main-size-property"><i>main size property</i></a>. 1.241 + <p> If the computed value is <dfn id=flex-basis-auto 1.242 + title="flex-basis: auto">‘<code class=css>auto</code>’</dfn> on a <a 1.243 + href="#flex-item"><i>flex item</i></a>, the used value of ‘<a 1.244 + href="#flex-basis0"><code class=property>flex-basis</code></a>’ is the 1.245 + used value of the element's <a href="#main-size-property"><i>main size 1.246 + property</i></a>. Otherwise, the used value of ‘<a 1.247 + href="#flex-basis0"><code class=property>flex-basis</code></a>’ is 1.248 + resolved the same way as the <a href="#main-size-property"><i>main size 1.249 + property</i></a>. 1.250 1.251 <p> As with ‘<code class=property>width</code>’, percentage values of 1.252 ‘<a href="#flex-basis0"><code class=property>flex-basis</code></a>’ 1.253 @@ -2309,16 +2309,15 @@ 1.254 Box Alignment is finished and defines their effect for other layout modes. 1.255 1.256 1.257 - <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<a 1.258 - href="#align-self-auto"><code class=css>auto</code></a>’ margins</h3> 1.259 + <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with ‘<code 1.260 + class=css>auto</code>’ margins</h3> 1.261 1.262 <p> <em>This section is non-normative. The normative definition of how 1.263 margins affect flex items is in the <a href="#layout-algorithm">Flex 1.264 Layout Algorithm</a> section.</em> 1.265 1.266 - <p> Margins on flex items that are ‘<a href="#align-self-auto"><code 1.267 - class=css>auto</code></a>’ have an effect very similar to auto margins 1.268 - in normal flow: 1.269 + <p> Auto margins on flex items have an effect very similar to auto margins 1.270 + in block flow: 1.271 1.272 <ul> 1.273 <li> During calculations of flex bases and flexible lengths, auto margins 1.274 @@ -2337,12 +2336,11 @@ 1.275 margins will have stolen all the free space left over after flexing. 1.276 1.277 <div class=example> 1.278 - <p> One use of ‘<a href="#align-self-auto"><code 1.279 - class=css>auto</code></a>’ margins in the main axis is to separate flex 1.280 - items into distinct "groups". The following example shows how to use this 1.281 - to reproduce a common UI pattern - a single bar of actions with some 1.282 - aligned on the left and others aligned on the right. <figure> 1.283 - <figcaption> Sample rendering of the code below. </figcaption> 1.284 + <p> One use of ‘<code class=css>auto</code>’ margins in the main axis 1.285 + is to separate flex items into distinct "groups". The following example 1.286 + shows how to use this to reproduce a common UI pattern - a single bar of 1.287 + actions with some aligned on the left and others aligned on the right. 1.288 + <figure> <figcaption> Sample rendering of the code below. </figcaption> 1.289 <ul id=auto-bar> 1.290 <li><a href="#">About</a> 1.291 1.292 @@ -2375,8 +2373,8 @@ 1.293 1.294 <div class=example> 1.295 <p> The figure below illustrates the difference in cross-axis alignment in 1.296 - overflow situations between using ‘<a href="#align-self-auto"><code 1.297 - class=css>auto</code></a>’ margins and using the <a 1.298 + overflow situations between using <a href="#auto-margins">‘<code 1.299 + class=css>auto</code>’ margins</a> and using the <a 1.300 href="#align-items-property">alignment properties</a>. <figure> 1.301 <div style="display:table; margin: 0 auto 1em;"> 1.302 <div class=cross-auto-figure 1.303 @@ -2475,7 +2473,7 @@ 1.304 over the alignment of items when they overflow the line. 1.305 1.306 <dl> 1.307 - <dt><dfn id=justify-content-flex-start>‘<code 1.308 + <dt><dfn id=justify-flex-start>‘<code 1.309 class=css>flex-start</code>’</dfn> 1.310 1.311 <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the 1.312 @@ -2485,8 +2483,7 @@ 1.313 of the line, and each subsequent <a href="#flex-item"><i>flex 1.314 item</i></a> is placed flush with the preceding item. 1.315 1.316 - <dt><dfn id=justify-content-flex-end>‘<code 1.317 - class=css>flex-end</code>’</dfn> 1.318 + <dt><dfn id=justify-flex-end>‘<code class=css>flex-end</code>’</dfn> 1.319 1.320 <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the end 1.321 of the line. The <a href="#main-end"><i>main-end</i></a> margin edge of 1.322 @@ -2495,8 +2492,7 @@ 1.323 preceding <a href="#flex-item"><i>flex item</i></a> is placed flush with 1.324 the subsequent item. 1.325 1.326 - <dt><dfn id=justify-content-center>‘<code 1.327 - class=css>center</code>’</dfn> 1.328 + <dt><dfn id=justify-center>‘<code class=css>center</code>’</dfn> 1.329 1.330 <dd> <a href="#flex-item"><i>Flex items</i></a> are packed toward the 1.331 center of the line. The <a href="#flex-item"><i>flex items</i></a> on the 1.332 @@ -2508,14 +2504,14 @@ 1.333 free-space is negative, the <a href="#flex-item"><i>flex items</i></a> 1.334 will overflow equally in both directions.) 1.335 1.336 - <dt><dfn id=justify-content-space-between>‘<code 1.337 + <dt><dfn id=justify-space-between>‘<code 1.338 class=css>space-between</code>’</dfn> 1.339 1.340 <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in 1.341 the line. If the leftover free-space is negative or there is only a 1.342 single <a href="#flex-item"><i>flex item</i></a> on the line, this value 1.343 - is identical to ‘<a href="#align-content-flex-start"><code 1.344 - class=css>flex-start</code></a>’. Otherwise, the <a 1.345 + is identical to <a href="#justify-flex-start">‘<code 1.346 + class=css>flex-start</code>’</a>. Otherwise, the <a 1.347 href="#main-start"><i>main-start</i></a> margin edge of the first <a 1.348 href="#flex-item"><i>flex item</i></a> on the line is placed flush with 1.349 the <a href="#main-start"><i>main-start</i></a> edge of the line, the <a 1.350 @@ -2526,14 +2522,14 @@ 1.351 distributed so that the empty space between any two adjacent items is the 1.352 same. 1.353 1.354 - <dt><dfn id=justify-content-space-around>‘<code 1.355 + <dt><dfn id=justify-space-around>‘<code 1.356 class=css>space-around</code>’</dfn> 1.357 1.358 <dd> <a href="#flex-item"><i>Flex items</i></a> are evenly distributed in 1.359 the line, with half-size spaces on either end. If the leftover free-space 1.360 is negative or there is only a single <a href="#flex-item"><i>flex 1.361 - item</i></a> on the line, this value is identical to ‘<a 1.362 - href="#align-content-center"><code class=css>center</code></a>’. 1.363 + item</i></a> on the line, this value is identical to <a 1.364 + href="#justify-center">‘<code class=css>center</code>’</a>. 1.365 Otherwise, the <a href="#flex-item"><i>flex items</i></a> on the line are 1.366 distributed such that the empty space between any two adjacent <a 1.367 href="#flex-item"><i>flex items</i></a> on the line is the same, and the 1.368 @@ -2635,9 +2631,9 @@ 1.369 <tr> 1.370 <th>Computed Value: 1.371 1.372 - <td>‘<a href="#align-self-auto"><code class=css>auto</code></a>’ 1.373 - computes to parent's ‘<a href="#align-items"><code 1.374 - class=property>align-items</code></a>’; otherwise as specified 1.375 + <td>‘<code class=css>auto</code>’ computes to parent's ‘<a 1.376 + href="#align-items"><code class=property>align-items</code></a>’; 1.377 + otherwise as specified 1.378 1.379 <tr> 1.380 <th>Media: 1.381 @@ -2672,7 +2668,7 @@ 1.382 href="#align-items"><code class=property>align-items</code></a>’ on 1.383 their associated flex container.) 1.384 1.385 - <p> A value of <dfn id=align-self-auto>‘<code 1.386 + <p> A value of <dfn id=align-self-auto title="align-self: auto">‘<code 1.387 class=css>auto</code>’</dfn> for ‘<a href="#align-self"><code 1.388 class=property>align-self</code></a>’ computes to the value of ‘<a 1.389 href="#align-items"><code class=property>align-items</code></a>’ on the 1.390 @@ -2681,21 +2677,20 @@ 1.391 alignments are defined as: 1.392 1.393 <dl> 1.394 - <dt><dfn id=align-items-flex-start>‘<code 1.395 - class=css>flex-start</code>’</dfn> 1.396 + <dt><dfn id=align-flex-start>‘<code class=css>flex-start</code>’</dfn> 1.397 + 1.398 1.399 <dd> The <a href="#cross-start"><i>cross-start</i></a> margin edge of the 1.400 <a href="#flex-item"><i>flex item</i></a> is placed flush with the <a 1.401 href="#cross-start"><i>cross-start</i></a> edge of the line. 1.402 1.403 - <dt><dfn id=align-items-flex-end>‘<code 1.404 - class=css>flex-end</code>’</dfn> 1.405 + <dt><dfn id=align-flex-end>‘<code class=css>flex-end</code>’</dfn> 1.406 1.407 <dd> The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a 1.408 href="#flex-item"><i>flex item</i></a> is placed flush with the <a 1.409 href="#cross-end"><i>cross-end</i></a> edge of the line. 1.410 1.411 - <dt><dfn id=align-items-center>‘<code class=css>center</code>’</dfn> 1.412 + <dt><dfn id=align-center>‘<code class=css>center</code>’</dfn> 1.413 1.414 <dd> The <a href="#flex-item"><i>flex item</i></a>'s margin box is 1.415 centered in the <a href="#cross-axis"><i>cross axis</i></a> within the 1.416 @@ -2703,14 +2698,13 @@ 1.417 line is less than that of the <a href="#flex-item"><i>flex item</i></a>, 1.418 it will overflow equally in both directions.) 1.419 1.420 - <dt><dfn id=align-items-baseline>‘<code 1.421 - class=css>baseline</code>’</dfn> 1.422 + <dt><dfn id=align-baseline>‘<code class=css>baseline</code>’</dfn> 1.423 1.424 <dd> 1.425 <p> If the <a href="#flex-item"><i>flex item</i></a>'s inline axis 1.426 is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this 1.427 - value is identical to ‘<a href="#align-content-flex-start"><code 1.428 - class=css>flex-start</code></a>’. 1.429 + value is identical to <a href="#align-flex-start">‘<code 1.430 + class=css>flex-start</code>’</a>. 1.431 1.432 <p> Otherwise, it <dfn id=baseline-participation>participates in baseline 1.433 alignment</dfn>: all participating <a href="#flex-item"><i>flex 1.434 @@ -2720,17 +2714,16 @@ 1.435 against the <a href="#cross-start"><i>cross-start</i></a> edge of the 1.436 line. 1.437 1.438 - <dt><dfn id=align-items-stretch>‘<code class=css>stretch</code>’</dfn> 1.439 - 1.440 + <dt><dfn id=align-stretch>‘<code class=css>stretch</code>’</dfn> 1.441 1.442 <dd> 1.443 <p> If the <a href="#cross-size-property"><i>cross size property</i></a> 1.444 - of the <a href="#flex-item"><i>flex item</i></a> is ‘<a 1.445 - href="#align-self-auto"><code class=css>auto</code></a>’, its used 1.446 - value is the length necessary to make the <a href="#cross-size"><i>cross 1.447 - size</i></a> of the item's margin box as close to the same size as the 1.448 - line as possible, while still respecting the constraints imposed by 1.449 - ‘<code class=css>min/max-width/height</code>’. 1.450 + of the <a href="#flex-item"><i>flex item</i></a> is ‘<code 1.451 + class=css>auto</code>’, its used value is the length necessary to make 1.452 + the <a href="#cross-size"><i>cross size</i></a> of the item's margin box 1.453 + as close to the same size as the line as possible, while still 1.454 + respecting the constraints imposed by ‘<code 1.455 + class=css>min/max-width/height</code>’. 1.456 1.457 <p class=note> Note that if the flex container's height is constrained 1.458 this value may cause the contents of the <a href="#flex-item"><i>flex 1.459 @@ -2846,9 +2839,9 @@ 1.460 1.461 <dd> Lines are evenly distributed in the flex container. If the leftover 1.462 free-space is negative or there is only a single line in the flex 1.463 - container, this value is identical to ‘<a 1.464 - href="#align-content-flex-start"><code 1.465 - class=css>flex-start</code></a>’. Otherwise, the <a 1.466 + container, this value is identical to <a 1.467 + href=align-content-flex-start>‘<code 1.468 + class=css>flex-start</code>’</a>. Otherwise, the <a 1.469 href="#cross-start"><i>cross-start</i></a> edge of the first line in the 1.470 flex container is placed flush with the <a 1.471 href="#cross-start"><i>cross-start</i></a> content edge of the flex 1.472 @@ -2863,8 +2856,8 @@ 1.473 1.474 <dd> Lines are evenly distributed in the flex container, with half-size 1.475 spaces on either end. If the leftover free-space is negative or there is 1.476 - only a single line in the flex container, this value is identical to 1.477 - ‘<a href="#align-content-center"><code class=css>center</code></a>’. 1.478 + only a single line in the flex container, this value is identical to <a 1.479 + href=align-content-center>‘<code class=css>center</code>’</a>. 1.480 Otherwise, the lines in the flex container are distributed such that the 1.481 empty space between any two adjacent lines is the same, and the empty 1.482 space before the first and after the last lines in the flex container are 1.483 @@ -2874,9 +2867,9 @@ 1.484 class=css>stretch</code>’</dfn> 1.485 1.486 <dd> Lines stretch to take up the remaining space. If the leftover 1.487 - free-space is negative, this value is identical to ‘<a 1.488 - href="#align-content-flex-start"><code 1.489 - class=css>flex-start</code></a>’. Otherwise, the free-space is split 1.490 + free-space is negative, this value is identical to <a 1.491 + href="#align-content-flex-start">‘<code 1.492 + class=css>flex-start</code>’</a>. Otherwise, the free-space is split 1.493 equally between all of the lines, increasing their cross size. 1.494 </dl> 1.495 1.496 @@ -3086,20 +3079,19 @@ 1.497 <li> If the item has a <a href="#definite-size"><i>definite</i></a> flex 1.498 basis, that's the <a href="#flex-base-size"><i>flex base size</i></a>. 1.499 1.500 - <li> If the flex basis is ‘<a href="#align-self-auto"><code 1.501 - class=css>auto</code></a>’ or depends on its available size, and the 1.502 - flex container is being sized under a min-content or max-content 1.503 - constraint (e.g. when performing <a 1.504 + <li> If the flex basis is ‘<code class=css>auto</code>’ or depends 1.505 + on its available size, and the flex container is being sized under a 1.506 + min-content or max-content constraint (e.g. when performing <a 1.507 href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">automatic 1.508 table layout</a> <a href="#CSS21" 1.509 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), size the item under that 1.510 constraint. The <a href="#flex-base-size"><i>flex base size</i></a> is 1.511 the item's resulting main size. 1.512 1.513 - <li> Otherwise, if the flex basis is ‘<a href="#align-self-auto"><code 1.514 - class=css>auto</code></a>’ or depends on its available size, the 1.515 - available main size is infinite, and the flex item's inline axis is 1.516 - parallel to the main axis, lay the item out using <a 1.517 + <li> Otherwise, if the flex basis is ‘<code class=css>auto</code>’ 1.518 + or depends on its available size, the available main size is infinite, 1.519 + and the flex item's inline axis is parallel to the main axis, lay the 1.520 + item out using <a 1.521 href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the 1.522 rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES" 1.523 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 1.524 @@ -3107,10 +3099,10 @@ 1.525 max-content main size. 1.526 1.527 <li> Otherwise, lay out the item into the available space using its flex 1.528 - basis in place of its main size, and treating ‘<a 1.529 - href="#align-self-auto"><code class=css>auto</code></a>’ as ‘<code 1.530 - class=css>max-content</code>’. The <a href="#flex-base-size"><i>flex 1.531 - base size</i></a> is the item's resulting main size. 1.532 + basis in place of its main size, and treating ‘<code 1.533 + class=css>auto</code>’ as ‘<code class=css>max-content</code>’. 1.534 + The <a href="#flex-base-size"><i>flex base size</i></a> is the item's 1.535 + resulting main size. 1.536 </ul> 1.537 The <a href="#hypothetical-main-size"><i>hypothetical main size</i></a> 1.538 is the item's <a href="#flex-base-size"><i>flex base size</i></a> clamped 1.539 @@ -3126,9 +3118,8 @@ 1.540 size contribution of an item is its outer <a 1.541 href="#hypothetical-main-size"><i>hypothetical main size</i></a> when 1.542 sized under a min-content/max-content constraint (respectively). For this 1.543 - computation, ‘<a href="#align-self-auto"><code 1.544 - class=css>auto</code></a>’ margins are treated as ‘<code 1.545 - class=css>0</code>’. 1.546 + computation, ‘<code class=css>auto</code>’ margins are treated as 1.547 + ‘<code class=css>0</code>’. 1.548 </ol> 1.549 1.550 <h3 id=main-sizing><span class=secno>9.3. </span> Main Size Determination</h3> 1.551 @@ -3172,9 +3163,8 @@ 1.552 <li id=algo-cross-item> <strong>Determine the <dfn 1.553 id=hypothetical-cross-size>hypothetical cross size</dfn> of each 1.554 item</strong> by performing layout with the used main size and the 1.555 - available space, treating ‘<a href="#align-self-auto"><code 1.556 - class=css>auto</code></a>’ as ‘<code class=css>fit-content</code>’. 1.557 - 1.558 + available space, treating ‘<code class=css>auto</code>’ as ‘<code 1.559 + class=css>fit-content</code>’. 1.560 1.561 <li id=algo-cross-line> <strong>Calculate the cross size of each flex 1.562 line.</strong> 1.563 @@ -3187,14 +3177,13 @@ 1.564 <ol> 1.565 <li> Collect all the flex items whose inline-axis is parallel to the 1.566 main-axis, whose ‘<a href="#align-self"><code 1.567 - class=property>align-self</code></a>’ is ‘<a 1.568 - href="#align-items-baseline"><code class=css>baseline</code></a>’, 1.569 - and whose cross-axis margins are both non-‘<a 1.570 - href="#align-self-auto"><code class=css>auto</code></a>’. Find the 1.571 - largest of the distances between each item's baseline and its 1.572 - hypothetical outer cross-start edge, and the largest of the distances 1.573 - between each item's baseline and its hypothetical outer cross-end edge, 1.574 - and sum these two values. 1.575 + class=property>align-self</code></a>’ is <a 1.576 + href="#align-baseline">‘<code class=css>baseline</code>’</a>, and 1.577 + whose cross-axis margins are both non-‘<code 1.578 + class=css>auto</code>’. Find the largest of the distances between 1.579 + each item's baseline and its hypothetical outer cross-start edge, and 1.580 + the largest of the distances between each item's baseline and its 1.581 + hypothetical outer cross-end edge, and sum these two values. 1.582 1.583 <li> Among all the items not collected by the previous step, find the 1.584 largest outer <a href="#hypothetical-cross-size"><i>hypothetical cross 1.585 @@ -3234,12 +3223,11 @@ 1.586 1.587 <li id=algo-stretch> <strong>Determine the used cross size of each flex 1.588 item.</strong> If a flex item has ‘<code class=css>align-self: 1.589 - stretch</code>’, its cross size property is ‘<a 1.590 - href="#align-self-auto"><code class=css>auto</code></a>’, and neither 1.591 - of its cross-axis margins are ‘<a href="#align-self-auto"><code 1.592 - class=css>auto</code></a>’, the used outer cross size is the used cross 1.593 - size of its flex line, clamped according to the item's min and max cross 1.594 - size properties. Otherwise, the used cross size is the item's <a 1.595 + stretch</code>’, its cross size property is ‘<code 1.596 + class=css>auto</code>’, and neither of its cross-axis margins are 1.597 + ‘<code class=css>auto</code>’, the used outer cross size is the used 1.598 + cross size of its flex line, clamped according to the item's min and max 1.599 + cross size properties. Otherwise, the used cross size is the item's <a 1.600 href="#hypothetical-cross-size"><i>hypothetical cross size</i></a>. 1.601 </ol> 1.602 1.603 @@ -3250,10 +3238,9 @@ 1.604 space.</strong> For each flex line: 1.605 <ol> 1.606 <li> If the remaining free space is positive and at least one main-axis 1.607 - margin on this line is ‘<a href="#align-self-auto"><code 1.608 - class=css>auto</code></a>’, distribute the free space equally among 1.609 - these margins. Otherwise, set all ‘<a href="#align-self-auto"><code 1.610 - class=css>auto</code></a>’ margins to zero. 1.611 + margin on this line is ‘<code class=css>auto</code>’, distribute 1.612 + the free space equally among these margins. Otherwise, set all ‘<code 1.613 + class=css>auto</code>’ margins to zero. 1.614 1.615 <li> Align the items along the main-axis per ‘<a 1.616 href="#justify-content"><code 1.617 @@ -3264,21 +3251,17 @@ 1.618 <h3 id=cross-alignment><span class=secno>9.6. </span> Cross-Axis Alignment</h3> 1.619 1.620 <ol class=continue> 1.621 - <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<a 1.622 - href="#align-self-auto"><code class=css>auto</code></a>’ 1.623 - margins.</strong> If a flex item has ‘<a href="#align-self-auto"><code 1.624 - class=css>auto</code></a>’ cross-axis margins, and its outer cross size 1.625 - (treating those ‘<a href="#align-self-auto"><code 1.626 - class=css>auto</code></a>’ margins as zero) is less than the cross size 1.627 - of its flex line, distribute the difference in those sizes equally to the 1.628 - ‘<a href="#align-self-auto"><code class=css>auto</code></a>’ margins. 1.629 - 1.630 + <li id=algo-cross-margins> <strong>Resolve cross-axis ‘<code 1.631 + class=css>auto</code>’ margins.</strong> If a flex item has ‘<code 1.632 + class=css>auto</code>’ cross-axis margins, and its outer cross size 1.633 + (treating those ‘<code class=css>auto</code>’ margins as zero) is 1.634 + less than the cross size of its flex line, distribute the difference in 1.635 + those sizes equally to the ‘<code class=css>auto</code>’ margins. 1.636 1.637 <li id=algo-cross-align> <strong>Align all flex items along the 1.638 cross-axis</strong> per ‘<a href="#align-self"><code 1.639 class=property>align-self</code></a>’, if neither of the item's 1.640 - cross-axis margins are ‘<a href="#align-self-auto"><code 1.641 - class=css>auto</code></a>’. 1.642 + cross-axis margins are ‘<code class=css>auto</code>’. 1.643 1.644 <li id=algo-cross-container> <strong>Determine the flex container's used 1.645 cross size:</strong> 1.646 @@ -3559,7 +3542,7 @@ 1.647 <li> Run the entire flex layout algorithm (without regards to 1.648 pagination), except treat any ‘<a href="#align-self"><code 1.649 class=property>align-self</code></a>’ other than ‘<code 1.650 - class=css>start</code>’ or ‘<a href="#align-items-baseline"><code 1.651 + class=css>start</code>’ or ‘<a href="#align-baseline"><code 1.652 class=css>baseline</code></a>’ as ‘<code 1.653 class=css>start</code>’. 1.654 1.655 @@ -4175,21 +4158,20 @@ 1.656 <li>align-self, <a href="#align-self" 1.657 title=align-self><strong>8.3.</strong></a> 1.658 1.659 + <li>align-self: auto, <a href="#align-self-auto" 1.660 + title="align-self: auto"><strong>8.3.</strong></a> 1.661 + 1.662 <li>authoring tool, <a href="#authoring-tool" 1.663 title="authoring tool"><strong>11.2.</strong></a> 1.664 1.665 - <li>‘<a href="#align-self-auto"><code class=css>auto</code></a>’, <a 1.666 - href="#align-self-auto" title="''auto''"><strong>8.3.</strong></a> 1.667 - 1.668 - <li>‘<a href="#align-items-baseline"><code 1.669 - class=css>baseline</code></a>’, <a href="#align-items-baseline" 1.670 - title="''baseline''"><strong>8.3.</strong></a> 1.671 + <li>‘<a href="#align-baseline"><code class=css>baseline</code></a>’, 1.672 + <a href="#align-baseline" title="''baseline''"><strong>8.3.</strong></a> 1.673 1.674 <li>‘<a href="#align-content-center"><code 1.675 - class=css>center</code></a>’, <a href="#align-content-center" 1.676 - title="''center''"><strong>8.4.</strong></a>, <a 1.677 - href="#align-items-center" title="''center''"><strong>8.3.</strong></a>, 1.678 - <a href="#justify-content-center" 1.679 + class=css>center</code></a>’, <a href="#align-center" 1.680 + title="''center''"><strong>8.3.</strong></a>, <a 1.681 + href="#align-content-center" 1.682 + title="''center''"><strong>8.4.</strong></a>, <a href="#justify-center" 1.683 title="''center''"><strong>8.2.</strong></a> 1.684 1.685 <li>collapsed, <a href="#collapsed-flex-item" 1.686 @@ -4248,6 +4230,9 @@ 1.687 <li>flex-basis, <a href="#flex-basis0" 1.688 title=flex-basis><strong>7.3.3.</strong></a> 1.689 1.690 + <li>flex-basis: auto, <a href="#flex-basis-auto" 1.691 + title="flex-basis: auto"><strong>7.3.3.</strong></a> 1.692 + 1.693 <li>flex container, <a href="#flex-container" 1.694 title="flex container"><strong>3.</strong></a> 1.695 1.696 @@ -4256,11 +4241,9 @@ 1.697 1.698 <li>‘<a href="#align-content-flex-end"><code 1.699 class=css>flex-end</code></a>’, <a href="#align-content-flex-end" 1.700 - title="''flex-end''"><strong>8.4.</strong></a>, <a 1.701 - href="#align-items-flex-end" 1.702 + title="''flex-end''"><strong>8.4.</strong></a>, <a href="#align-flex-end" 1.703 title="''flex-end''"><strong>8.3.</strong></a>, <a 1.704 - href="#justify-content-flex-end" 1.705 - title="''flex-end''"><strong>8.2.</strong></a> 1.706 + href="#justify-flex-end" title="''flex-end''"><strong>8.2.</strong></a> 1.707 1.708 <li>flex-flow, <a href="#flex-flow" 1.709 title=flex-flow><strong>5.3.</strong></a> 1.710 @@ -4295,9 +4278,9 @@ 1.711 <li>‘<a href="#align-content-flex-start"><code 1.712 class=css>flex-start</code></a>’, <a href="#align-content-flex-start" 1.713 title="''flex-start''"><strong>8.4.</strong></a>, <a 1.714 - href="#align-items-flex-start" 1.715 + href="#align-flex-start" 1.716 title="''flex-start''"><strong>8.3.</strong></a>, <a 1.717 - href="#justify-content-flex-start" 1.718 + href="#justify-flex-start" 1.719 title="''flex-start''"><strong>8.2.</strong></a> 1.720 1.721 <li>flex-wrap, <a href="#flex-wrap" 1.722 @@ -4379,14 +4362,14 @@ 1.723 class=css>space-around</code></a>’, <a 1.724 href="#align-content-space-around" 1.725 title="''space-around''"><strong>8.4.</strong></a>, <a 1.726 - href="#justify-content-space-around" 1.727 + href="#justify-space-around" 1.728 title="''space-around''"><strong>8.2.</strong></a> 1.729 1.730 <li>‘<a href="#align-content-space-between"><code 1.731 class=css>space-between</code></a>’, <a 1.732 href="#align-content-space-between" 1.733 title="''space-between''"><strong>8.4.</strong></a>, <a 1.734 - href="#justify-content-space-between" 1.735 + href="#justify-space-between" 1.736 title="''space-between''"><strong>8.2.</strong></a> 1.737 1.738 <li>static position, <a href="#flex-item-static-position" 1.739 @@ -4394,9 +4377,8 @@ 1.740 1.741 <li>‘<a href="#align-content-stretch"><code 1.742 class=css>stretch</code></a>’, <a href="#align-content-stretch" 1.743 - title="''stretch''"><strong>8.4.</strong></a>, <a 1.744 - href="#align-items-stretch" title="''stretch''"><strong>8.3.</strong></a> 1.745 - 1.746 + title="''stretch''"><strong>8.4.</strong></a>, <a href="#align-stretch" 1.747 + title="''stretch''"><strong>8.3.</strong></a> 1.748 1.749 <li>strut size, <a href="#strut-size" 1.750 title="strut size"><strong>9.4.</strong></a>
2.1 --- a/css3-flexbox/Overview.src.html Sat Aug 04 20:58:49 2012 -0700 2.2 +++ b/css3-flexbox/Overview.src.html Sun Aug 05 20:49:51 2012 -0700 2.3 @@ -345,7 +345,7 @@ 2.4 and 'align-self' to center it horizontally. 2.5 2.6 <li> 2.7 - An ''auto'' margin above the purchase button 2.8 + An <a href="#auto-margins">''auto'' margin</a> above the purchase button 2.9 forces it to the bottom of the entry box, 2.10 regardless of the height of the description. 2.11 </ul> 2.12 @@ -458,7 +458,7 @@ 2.13 2.14 <p> 2.15 Unlike block and inline layout, 2.16 - whose layout calculations are biased to the writing mode directions, 2.17 + whose layout calculations are biased to the <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-box">block and inline flow directions</a>, 2.18 flex layout is biased to the <a href="#flex-flow-property">flex flow</a> directions. 2.19 To make it easier to talk about flex layout, 2.20 this section defines a set of flex flow–relative terms. 2.21 @@ -490,10 +490,10 @@ 2.22 <dt class='size'>main size 2.23 <dt class='size'>main size property 2.24 <dd> 2.25 - A <i>flex item</i>'s width or height, 2.26 + A <i>flex item</i>'s width or height, 2.27 whichever is in the <i>main dimension</i>, 2.28 is the item's <dfn>main size</dfn>. 2.29 - The <i>flex item</i>'s <dfn>main size property</dfn> is 2.30 + The <i>flex item</i>'s <dfn>main size property</dfn> is 2.31 either the 'width' or 'height' property, 2.32 whichever is in the <i>main dimension</i>. 2.33 </dl> 2.34 @@ -523,7 +523,7 @@ 2.35 </dl> 2.36 2.37 <h2 id='flex-containers'> 2.38 -Flex Containers: the ''flex'' and ''inline-flex'' 'display' values</h2> 2.39 +Flex Containers: the <a href="#display-flex">''flex''</a> and <a href="#display-inline-flex">''inline-flex'' 'display' values</h2> 2.40 2.41 <table class="propdef"> 2.42 <tr> 2.43 @@ -572,11 +572,11 @@ 2.44 <p> 2.45 If an element's specified 'display' is ''inline-flex'' 2.46 and the element is floated or absolutely positioned, 2.47 - the computed value of 'display' is ''flex''. 2.48 + the computed value of 'display' is <a href="#display-flex">''flex''</a>. 2.49 The table in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a> is thus amended 2.50 to contain an additional row, 2.51 with ''inline-flex'' in the "Specified Value" column 2.52 - and ''flex'' in the "Computed Value" column. 2.53 + and <a href="#display-flex">''flex''</a> in the "Computed Value" column. 2.54 2.55 <h2 id='flex-items'> 2.56 Flex Items</h2> 2.57 @@ -735,7 +735,8 @@ 2.58 2.59 <p> 2.60 <i>Flex items</i> paint exactly the same as block-level elements in the normal flow, 2.61 - except that 'z-index' values other than ''auto'' create a stacking context 2.62 + except that <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">'z-index'</a> 2.63 + values other than ''auto'' create a stacking context 2.64 even if 'position' is ''static''. 2.65 <p class="note"> 2.66 Note: Descendants that are positioned outside a flex item still participate 2.67 @@ -1470,8 +1471,8 @@ 2.68 The <var><'flex-basis'></var> component sets the <dfn>flex basis</dfn>, 2.69 which is the initial <i>main size</i> of the <i>flex item</i>, 2.70 before free space is distributed according to the flex ratios. 2.71 - If omitted, the <i>flex basis</i> defaults to ''0%''. 2.72 - <span class='note'>Note that this is different from the initial value of 'flex-basis', which is ''auto''.</span> 2.73 + If omitted, the <i>flex basis</i> defaults to the length zero. 2.74 + <span class='note'>Note that this is different from the initial value of 'flex-basis', which is <a href="#flex-basis-auto">''auto''</a>.</span> 2.75 Zero values for the <var><'flex-basis'></var> component must be specified with a unit. 2.76 Unitless zero will either be interpreted as one of the flex ratios, 2.77 or will make the declaration invalid. 2.78 @@ -1485,7 +1486,7 @@ 2.79 When omitted, they are set to ''1''. 2.80 <span class='note'>Note that this is different from the initial value of 'flex-grow', which is ''0''.</span> 2.81 2.82 - <p> 2.83 + <p id="flex-none"> 2.84 The keyword 'none' computes to ''0 0 auto''. 2.85 2.86 <figure> 2.87 @@ -1508,15 +1509,17 @@ 2.88 The list below summarizes the effects of the most common 'flex' values: 2.89 2.90 <dl> 2.91 - <dt>''flex: initial'' 2.92 + <dt id="flex-initial">''flex: initial'' 2.93 + <dt>''flex: 0 auto'' 2.94 <dd> 2.95 Equivalent to ''flex: 0 1 auto''. 2.96 The value sets the size of the item according to the 'width'/'height' properties 2.97 and makes the flex item inflexible when there is positive free space, 2.98 but allows it to shrink to its <a href="#min-size-auto">minimum</a> when there is insufficient space. 2.99 - (If the 'width'/'height' used as the <i>flex basis</i> computes to ''auto'', 2.100 + (If the 'width'/'height' used as the <i>flex basis</i> computes to ''auto'', 2.101 this will size the flex item based on its contents.) 2.102 - The alignment properties or ''auto'' margins may be used to align flex items within the flex container. 2.103 + The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins">''auto'' margins</a> 2.104 + can be used to align flex items within the flex container. 2.105 2.106 <dt>''flex: auto'' 2.107 <dd> 2.108 @@ -1534,7 +1537,7 @@ 2.109 To size things normally but still use the <a href="#alignment">alignment abilities</a> of flex layout, 2.110 set all the flex items to ''flex: none'' 2.111 and then use ''auto'' margins or the alignment properties. 2.112 - This is similar to ''initial'', 2.113 + This is similar to <a href="#flex-initial">''initial''</a>, 2.114 except that flex items are not allowed to shrink, 2.115 even in overflow situations. 2.116 2.117 @@ -1679,7 +1682,7 @@ 2.118 Negative lengths are invalid. 2.119 2.120 <p> 2.121 - If the computed value is ''auto'' on a <i>flex item</i>, 2.122 + If the computed value is <dfn title="flex-basis: auto" id="flex-basis-auto">''auto''</dfn> on a <i>flex item</i>, 2.123 the used value of 'flex-basis' is the used value of the element's <i>main size property</i>. 2.124 Otherwise, 2.125 the used value of 'flex-basis' is resolved the same way as the <i>main size property</i>. 2.126 @@ -1729,7 +1732,7 @@ 2.127 The normative definition of how margins affect flex items is in the <a href="#layout-algorithm">Flex Layout Algorithm</a> section.</em> 2.128 2.129 <p> 2.130 - Margins on flex items that are ''auto'' have an effect very similar to auto margins in normal flow: 2.131 + Auto margins on flex items have an effect very similar to auto margins in block flow: 2.132 2.133 <ul> 2.134 <li> 2.135 @@ -1789,7 +1792,7 @@ 2.136 <div class='example'> 2.137 <p> 2.138 The figure below illustrates the difference in cross-axis alignment in overflow situations between 2.139 - using ''auto'' margins 2.140 + using <a href="#auto-margins">''auto'' margins</a> 2.141 and using the <a href='#align-items-property'>alignment properties</a>. 2.142 2.143 <figure> 2.144 @@ -1863,21 +1866,21 @@ 2.145 It also exerts some control over the alignment of items when they overflow the line. 2.146 2.147 <dl> 2.148 - <dt><dfn id='justify-content-flex-start'>''flex-start''</dfn> 2.149 + <dt><dfn id='justify-flex-start'>''flex-start''</dfn> 2.150 <dd> 2.151 <i>Flex items</i> are packed toward the start of the line. 2.152 The <i>main-start</i> margin edge of the first <i>flex item</i> on the line 2.153 is placed flush with the <i>main-start</i> edge of the line, 2.154 and each subsequent <i>flex item</i> is placed flush with the preceding item. 2.155 2.156 - <dt><dfn id='justify-content-flex-end'>''flex-end''</dfn> 2.157 + <dt><dfn id='justify-flex-end'>''flex-end''</dfn> 2.158 <dd> 2.159 <i>Flex items</i> are packed toward the end of the line. 2.160 The <i>main-end</i> margin edge of the last <i>flex item</i> 2.161 is placed flush with the <i>main-end</i> edge of the line, 2.162 and each preceding <i>flex item</i> is placed flush with the subsequent item. 2.163 2.164 - <dt><dfn id='justify-content-center'>''center''</dfn> 2.165 + <dt><dfn id='justify-center'>''center''</dfn> 2.166 <dd> 2.167 <i>Flex items</i> are packed toward the center of the line. 2.168 The <i>flex items</i> on the line are placed flush with each other 2.169 @@ -1887,12 +1890,12 @@ 2.170 (If the leftover free-space is negative, 2.171 the <i>flex items</i> will overflow equally in both directions.) 2.172 2.173 - <dt><dfn id='justify-content-space-between'>''space-between''</dfn> 2.174 + <dt><dfn id='justify-space-between'>''space-between''</dfn> 2.175 <dd> 2.176 <i>Flex items</i> are evenly distributed in the line. 2.177 If the leftover free-space is negative 2.178 or there is only a single <i>flex item</i> on the line, 2.179 - this value is identical to ''flex-start''. 2.180 + this value is identical to <a href="#justify-flex-start">''flex-start''</a>. 2.181 Otherwise, 2.182 the <i>main-start</i> margin edge of the first <i>flex item</i> on the line 2.183 is placed flush with the <i>main-start</i> edge of the line, 2.184 @@ -1901,13 +1904,13 @@ 2.185 and the remaining <i>flex items</i> on the line are distributed 2.186 so that the empty space between any two adjacent items is the same. 2.187 2.188 - <dt><dfn id='justify-content-space-around'>''space-around''</dfn> 2.189 + <dt><dfn id='justify-space-around'>''space-around''</dfn> 2.190 <dd> 2.191 <i>Flex items</i> are evenly distributed in the line, 2.192 with half-size spaces on either end. 2.193 If the leftover free-space is negative or 2.194 there is only a single <i>flex item</i> on the line, 2.195 - this value is identical to ''center''. 2.196 + this value is identical to <a href="#justify-center">''center''</a>. 2.197 Otherwise, the <i>flex items</i> on the line are distributed 2.198 such that the empty space between any two adjacent <i>flex items</i> on the line is the same, 2.199 and the empty space before the first and after the last <i>flex items</i> on the line are half the size of the other empty spaces. 2.200 @@ -1992,33 +1995,33 @@ 2.201 'align-self' always matches the value of 'align-items' on their associated flex container.) 2.202 2.203 <p> 2.204 - A value of <dfn id="align-self-auto">''auto''</dfn> for 'align-self' 2.205 + A value of <dfn title="align-self: auto" id="align-self-auto">''auto''</dfn> for 'align-self' 2.206 computes to the value of 'align-items' on the element's parent, 2.207 or <a href='#align-items-stretch'>''stretch''</a> if the element has no parent. 2.208 The alignments are defined as: 2.209 2.210 <dl> 2.211 - <dt><dfn id="align-items-flex-start">''flex-start''</dfn> 2.212 + <dt><dfn id="align-flex-start">''flex-start''</dfn> 2.213 <dd> 2.214 The <i>cross-start</i> margin edge of the <i>flex item</i> 2.215 is placed flush with the <i>cross-start</i> edge of the line. 2.216 2.217 - <dt><dfn id="align-items-flex-end">''flex-end''</dfn> 2.218 + <dt><dfn id="align-flex-end">''flex-end''</dfn> 2.219 <dd> 2.220 The <i>cross-end</i> margin edge of the <i>flex item</i> 2.221 is placed flush with the <i>cross-end</i> edge of the line. 2.222 2.223 - <dt><dfn id="align-items-center">''center''</dfn> 2.224 + <dt><dfn id="align-center">''center''</dfn> 2.225 <dd> 2.226 The <i>flex item</i>'s margin box is centered in the <i>cross axis</i> within the line. 2.227 (If the <i>cross size</i> of the flex line is less than that of the <i>flex item</i>, 2.228 it will overflow equally in both directions.) 2.229 2.230 - <dt><dfn id="align-items-baseline">''baseline''</dfn> 2.231 + <dt><dfn id="align-baseline">''baseline''</dfn> 2.232 <dd> 2.233 <p> 2.234 If the <i>flex item</i>'s inline axis is the same as the <i>cross axis</i>, 2.235 - this value is identical to ''flex-start''. 2.236 + this value is identical to <a href="#align-flex-start">''flex-start''</a>. 2.237 2.238 <p> 2.239 Otherwise, 2.240 @@ -2029,10 +2032,10 @@ 2.241 is placed flush against the <i>cross-start</i> edge of the line. 2.242 2.243 2.244 - <dt><dfn id="align-items-stretch">''stretch''</dfn> 2.245 + <dt><dfn id="align-stretch">''stretch''</dfn> 2.246 <dd> 2.247 <p> 2.248 - If the <i>cross size property</i> of the <i>flex item</i> is ''auto'', 2.249 + If the <i>cross size property</i> of the <i>flex item</i> is ''auto'', 2.250 its used value is the length necessary to make the <i>cross size</i> of the item's margin box as close to the same size as the line as possible, 2.251 while still respecting the constraints imposed by 'min/max-width/height'. 2.252 2.253 @@ -2123,7 +2126,7 @@ 2.254 Lines are evenly distributed in the flex container. 2.255 If the leftover free-space is negative 2.256 or there is only a single line in the flex container, 2.257 - this value is identical to ''flex-start''. 2.258 + this value is identical to <a href="align-content-flex-start">''flex-start''</a>. 2.259 Otherwise, 2.260 the <i>cross-start</i> edge of the first line in the flex container 2.261 is placed flush with the <i>cross-start</i> content edge of the flex container, 2.262 @@ -2138,7 +2141,7 @@ 2.263 with half-size spaces on either end. 2.264 If the leftover free-space is negative 2.265 or there is only a single line in the flex container, 2.266 - this value is identical to ''center''. 2.267 + this value is identical to <a href="align-content-center">''center''</a>. 2.268 Otherwise, the lines in the flex container are distributed 2.269 such that the empty space between any two adjacent lines is the same, 2.270 and the empty space before the first and after the last lines in the flex container 2.271 @@ -2148,7 +2151,7 @@ 2.272 <dd> 2.273 Lines stretch to take up the remaining space. 2.274 If the leftover free-space is negative, 2.275 - this value is identical to ''flex-start''. 2.276 + this value is identical to <a href="#align-content-flex-start">''flex-start''</a>. 2.277 Otherwise, 2.278 the free-space is split equally between all of the lines, 2.279 increasing their cross size. 2.280 @@ -2472,7 +2475,7 @@ 2.281 <ol> 2.282 <li> 2.283 Collect all the flex items whose inline-axis is parallel to the main-axis, 2.284 - whose 'align-self' is ''baseline'', 2.285 + whose 'align-self' is <a href="#align-baseline">''baseline''</a>, 2.286 and whose cross-axis margins are both non-''auto''. 2.287 Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge, 2.288 and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge,
