206206 < h1 class ="p-name no-ref " id =title > CSS Flexible Box Layout Module Level 1</ h1 >
207207 < h2 class ="no-num no-toc no-ref heading settled heading " id =subtitle > < span class =content > W3C Last Call Working Draft,
208208 < span class =dt-updated > < span class =value-title title =20140325 > 25 March 2014</ span > </ span > </ span > </ h2 >
209- < div data-fill-with =spec-metadata > < dl > < dt > This version:< dd > < a class =u-url href =http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/ > http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/</ a > < dt > Latest version:< dd > < a href =http://www.w3.org/TR/css3-flexbox/ > http://www.w3.org/TR/css3-flexbox/</ a > < dt > Editor’s Draft:< dd > < a href =http://dev.w3.org/csswg/css-flexbox/ > http://dev.w3.org/csswg/css-flexbox/</ a > < dt > Previous Versions:< dd > < a href =http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ rel =previous > http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</ a > < dd > < a href =http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/ rel =previous > http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</ a > < dd > < a href =http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/ rel =previous > http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</ a > < dd > < a href =http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/ rel =previous > http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</ a > < dd > < a href =http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/ rel =previous > http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</ a > < dd > < a href =http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ rel =previous > http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</ a >
209+ < div data-fill-with =spec-metadata > < dl > < dt > This version:< dd > < a class =u-url href =http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/ > http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/</ a > < dt > Latest version:< dd > < a href =http://www.w3.org/TR/css-flexbox/ > http://www.w3.org/TR/css-flexbox/</ a > < dt > Editor’s Draft:< dd > < a href =http://dev.w3.org/csswg/css-flexbox/ > http://dev.w3.org/csswg/css-flexbox/</ a > < dt > Previous Versions:< dd > < a href =http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ rel =previous > http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</ a > < dd > < a href =http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/ rel =previous > http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</ a > < dd > < a href =http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/ rel =previous > http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</ a > < dd > < a href =http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/ rel =previous > http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</ a > < dd > < a href =http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/ rel =previous > http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</ a > < dd > < a href =http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ rel =previous > http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</ a >
210210 < dt > Feedback:</ dt >
211211 < dd > < a href ="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback "> www-style@w3.org</ a >
212212 with subject line
@@ -376,7 +376,7 @@ <h3 class="heading settled heading" data-level=1.1 id=overview><span class=secno
376376 can be laid out in any < a href =#flex-direction-property > flow direction</ a >
377377 (leftwards, rightwards, downwards, or even upwards!)
378378 < li >
379- can have their display order < a href =#flex-flow -row-reverse > reversed</ a > or
379+ can have their display order < a href =#valuedef -row-reverse > reversed</ a > or
380380 < a href =#order-property > rearranged</ a > at the style layer
381381 (i.e., visual order can be independent of source and speech order)
382382 < li >
@@ -423,7 +423,7 @@ <h3 class="heading settled heading" data-level=1.1 id=overview><span class=secno
423423
424424 < pre > <style>
425425#deals {
426- display: flex; /* Flex layout so items < a href =#align-self title ="Flex items stretch by default. "> have equal height</ a > */
426+ display: flex; /* Flex layout so items < a href =#propdef- align-self title ="Flex items stretch by default. "> have equal height</ a > */
427427 flex-flow: row wrap; /* < a href =http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property > Allow items to wrap into multiple lines</ a > */
428428}
429429.sale-item {
@@ -432,7 +432,7 @@ <h3 class="heading settled heading" data-level=1.1 id=overview><span class=secno
432432}
433433.sale-item > img {
434434 order: -1; /* < a href =#order-property > Shift image before other content (in visual order)</ a > */
435- align-self: center; /* < a href =#align-self > Center the image cross-wise (horizontally)</ a > */
435+ align-self: center; /* < a href =#propdef- align-self > Center the image cross-wise (horizontally)</ a > */
436436}
437437.sale-item > button {
438438 margin-top: auto; /* < a href =#auto-margins > Auto top margin pushes button to bottom</ a > */
@@ -1204,7 +1204,7 @@ <h4 class="heading settled heading" data-level=5.4.1 id=order-accessibility><spa
12041204#main > aside { order: 3; width: 200px; }</ pre >
12051205 < p >
12061206 As an added bonus,
1207- the columns will all be < a href =#align-stretch > equal-height</ a > by default,
1207+ the columns will all be < a href =#propdef- align-stretch > equal-height</ a > by default,
12081208 and the main content will be as wide as necessary to fill the screen.
12091209 Additionally,
12101210 this can then be combined with media queries to switch to an all-vertical layout on narrow screens:
0 commit comments