2121
2222 < h1 id =head-box-flexible > Flexible Box Layout Module</ h1 >
2323
24- < h2 class ="no-num no-toc " id =w3c-working > Editor's Draft, 16 April 2011</ h2 >
24+ < h2 class ="no-num no-toc " id =w3c-working > Editor's Draft, 19 April 2011</ h2 >
2525
2626 < dl >
2727 < dt > This version:
2828
29- < dd > <!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110416 /">http://www.w3.org/TR/2011/WD-css3-flexbox-20110416 /</a></dd> -->
29+ < dd > <!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110419 /">http://www.w3.org/TR/2011/WD-css3-flexbox-20110419 /</a></dd> -->
3030 < a
3131 href ="http://dev.w3.org/csswg/css3-flexbox/ "> http://dev.w3.org/csswg/css3-flexbox/</ a >
3232
@@ -579,16 +579,16 @@ <h2 id=flexibility><span class=secno>5. </span> Flexibility</h2>
579579
580580 < p > The defining aspect of flexbox layout is the ability to make various
581581 lengths of the < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > s flexible.
582- Flexible lengths can be used for the ‘< code
583- class =property > width</ code > ’, ‘< code
582+ The ‘< code class =property > width</ code > ’, ‘< code
584583 class =property > height</ code > ’, ‘< code
585584 class =property > padding</ code > ’, and ‘< code
586- class =property > margin</ code > ’ properties of < a
587- href ="#flexbox-item "> < i > flexbox item</ i > </ a > s. A < dfn
588- id =flexible-length > flexible length</ dfn > can grow if the flexbox has extra
589- space available, or shrink if the flexbox would otherwise overflow. The
590- ‘< code class =css > flex()</ code > ’ function is used to specify a
591- < a href ="#flexible-length "> < i > flexible length</ i > </ a > and it's parameters.
585+ class =property > margin</ code > ’ properties of a < a
586+ href ="#flexbox-item "> < i > flexbox item</ i > </ a > can all be made flexible.
587+ Paddings and margins are made flexible by setting their value to
588+ ‘< code class =css > auto</ code > ’, while the width and height of a
589+ box can be controlled more precisely with the ‘< code
590+ class =css > fr</ code > ’ unit or the ‘< code
591+ class =css > flex()</ code > ’ function, both defined below.
592592
593593 < div class =example >
594594 < p class =issue > TODO: Examples!</ p >
@@ -597,13 +597,12 @@ <h2 id=flexibility><span class=secno>5. </span> Flexibility</h2>
597597 < h3 id =resolving-flexible-lengths > < span class =secno > 5.1. </ span > Resolving
598598 Flexible Lengths</ h3 >
599599
600- < p > CSS resolves a < a href ="#flexible-length "> < i > flexible length</ i > </ a >
601- into a definite length by first collecting all the lengths, flexible or
602- inflexible, that will share some space. For example, for a horizontal
603- flexbox, the lengths of the left and right margins, left and right
604- borders, left and right paddings, and widths of all < a
605- href ="#flexbox-item "> < i > flexbox item</ i > </ a > s share the width of the
606- flexbox itself. Conversely, each < a href ="#flexbox-item "> < i > flexbox
600+ < p > CSS resolves a < i > flexible length</ i > into a definite length by first
601+ collecting all the lengths, flexible or inflexible, that will share some
602+ space. For example, for a horizontal flexbox, the lengths of the left and
603+ right margins, left and right borders, left and right paddings, and widths
604+ of all < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > s share the width of
605+ the flexbox itself. Conversely, each < a href ="#flexbox-item "> < i > flexbox
607606 item</ i > </ a > ‘< code class =property > s</ code > ’ vertical margins,
608607 borders, padding, and height individually share the height of the flexbox.
609608
@@ -619,15 +618,13 @@ <h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
619618 < i > preferred size</ i > . If the sum of all the < a href ="#preflex-size "> < i
620619 title ="preflex size "> preflex sizes</ i > </ a > is less than the available
621620 width/height of the flexbox, then the difference is split up among all the
622- < a href ="#flexible-length "> < i title ="flexible length "> flexible
623- lengths</ i > </ a > with < dfn id =positive-flexibility > positive
624- flexibility</ dfn > , with the space divvied up proportionally to the
625- flexibility of each length. If the sum is greater than the available
626- width/height, then all the < a href ="#flexible-length "> < i title ="flexible
627- length "> flexible lengths</ i > </ a > with < dfn
628- id =negative-flexibility > negative flexibility</ dfn > shrink in proportion to
629- their flexibility to try and make the sum equal the available
630- width/height.
621+ < i title ="flexible length "> flexible lengths</ i > with < dfn
622+ id =positive-flexibility > positive flexibility</ dfn > , with the space divvied
623+ up proportionally to the flexibility of each length. If the sum is greater
624+ than the available width/height, then all the < i title ="flexible
625+ length "> flexible lengths</ i > with < dfn id =negative-flexibility > negative
626+ flexibility</ dfn > shrink in proportion to their flexibility to try and
627+ make the sum equal the available width/height.
631628
632629 < p > The ‘< a href ="#flex-pack0 "> < code
633630 class =property > flex-pack</ code > </ a > ’ and ‘< a
@@ -653,8 +650,8 @@ <h3 id=flex-function><span class=secno>5.3. </span> The ‘<code
653650 class =css > flex()</ code > ’ function</ h3 >
654651
655652 < p > The ‘< code class =css > flex()</ code > ’ function is used to
656- specify the parameters of a < a href =" # flexible- length" > < i > flexible
657- length </ i > </ a > : the < a href ="#positive-flexibility "> < i title ="positive
653+ specify the parameters of a < i > flexible length</ i > : the < a
654+ href ="#positive-flexibility "> < i title ="positive
658655 flexibility "> positive</ i > </ a > and < a
659656 href ="#negative-flexibility "> < i > negative flexibility</ i > </ a > , and the
660657 < i > preferred size</ i > . The syntax of the ‘< code
@@ -721,10 +718,17 @@ <h3 id=flex-function><span class=secno>5.3. </span> The ‘<code
721718
722719 < dd >
723720 < ul >
724- < li > If two of the values are non-negative numbers, and the other is a
725- <length> (with a unit suffix), a <percentage> , or a valid keyword
726- for ‘< code class =property > width</ code > ’ or ‘< code
727- class =property > height</ code > ’, the < a
721+ < li > If the first two values are non-negative numbers and the third value
722+ is ‘< code class =css > 0</ code > ’, the < a
723+ href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
724+ the first value, the < a href ="#negative-flexibility "> < i > negative
725+ flexibility</ i > </ a > is set to the second value, and the < i > preferred
726+ size</ i > is set to ‘< code class =css > 0px</ code > ’.
727+
728+ < li > Otherwise, If two of the values are non-negative numbers, and the
729+ other is a <length> (with a unit suffix), a <percentage> , or a
730+ valid keyword for ‘< code class =property > width</ code > ’ or
731+ ‘< code class =property > height</ code > ’, the < a
728732 href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
729733 the first number, the < a href ="#negative-flexibility "> < i > negative
730734 flexibility</ i > </ a > is set to the second number, and the < i > preferred
@@ -790,10 +794,9 @@ <h2 id=flex-pack><span class=secno>6. </span> The ‘<a
790794 < p > Between and around the margins of < a href ="#flexbox-item "> < i > flexbox
791795 item</ i > </ a > s there are additional flexible lengths, called < dfn
792796 id =packing-space > packing space</ dfn > . Packing space can absorb leftover
793- free space in a flexbox if there aren't any other < a
794- href ="#flexible-length "> < i > flexible length</ i > </ a > s, or if all the < a
795- href ="#flexible-length "> < i > flexible length</ i > </ a > s have reached their
796- maximum size. The ‘< a href ="#flex-pack0 "> < code
797+ free space in a flexbox if there aren't any other < i > flexible length</ i > s,
798+ or if all the < i > flexible length</ i > s have reached their maximum size. The
799+ ‘< a href ="#flex-pack0 "> < code
797800 class =property > flex-pack</ code > </ a > ’ property defines the
798801 flexibility of these packing spaces:
799802
@@ -925,20 +928,19 @@ <h2 id=flex-align><span class=secno>7. </span> The ‘<a
925928
926929 < p > By default, laying out < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > s
927930 in the < a href ="#length-axis "> < i > length axis</ i > </ a > is a simple matter of
928- determining free space and then splitting it between any < a
929- href ="#flexible-length "> < i > flexible length</ i > </ a > s in that axis. This is
930- not always sufficient, however; in particular, it is often useful to align
931- < a href ="#flexbox-item "> < i > flexbox item</ i > </ a > s by their baseline. The
932- ‘< a href ="#flex-align0 "> < code
931+ determining free space and then splitting it between any < i > flexible
932+ length</ i > s in that axis. This is not always sufficient, however; in
933+ particular, it is often useful to align < a href ="#flexbox-item "> < i > flexbox
934+ item</ i > </ a > s by their baseline. The ‘< a href ="#flex-align0 "> < code
933935 class =property > flex-align</ code > </ a > ’ property changes the way free
934936 space is allocated in the < a href ="#length-axis "> < i > length axis</ i > </ a > .
935937
936938 < dl >
937939 < dt > auto
938940
939941 < dd > Allocate free space in the < a href ="#length-axis "> < i > length
940- axis</ i > </ a > as normal, by distributing it proportionally between < a
941- href =" #flexible-length " > < i > flexible length</ i > </ a > s in that axis.
942+ axis</ i > </ a > as normal, by distributing it proportionally between
943+ < i > flexible length</ i > s in that axis.
942944
943945 < dt > baseline
944946
@@ -1414,16 +1416,16 @@ <h3 class=no-num id=normative>Normative references</h3>
14141416 < dt id =CSS21 > [CSS21]
14151417
14161418 < dd > Bert Bos; et al. < a
1417- href ="http://www.w3.org/TR/2010/WD -CSS2-20101207 "> < cite > Cascading Style
1418- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</ cite > </ a > 7 December
1419- 2010 . W3C Working Draft . (Work in progress.) URL: < a
1420- href ="http://www.w3.org/TR/2010/WD -CSS2-20101207 "> http://www.w3.org/TR/2010/WD -CSS2-20101207 </ a >
1419+ href ="http://www.w3.org/TR/2009/CR -CSS2-20090423 "> < cite > Cascading Style
1420+ Sheets Level 2 Revision 1 (CSS  2.1) Specification.</ cite > </ a > 23
1421+ April 2009 . W3C Candidate Recommendation . (Work in progress.) URL: < a
1422+ href ="http://www.w3.org/TR/2009/CR -CSS2-20090423 "> http://www.w3.org/TR/2009/CR -CSS2-20090423 </ a >
14211423 </ dd >
14221424 <!---->
14231425
14241426 < dt id =CSS3VAL > [CSS3VAL]
14251427
1426- < dd > Chris Lilley; Håkon Wium Lie. < a
1428+ < dd > Håkon Wium Lie; Chris Lilley . < a
14271429 href ="http://www.w3.org/TR/2006/WD-css3-values-20060919 "> < cite > CSS3
14281430 Values and Units.</ cite > </ a > 19 September 2006. W3C Working Draft. (Work
14291431 in progress.) URL: < a
@@ -1454,9 +1456,6 @@ <h2 class=no-num id=index>Index</h2>
14541456 < li > flex-direction, < a href ="#flex-direction0 "
14551457 title =flex-direction > < strong > 3.</ strong > </ a >
14561458
1457- < li > flexible length, < a href ="#flexible-length " title ="flexible
1458- length "> < strong > 5.</ strong > </ a >
1459-
14601459 < li > flex-order, < a href ="#flex-order0 "
14611460 title =flex-order > < strong > 4.</ strong > </ a >
14621461
0 commit comments