202202</ a > </ p >
203203 < h1 class ="p-name no-ref " id =title > CSS Flexible Box Layout Module Level 1</ h1 >
204204 < h2 class ="no-num no-toc no-ref heading settled heading " id =subtitle > < span class =content > Editor’s Draft,
205- < span class =dt-updated > < span class =value-title title =20130920 > 20 September 2013</ span > </ span > </ span > </ h2 >
205+ < span class =dt-updated > < span class =value-title title =20131003 > 3 October 2013</ span > </ span > </ span > </ h2 >
206206 < div data-fill-with =spec-metadata > < dl > < dt > This version:< dd > < a class =u-url href =http://dev.w3.org/csswg/css-flexbox/ > http://dev.w3.org/csswg/css-flexbox/</ 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 >
207- < dt > Feedback:</ dt >
208- < dd > < a href ="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback "> www-style@w3.org</ a >
209- with subject line
210- “< kbd > [css-flexbox] < var > … message topic …</ var > </ kbd > ”
211- (< a href =http://lists.w3.org/Archives/Public/www-style/ rel =discussion > archives</ a > )< dt > Test Suite:< dd > < a href ='<a href="http://test.csswg.org/suites/css3-flexbox/nightly-unstable/">http://test.csswg.org/suites/css3-flexbox/nightly-unstable/</a> '> </ a > < a href =http://test.csswg.org/suites/css3-flexbox/nightly-unstable/ > http://test.csswg.org/suites/css3-flexbox/nightly-unstable/</ a > < dt > Editors:
207+ < dt > Feedback:</ dt >
208+ < dd > < a href ="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback "> www-style@w3.org</ a >
209+ with subject line
210+ “< kbd > [css-flexbox] < var > … message topic …</ var > </ kbd > ”(< a href =http://lists.w3.org/Archives/Public/www-style/ rel =discussion > archives</ a > )< dt > Test Suite:< dd > < a href =http://test.csswg.org/suites/css3-flexbox/nightly-unstable/ > http://test.csswg.org/suites/css3-flexbox/nightly-unstable/</ a > < dt > Editors:
212211< dd class ="p-author h-card vcard "> < a class ="p-name fn u-url url " href =http://xanthir.com/contact/ > Tab Atkins Jr.</ a > (< span class ="p-org org "> Google</ span > )< dd class ="p-author h-card vcard "> < a class ="p-name fn u-url url " href =http://fantasai.inkedblade.net/contact > fantasai</ a > (< span class ="p-org org "> Mozilla</ span > )< dd class ="p-author h-card vcard "> < a class ="p-name fn u-email email " href =mailto:ratan@microsoft.com > Rossen Atanassov</ a > (< span class ="p-org org "> Microsoft</ span > )< dt > Former Editors:
213212< dd class ="p-author h-card vcard "> < a class ="p-name fn u-email email " href =mailto:alexmog@microsoft.com > Alex Mogilevsky</ a > (< span class ="p-org org "> Microsoft Corporation</ span > )< dd class ="p-author h-card vcard "> < a class ="p-name fn u-email email " href =mailto:dbaron@dbaron.org > L. David Baron</ a > (< span class ="p-org org "> Mozilla Corporation</ span > )< dd class ="p-author h-card vcard "> < a class ="p-name fn u-email email " href =mailto:enndeakin@gmail.com > Neil Deakin</ a > (< span class ="p-org org "> Mozilla Corporation</ span > )< dd class ="p-author h-card vcard "> < a class ="p-name fn u-email email " href =mailto:ian@hixie.ch > Ian Hickson</ a > (< span class ="p-org org "> formerly of Opera Software</ span > )< dd class ="p-author h-card vcard "> < a class ="p-name fn u-email email " href =mailto:hyatt@apple.com > David Hyatt</ a > (< span class ="p-org org "> formerly of Netscape Corporation</ span > )< dt > Issues List:< dd > Tracked in spec, and in < a href ="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Flexbox&resolution=--- "> Bugzilla</ a > </ dl > </ div >
214213 < div data-fill-with =warning > </ div >
@@ -736,7 +735,7 @@ <h3 class="heading settled heading" data-level=4.3 id=painting><span class=secno
736735 < p >
737736 < 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 =#css21 title =css21 > [CSS21]</ a > ,
738737 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,
739- and < a href =http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index > ’ z-index' </ a >
738+ and < a href =http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index > < a class = property data-link-type = propdesc href = http://dev.w3.org/csswg/css-position-3/# z-index title = z-index > z-index </ a > </ a >
740739 values other than < a class =css-code data-link-for =z-index data-link-type =value title =auto > auto</ a > create a stacking context
741740 even if < a class =property data-link-type =propdesc href =http://dev.w3.org/csswg/css-position-3/#position title =position > position</ a > is < span class =css data-link-type =maybe title =static > static</ span > .
742741
@@ -910,7 +909,7 @@ <h3 class="heading settled heading" data-level=5.1 id=flex-direction-property><s
910909 < 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 >
911910 < dd >
912911 The flex container’s < a data-link-type =dfn href =#main-axismain-axis title ="main axis "> main axis</ a > has the same orientation as the
913- < a data-link-type =dfn href =http://dev.w3.org/csswg/css-writing-modes-3/#inline-axis title ="inline axis "> inline axis</ a >
912+ < a data-link-type =dfn href =http://dev.w3.org/csswg/css-writing-modes-3/#inline-axis--inline-axis title ="inline axis "> inline axis</ a >
914913 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 > .
915914 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 equivalent to the
916915 < a data-link-type =dfn href =http://dev.w3.org/csswg/css-writing-modes-3/#inline-start title =inline-start > inline-start</ a > and
@@ -925,7 +924,7 @@ <h3 class="heading settled heading" data-level=5.1 id=flex-direction-property><s
925924 < 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 >
926925 < dd >
927926 The flex container’s < a data-link-type =dfn href =#main-axismain-axis title ="main axis "> main axis</ a > has the same orientation as the
928- < a data-link-type =dfn href =http://dev.w3.org/csswg/css-writing-modes-3/#block-axis title ="block axis "> block axis</ a >
927+ < a data-link-type =dfn href =http://dev.w3.org/csswg/css-writing-modes-3/#block-axis--block-axis title ="block axis "> block axis</ a >
929928 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 > .
930929 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 equivalent to the
931930 < a data-link-type =dfn href =http://dev.w3.org/csswg/css-writing-modes-3/#block-start title =block-start > block-start</ a > and
@@ -2993,18 +2992,18 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
29932992Property index</ span > < a class =self-link href =#property-index > </ a > </ h2 >
29942993< div data-fill-with =property-index > < table class =proptable > < thead > < tr > < th scope =col > Name< th scope =col > Value< th scope =col > Initial< th scope =col > Applies To< th scope =col > Inh.< th scope =col > %ages< th scope =col > Media< th scope =col > Animatable< th scope =col > Applies to< th scope =col > Canonical order< th scope =col > Computed value< th scope =col > New values< tbody >
29952994< tr > < th scope =row > < a data-property =""> display</ a > < td > < td > < td > < td > < td > < td > < td > < td > < td > < td > < td > flex | inline-flex
2996- < tr > < th scope =row > < a data-property =""> flex-direction</ a > < td > row | row-reverse | column | column-reverse< td > row< td > < td > no< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > specified value< td >
2997- < tr > < th scope =row > < a data-property =""> flex-wrap</ a > < td > nowrap | wrap | wrap-reverse< td > nowrap< td > < td > no< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > specified value< td >
2998- < tr > < th scope =row > < a data-property =""> flex-flow</ a > < td > <<a data-link-type="propdesc" class="property" title=" flex-direction" href="#propdef-flex-direction" >flex-direction</a>&gt; || & lt;<a data-link-type="propdesc" class="property" title=" flex-wrap" href="#propdef-flex-wrap" >flex-wrap</a>&gt; < td > see individual properties< td > < td > see individual properties< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > see individual properties< td >
2999- < tr > < th scope =row > < a data-property =""> order</ a > < td > <a data-link-type="type" class="production" title="&lt; integer& gt;" href="http://dev.w3.org/csswg/css-syntax-3/#typedef-integer">&lt;integer&gt;</a> < td > 0< td > < td > no< td > < td > visual< td > yes< td > <a data-link-type="dfn" title=" flex items" href="#flex-item">flex items</a> and absolutely-positioned children of <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > specified value< td >
3000- < tr > < th scope =row > < a data-property =""> flex</ a > < td > none | [ <a data-link-type="propdesc" class="production" title="flex-grow" href="#propdef-flex-grow">&lt; ‘flex-grow’& gt;</a> <a data-link-type="propdesc" class="production" title="flex-shrink" href="#propdef-flex-shrink">&lt; ‘flex-shrink’& gt;</a> ? || <a data-link-type="propdesc" class="production" title="flex-basis" href="#propdef-flex-basis">&lt; ‘flex-basis’& gt;</a> ]< td > see individual properties< td > < td > see individual properties< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex items" href="#flex-item">flex items</a> < td > per grammar< td > see individual properties< td >
3001- < tr > < th scope =row > < a data-property =""> flex-grow</ a > < td > <a data-link-type="type" class="production" title="&lt; number& gt;" href="http://dev.w3.org/csswg/css-values-3/#number-value">&lt;number&gt;</a> < td > 0< td > < td > no< td > < td > visual< td > yes, except between <span data-link-type="maybe" class="css" title="0">0</span> and other values< td > <a data-link-type="dfn" title=" flex items" href="#flex-item">flex items</a> < td > < td > specified value< td >
3002- < tr > < th scope =row > < a data-property =""> flex-shrink</ a > < td > <a data-link-type="type" class="production" title="&lt; number& gt;" href="http://dev.w3.org/csswg/css-values-3/#number-value">&lt;number&gt;</a> < td > 1< td > < td > no< td > < td > visual< td > yes, except between <span data-link-type="maybe" class="css" title="0">0</span> and other values< td > <a data-link-type="dfn" title=" flex items" href="#flex-item">flex items</a> < td > < td > specified value< td >
3003- < tr > < th scope =row > < a data-property =""> flex-basis</ a > < td > auto | <a data-link-type="propdesc" class="production" title="width" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">&lt; ‘width’& gt;</a> < td > auto< td > < td > no< td > realtive to the <a data-link-type="dfn" title=" flex container’s" href="#flex-container">flex container’s</a> inner <a data-link-type="dfn" title=" main size" href="#main-size">main size</a> < td > visual< td > as <a data-link-type="propdesc" class="property" title=" width" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> < td > <a data-link-type="dfn" title=" flex items" href="#flex-item">flex items</a> < td > < td > as specified, with lengths made absolute< td >
3004- < tr > < th scope =row > < a data-property =""> justify-content</ a > < td > flex-start | flex-end | center | space-between | space-around< td > flex-start< td > < td > no< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > specified value< td >
3005- < tr > < th scope =row > < a data-property =""> align-items</ a > < td > flex-start | flex-end | center | baseline | stretch< td > stretch< td > < td > no< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > specified value< td >
3006- < tr > < th scope =row > < a data-property =""> align-self</ a > < td > auto | flex-start | flex-end | center | baseline | stretch< td > auto< td > < td > no< td > < td > visual< td > < td > <a data-link-type="dfn" title=" flex items" href="#flex-item">flex items</a> < td > < td > <a data-link-type="value" data-link-for="align-self" title=" auto" href="#valuedef-auto">auto</a> computes to parent’s <a data-link-type="propdesc" class="property" title=" align-items" href="#propdef-align-items">align-items</a> value; otherwise as specified< td >
3007- < tr > < th scope =row > < a data-property =""> align-content</ a > < td > flex-start | flex-end | center | space-between | space-around | stretch< td > stretch< td > < td > no< td > < td > visual< td > < td > <a data-link-type="dfn" title=" multi-line" href="#multi-line">multi-line</a> <a data-link-type="dfn" title=" flex containers" href="#flex-container">flex containers</a> < td > < td > specified value< td > </ table > </ div >
2995+ < tr > < th scope =row > < a data-property =""> flex-direction</ a > < td > row | row-reverse | column | column-reverse< td > row< td > < td > no< td > < td > visual< td > < td > flex containers< td > < td > specified value< td >
2996+ < tr > < th scope =row > < a data-property =""> flex-wrap</ a > < td > nowrap | wrap | wrap-reverse< td > nowrap< td > < td > no< td > < td > visual< td > < td > flex containers< td > < td > specified value< td >
2997+ < tr > < th scope =row > < a data-property =""> flex-flow</ a > < td > <flex-direction> || <flex-wrap>< td > see individual properties< td > < td > see individual properties< td > < td > visual< td > < td > flex containers< td > < td > see individual properties< td >
2998+ < tr > < th scope =row > < a data-property =""> order</ a > < td > <integer>< td > 0< td > < td > no< td > < td > visual< td > yes< td > flex items and absolutely-positioned children of flex containers< td > < td > specified value< td >
2999+ < tr > < th scope =row > < a data-property =""> flex</ a > < td > none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]< td > see individual properties< td > < td > see individual properties< td > < td > visual< td > < td > flex items< td > per grammar< td > see individual properties< td >
3000+ < tr > < th scope =row > < a data-property =""> flex-grow</ a > < td > <number>< td > 0< td > < td > no< td > < td > visual< td > yes, except between 0 and other values< td > flex items< td > < td > specified value< td >
3001+ < tr > < th scope =row > < a data-property =""> flex-shrink</ a > < td > <number>< td > 1< td > < td > no< td > < td > visual< td > yes, except between 0 and other values< td > flex items< td > < td > specified value< td >
3002+ < tr > < th scope =row > < a data-property =""> flex-basis</ a > < td > auto | <‘width’>< td > auto< td > < td > no< td > realtive to the flex container’s inner main size< td > visual< td > as width< td > flex items< td > < td > as specified, with lengths made absolute< td >
3003+ < tr > < th scope =row > < a data-property =""> justify-content</ a > < td > flex-start | flex-end | center | space-between | space-around< td > flex-start< td > < td > no< td > < td > visual< td > < td > flex containers< td > < td > specified value< td >
3004+ < tr > < th scope =row > < a data-property =""> align-items</ a > < td > flex-start | flex-end | center | baseline | stretch< td > stretch< td > < td > no< td > < td > visual< td > < td > flex containers< td > < td > specified value< td >
3005+ < tr > < th scope =row > < a data-property =""> align-self</ a > < td > auto | flex-start | flex-end | center | baseline | stretch< td > auto< td > < td > no< td > < td > visual< td > < td > flex items< td > < td > auto computes to parent’s align-items value; otherwise as specified< td >
3006+ < tr > < th scope =row > < a data-property =""> align-content</ a > < td > flex-start | flex-end | center | space-between | space-around | stretch< td > stretch< td > < td > no< td > < td > visual< td > < td > multi-line flex containers< td > < td > specified value< td > </ table > </ div >
30083007
30093008
30103009< h2 class ="no-num heading settled " id =issues-index > < span class =content > Issues Index</ span > < a class =self-link href =#issues-index > </ a > </ h2 > < div style ="counter-reset: issue "> < p class =issue >
0 commit comments