changeset
[css3-flexbox] Editorial - don't call abspos children 'flex items' because it's confusing with everything else that talks about flex items.
Tue, 09 Oct 2012 11:03:39 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Tue, 09 Oct 2012 11:03:39 -0700
- changeset 6823
- 3b0baf36f76d
- parent 6822
- 080615e7a80b
- child 6824
- 0fe1e04d8b47
[css3-flexbox] Editorial - don't call abspos children 'flex items' because it's confusing with everything else that talks about flex items.
| 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 Tue Oct 09 10:40:38 2012 -0700 1.2 +++ b/css3-flexbox/Overview.html Tue Oct 09 11:03:39 2012 -0700 1.3 @@ -1,23 +1,24 @@ 1.4 <!DOCTYPE html> 1.5 1.6 <html lang=en> 1.7 - <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 1.8 + <head> 1.9 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.10 <title>CSS Flexible Box Layout Module</title> 1.11 - 1.12 - <link href="http://purl.org/dc/terms/" rel=schema.DC> 1.13 - <meta content="CSS Flexible Box Layout Module" name=DC.title> 1.14 - <meta content=text name=DC.type> 1.15 - <meta content=2012-09-21 name=DC.issued> 1.16 - <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=DC.creator> 1.17 - <meta content=W3C name=DC.publisher> 1.18 - <meta content="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/" 1.19 - name=DC.identifier> 1.20 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.21 - rel=DC.rights> 1.22 + <!-- 1.23 + <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 1.24 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 1.25 + --> 1.26 + 1.27 + <meta content="CSS Flexible Box Layout Module" name=dcterms.title> 1.28 + <meta content=text name=dcterms.type> 1.29 + <meta content=2012-10-09 name=dcterms.issued> 1.30 + <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator> 1.31 + <meta content=W3C name=dcterms.publisher> 1.32 + <meta content="http://www.w3.org/TR/2012/ED-css3-flexbox-20121009/" 1.33 + name=dcterms.identifier> 1.34 <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet 1.35 type="text/css"> 1.36 - <link href="http://www.w3.org/StyleSheets/TR/W3C-CR" rel=stylesheet 1.37 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet 1.38 type="text/css"> 1.39 <style> 1.40 code.one-line { white-space: pre; } 1.41 @@ -216,31 +217,30 @@ 1.42 1.43 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 1.44 1.45 - <h2 class="no-num no-toc" id=w3c-working>W3C Candidate Recommendation, 21 1.46 - September 2012</h2> 1.47 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 9 October 2012</h2> 1.48 1.49 <dl> 1.50 <dt>This version: 1.51 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20121009/">http://www.w3.org/TR/2012/CR-css3-flexbox-20121009/</a>--> 1.52 + 1.53 + <dd><a 1.54 + href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 1.55 + 1.56 + <dt>Latest version: 1.57 + <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>--> 1.58 + 1.59 + <dd><a 1.60 + href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a> 1.61 + 1.62 + <dt>Editor's Draft: 1.63 + 1.64 + <dd><a 1.65 + href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 1.66 + 1.67 + <dt>Previous version: 1.68 1.69 <dd><a 1.70 href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a> 1.71 - <!--<dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> --> 1.72 - 1.73 - <dt>Latest version: 1.74 - <!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>--> 1.75 - 1.76 - <dd><a 1.77 - href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a> 1.78 - 1.79 - <dt>Editor's Draft: 1.80 - 1.81 - <dd><a 1.82 - href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 1.83 - 1.84 - <dt>Previous version: 1.85 - 1.86 - <dd><a 1.87 - href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 1.88 1.89 <dt>Issues List: 1.90 1.91 @@ -313,46 +313,35 @@ 1.92 <h2 class="no-num no-toc" id=status>Status of this document</h2> 1.93 <!--begin-status--> 1.94 1.95 - <p><em>This section describes the status of this document at the time of 1.96 - its publication. Other documents may supersede this document. A list of 1.97 - current W3C publications and the latest revision of this technical report 1.98 - can be found in the <a href="http://www.w3.org/TR/">W3C technical reports 1.99 - index at http://www.w3.org/TR/.</a></em> 1.100 - 1.101 - <p>This document was produced by the <a 1.102 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> as a <a 1.103 - href="http://www.w3.org/Consortium/Process/tr#RecsCR">Candidate 1.104 - Recommendation.</a> 1.105 - 1.106 - <p>A Candidate Recommendation is a document that has been widely reviewed 1.107 - and is ready for implementation. W3C encourages everybody to implement 1.108 - this specification and return comments to the (<a 1.109 + <p>This is a public copy of the editors' draft. It is provided for 1.110 + discussion only and may change at any moment. Its publication here does 1.111 + not imply endorsement of its contents by W3C. Don't cite this document 1.112 + other than as work in progress. 1.113 + 1.114 + <p>The (<a 1.115 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.116 mailing list <a 1.117 href="mailto:www-style@w3.org?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE"> 1.118 www-style@w3.org</a> (see <a 1.119 - href="http://www.w3.org/Mail/Request">instructions</a>). When sending 1.120 - e-mail, please put the text “css3-flexbox” in the subject, preferably 1.121 - like this: “[<!---->css3-flexbox<!---->] <em>…summary of 1.122 - comment…</em>” 1.123 - 1.124 - <p>Publication as a Candidate Recommendation does not imply endorsement by 1.125 - the W3C Membership. This is a draft document and may be updated, replaced 1.126 - or obsoleted by other documents at any time. It is inappropriate to cite 1.127 - this document as other than work in progress. 1.128 + href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.129 + discussion of this specification. When sending e-mail, please put the text 1.130 + “css3-flexbox” in the subject, preferably like this: 1.131 + “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>” 1.132 + 1.133 + <p>This document was produced by the <a href="/Style/CSS/members">CSS 1.134 + Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 1.135 1.136 <p>This document was produced by a group operating under the <a 1.137 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 1.138 - 2004 W3C Patent Policy</a>. W3C maintains a <a 1.139 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 1.140 + href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 1.141 + Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 1.142 rel=disclosure>public list of any patent disclosures</a> made in 1.143 connection with the deliverables of the group; that page also includes 1.144 instructions for disclosing a patent. An individual who has actual 1.145 knowledge of a patent which the individual believes contains <a 1.146 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential"> 1.147 - Essential Claim(s)</a> must disclose the information in accordance with <a 1.148 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure"> 1.149 - section 6 of the W3C Patent Policy</a>.</p> 1.150 + href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.151 + Claim(s)</a> must disclose the information in accordance with <a 1.152 + href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 1.153 + W3C Patent Policy</a>.</p> 1.154 <!--end-status--> 1.155 1.156 <p>The CR period will last at least until 20 March 2013. At the time of 1.157 @@ -396,7 +385,7 @@ 1.158 <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a> 1.159 <ul class=toc> 1.160 <li><a href="#abspos-items"><span class=secno>4.1. </span> 1.161 - Absolutely-Positioned Flex Items</a> 1.162 + Absolutely-Positioned Flex Children</a> 1.163 1.164 <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item 1.165 Margins</a> 1.166 @@ -920,12 +909,12 @@ 1.167 1.168 <p> The contents of a <a href="#flex-container"><i>flex container</i></a> 1.169 consists of zero or more <dfn id=flex-item title="flex item">flex 1.170 - items</dfn>: each child of a <a href="#flex-container"><i>flex 1.171 + items</dfn>: each in-flow child of a <a href="#flex-container"><i>flex 1.172 container</i></a> becomes a <a href="#flex-item"><i>flex item</i></a>, and 1.173 each contiguous run of text that is directly contained inside a <a 1.174 href="#flex-container"><i>flex container</i></a> is wrapped in an 1.175 - anonymous <a href="#flex-item"><i>flex item</i></a>. However, an anonymous 1.176 - flex item that contains only <a 1.177 + anonymous <a href="#flex-item"><i>flex item</i></a> element. However, an 1.178 + anonymous flex item that contains only <a 1.179 href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white 1.180 space</a> is not rendered, as if it were ‘<code 1.181 class=css>display:none</code>’. 1.182 @@ -1007,28 +996,29 @@ 1.183 href="#flex-item"><i>flex item</i></a>. 1.184 1.185 <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned 1.186 - Flex Items</h3> 1.187 - 1.188 - <p> An absolutely-positioned <a href="#flex-item"><i>flex item</i></a> does 1.189 - not participate in flex layout beyond the <a 1.190 - href="#algo-flex-order">reordering step</a>. However, if both ‘<code 1.191 - class=property>left</code>’ and ‘<code class=property>right</code>’ 1.192 - or both ‘<code class=property>top</code>’ and ‘<code 1.193 - class=property>bottom</code>’ are ‘<code class=css>auto</code>’, 1.194 - then the used value of those properties are computed from its <dfn 1.195 - id=flex-item-static-position>static position</dfn>, as follows: 1.196 + Flex Children</h3> 1.197 + 1.198 + <p> An absolutely-positioned child element of a <a 1.199 + href="#flex-container"><i>flex container</i></a> does not participate in 1.200 + flex layout beyond the <a href="#algo-flex-order">reordering step</a>. 1.201 + However, if both ‘<code class=property>left</code>’ and ‘<code 1.202 + class=property>right</code>’ or both ‘<code 1.203 + class=property>top</code>’ and ‘<code class=property>bottom</code>’ 1.204 + are ‘<code class=css>auto</code>’, then the used value of those 1.205 + properties are computed from its <dfn id=flex-item-static-position>static 1.206 + position</dfn>, as follows: 1.207 1.208 <p> If both ‘<code class=property>left</code>’ and ‘<code 1.209 class=property>right</code>’ are ‘<code class=css>auto</code>’, the 1.210 - <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 1.211 - <a href="#main-start"><i>main-start</i></a> or <a 1.212 + absolutely-positioned child must be positioned so that its <a 1.213 + href="#main-start"><i>main-start</i></a> or <a 1.214 href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 1.215 horizontal axis) is aligned with the <a 1.216 href="#flex-item-static-position"><i>static position</i></a>. If both 1.217 ‘<code class=property>top</code>’ and ‘<code 1.218 class=property>bottom</code>’ are ‘<code class=css>auto</code>’, the 1.219 - <a href="#flex-item"><i>flex item</i></a> must be positioned so that its 1.220 - <a href="#main-start"><i>main-start</i></a> or <a 1.221 + absolutely-positioned child must be positioned so that its <a 1.222 + href="#main-start"><i>main-start</i></a> or <a 1.223 href="#cross-start"><i>cross-start</i></a> edge (whichever is in the 1.224 vertical axis) is aligned with the <a 1.225 href="#flex-item-static-position"><i>static position</i></a>. 1.226 @@ -1036,16 +1026,16 @@ 1.227 <p> In the <a href="#main-axis"><i>main axis</i></a>, 1.228 1.229 <ol> 1.230 - <li> If there is a subsequent in-flow <a href="#flex-item"><i>flex 1.231 - item</i></a> on the same <i>flex line</i>, the <a 1.232 + <li> If there is a subsequent <a href="#flex-item"><i>flex item</i></a> on 1.233 + the same <i>flex line</i>, the <a 1.234 href="#flex-item-static-position"><i>static position</i></a> is the outer 1.235 <a href="#main-start"><i>main-start</i></a> edge of that <a 1.236 href="#flex-item"><i>flex item</i></a>. 1.237 1.238 - <li> Otherwise, if there is a preceding in-flow <a 1.239 - href="#flex-item"><i>flex item</i></a> on the same <i>flex line</i>, the 1.240 - <a href="#flex-item-static-position"><i>static position</i></a> is the 1.241 - outer <a href="#main-end"><i>main-end</i></a> edge of that <a 1.242 + <li> Otherwise, if there is a preceding <a href="#flex-item"><i>flex 1.243 + item</i></a> on the same <i>flex line</i>, the <a 1.244 + href="#flex-item-static-position"><i>static position</i></a> is the outer 1.245 + <a href="#main-end"><i>main-end</i></a> edge of that <a 1.246 href="#flex-item"><i>flex item</i></a>. 1.247 1.248 <li> Otherwise, the <a href="#flex-item-static-position"><i>static 1.249 @@ -1054,16 +1044,16 @@ 1.250 class=property>justify-content</code></a>’ on the <a 1.251 href="#flex-container"><i>flex container</i></a> as if the <a 1.252 href="#flex-item-static-position"><i>static position</i></a> were 1.253 - represented by a zero-sized flex item. 1.254 + represented by a zero-sized <a href="#flex-item"><i>flex item</i></a>. 1.255 </ol> 1.256 1.257 <p> In the <a href="#cross-axis"><i>cross axis</i></a>, 1.258 1.259 <ol> 1.260 - <li> If there is a preceding in-flow <a href="#flex-item"><i>flex 1.261 - item</i></a>, the <a href="#flex-item-static-position"><i>static 1.262 - position</i></a> is the <a href="#cross-start"><i>cross-start</i></a> 1.263 - edge of the <i>flex-line</i> that item is in. 1.264 + <li> If there is a preceding <a href="#flex-item"><i>flex item</i></a>, 1.265 + the <a href="#flex-item-static-position"><i>static position</i></a> is 1.266 + the <a href="#cross-start"><i>cross-start</i></a> edge of the 1.267 + <i>flex-line</i> that item is in. 1.268 1.269 <li> Otherwise, the <a href="#flex-item-static-position"><i>static 1.270 position</i></a> is the <i>cross-start edge</i> of the first <i>flex 1.271 @@ -1687,7 +1677,7 @@ 1.272 <tr> 1.273 <th>Applies to: 1.274 1.275 - <td>flex items 1.276 + <td>flex items and absolutely-positioned flex container children 1.277 1.278 <tr> 1.279 <th>Inherited: 1.280 @@ -3134,14 +3124,16 @@ 1.281 <li id=algo-anon-box> <strong>Generate anonymous flex items</strong> as 1.282 described in the <a href="#flex-items">Flex Items</a> section. 1.283 1.284 - <li id=algo-flex-order> <strong>Re-order the flex items according to their 1.285 - ‘<a href="#order"><code class=property>order</code></a>’.</strong> 1.286 - The items with the lowest (most negative) ‘<a href="#order"><code 1.287 + <li id=algo-flex-order> <strong>Re-order the flex items and absolutely 1.288 + positioned flex container children according to their ‘<a 1.289 + href="#order"><code class=property>order</code></a>’.</strong> The 1.290 + elements with the lowest (most negative) ‘<a href="#order"><code 1.291 class=property>order</code></a>’ values are first in the ordering. If 1.292 - multiple items share a ‘<a href="#order"><code 1.293 + multiple elements share an ‘<a href="#order"><code 1.294 class=property>order</code></a>’ value, they're ordered by document 1.295 - order. This affects the order in which the flex items generate boxes in 1.296 - the box-tree, and how the rest of this algorithm deals with the items. 1.297 + order. This affects the order in which the elements generate boxes in the 1.298 + box-tree, and how the rest of this algorithm deals with the generated 1.299 + flex items. 1.300 </ol> 1.301 1.302 <h3 id=line-sizing><span class=secno>9.2. </span> Line Length Determination</h3> 1.303 @@ -3983,43 +3975,12 @@ 1.304 <h2 class=no-num id=changes>Changes</h2> 1.305 1.306 <p> The following significant changes were made since the <a 1.307 - href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 1.308 - Last Call Working Draft</a>: 1.309 + href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September 1.310 + 2012 Candidate Recommendation</a>: 1.311 1.312 <ul> 1.313 - <li>All children of a flex container now become flex items (not just those 1.314 - that are not ‘<code class=css>inline</code>’). 1.315 - 1.316 - <li>Defined <a href="#painting">painting behavior of flex items</a>. 1.317 - 1.318 - <li>Made ‘<code class=property>z-index</code>’ automatically apply to 1.319 - flex items. 1.320 - 1.321 - <li>Changed how absolutely-positioned flex container children are handled 1.322 - so that they don't impact layout. 1.323 - 1.324 - <li>Defined which properties apply to the table wrapper box vs. the table 1.325 - box of a table element. 1.326 - 1.327 - <li>Defined interaction of ‘<a href="#order"><code 1.328 - class=property>order</code></a>’ and <a 1.329 - href="http://www.w3.org/TR/css3-speech/">speech</a>, <a 1.330 - href="http://www.w3.org/TR/css3-ui/#nav-index">‘<code 1.331 - class=property>nav-index</code>’</a>. 1.332 - 1.333 - <li>Corrected errors in the <a href="#layout-algorithm">flex layout 1.334 - algorithm</a>. 1.335 - 1.336 - <li>Defined <a href="#flex-baselines">baselines in flex layout</a>. 1.337 - 1.338 - <li>Various clarifications to the <a href="#flex-containers">flex 1.339 - containers</a> and <a href="#flex-items">flex items</a> chapters. 1.340 - 1.341 - <li>Clarified parsing of the ‘<a href="#flex"><code 1.342 - class=property>flex</code></a>’ shorthand and unitless zeroes. 1.343 - 1.344 - <li>Added or rewrote many examples to make them more realistic and more 1.345 - interesting. 1.346 + <li>Absolutely positioned children of a flex container are no longer 1.347 + called "flex items" (to avoid terminology confusion). 1.348 </ul> 1.349 1.350 <p>A <a 1.351 @@ -4252,7 +4213,7 @@ 1.352 1.353 <td>0 1.354 1.355 - <td>flex items 1.356 + <td>flex items and absolutely-positioned flex container children 1.357 1.358 <td>no 1.359
2.1 --- a/css3-flexbox/Overview.src.html Tue Oct 09 10:40:38 2012 -0700 2.2 +++ b/css3-flexbox/Overview.src.html Tue Oct 09 11:03:39 2012 -0700 2.3 @@ -204,8 +204,8 @@ 2.4 2.5 <dl> 2.6 <dt>This version: 2.7 - <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a> 2.8 - <!--<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> --> 2.9 + <!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a>--> 2.10 + <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 2.11 <dt>Latest version: 2.12 <!--<dd><a href="[LATEST]">[LATEST]</a>--> 2.13 <dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a> 2.14 @@ -214,7 +214,7 @@ 2.15 <dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a> 2.16 2.17 <dt>Previous version: 2.18 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a> 2.19 + <dd><a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a> 2.20 2.21 <dt>Issues List: 2.22 <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Flexbox&resolution=---">Bugzilla Bugs for Flexbox</a> 2.23 @@ -589,10 +589,10 @@ 2.24 2.25 <p> 2.26 The contents of a <i>flex container</i> consists of zero or more <dfn title="flex item" id="flex-item">flex items</dfn>: 2.27 - each child of a <i>flex container</i> 2.28 + each in-flow child of a <i>flex container</i> 2.29 becomes a <i>flex item</i>, 2.30 and each contiguous run of text that is directly contained inside a <i>flex container</i> 2.31 - is wrapped in an anonymous <i>flex item</i>. 2.32 + is wrapped in an anonymous <i>flex item</i> element. 2.33 However, an anonymous flex item that contains only 2.34 <a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a> 2.35 is not rendered, as if it were ''display:none''. 2.36 @@ -665,10 +665,10 @@ 2.37 and the table box were the <i>flex item</i>. 2.38 2.39 <h3 id='abspos-items'> 2.40 -Absolutely-Positioned Flex Items</h3> 2.41 +Absolutely-Positioned Flex Children</h3> 2.42 2.43 <p> 2.44 - An absolutely-positioned <i>flex item</i> does not participate in flex layout 2.45 + An absolutely-positioned child element of a <i>flex container</i> does not participate in flex layout 2.46 beyond the <a href="#algo-flex-order">reordering step</a>. 2.47 However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'', 2.48 then the used value of those properties 2.49 @@ -676,12 +676,12 @@ 2.50 2.51 <p> 2.52 If both 'left' and 'right' are ''auto'', 2.53 - the <i>flex item</i> must be positioned so that 2.54 + the absolutely-positioned child must be positioned so that 2.55 its <i>main-start</i> or <i>cross-start</i> edge 2.56 (whichever is in the horizontal axis) 2.57 is aligned with the <i>static position</i>. 2.58 If both 'top' and 'bottom' are ''auto'', 2.59 - the <i>flex item</i> must be positioned so that 2.60 + the absolutely-positioned child must be positioned so that 2.61 its <i>main-start</i> or <i>cross-start</i> edge 2.62 (whichever is in the vertical axis) 2.63 is aligned with the <i>static position</i>. 2.64 @@ -691,17 +691,17 @@ 2.65 2.66 <ol> 2.67 <li> 2.68 - If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>, 2.69 + If there is a subsequent <i>flex item</i> on the same <i>flex line</i>, 2.70 the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>. 2.71 2.72 <li> 2.73 - Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>, 2.74 + Otherwise, if there is a preceding <i>flex item</i> on the same <i>flex line</i>, 2.75 the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>. 2.76 2.77 <li> 2.78 Otherwise, the <i>static position</i> is determined 2.79 by the value of 'justify-content' on the <i>flex container</i> 2.80 - as if the <i>static position</i> were represented by a zero-sized flex item. 2.81 + as if the <i>static position</i> were represented by a zero-sized <i>flex item</i>. 2.82 </ol> 2.83 2.84 <p> 2.85 @@ -709,7 +709,7 @@ 2.86 2.87 <ol> 2.88 <li> 2.89 - If there is a preceding in-flow <i>flex item</i>, 2.90 + If there is a preceding <i>flex item</i>, 2.91 the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i> 2.92 that item is in. 2.93 <li> 2.94 @@ -1208,7 +1208,7 @@ 2.95 <td>0 2.96 <tr> 2.97 <th>Applies to: 2.98 - <td>flex items 2.99 + <td>flex items and absolutely-positioned flex container children 2.100 <tr> 2.101 <th>Inherited: 2.102 <td>no 2.103 @@ -2402,12 +2402,12 @@ 2.104 as described in the <a href="#flex-items">Flex Items</a> section. 2.105 2.106 <li id='algo-flex-order'> 2.107 - <strong>Re-order the flex items according to their 'order'.</strong> 2.108 - The items with the lowest (most negative) 'order' values are first in the ordering. 2.109 - If multiple items share a 'order' value, 2.110 + <strong>Re-order the flex items and absolutely positioned flex container children according to their 'order'.</strong> 2.111 + The elements with the lowest (most negative) 'order' values are first in the ordering. 2.112 + If multiple elements share an 'order' value, 2.113 they're ordered by document order. 2.114 - This affects the order in which the flex items generate boxes in the box-tree, 2.115 - and how the rest of this algorithm deals with the items. 2.116 + This affects the order in which the elements generate boxes in the box-tree, 2.117 + and how the rest of this algorithm deals with the generated flex items. 2.118 </ol> 2.119 2.120 <h3 id='line-sizing'> 2.121 @@ -3280,21 +3280,9 @@ 2.122 2.123 <p> 2.124 The following significant changes were made since the 2.125 - <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 Last Call Working Draft</a>: 2.126 + <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September 2012 Candidate Recommendation</a>: 2.127 <ul> 2.128 - <li>All children of a flex container now become flex items (not just those that are not ''inline''). 2.129 - <li>Defined <a href="#painting">painting behavior of flex items</a>. 2.130 - <li>Made 'z-index' automatically apply to flex items. 2.131 - <li>Changed how absolutely-positioned flex container children are handled so that they don't impact layout. 2.132 - <li>Defined which properties apply to the table wrapper box vs. the table box of a table element. 2.133 - <li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speech/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'nav-index'</a>. 2.134 - <li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>. 2.135 - <li>Defined <a href="#flex-baselines">baselines in flex layout</a>. 2.136 - <li>Various clarifications to the 2.137 - <a href="#flex-containers">flex containers</a> and 2.138 - <a href="#flex-items">flex items</a> chapters. 2.139 - <li>Clarified parsing of the 'flex' shorthand and unitless zeroes. 2.140 - <li>Added or rewrote many examples to make them more realistic and more interesting. 2.141 + <li>Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion). 2.142 </ul> 2.143 2.144 <p>A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of Last Call Comments</a> is available.
