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, 8 April 2011</ h2 >
24+ < h2 class ="no-num no-toc " id =w3c-working > Editor's Draft, 16 April 2011</ h2 >
2525
2626 < dl >
2727 < dt > This version:
2828
29- < dd > <!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110408 /">http://www.w3.org/TR/2011/WD-css3-flexbox-20110408 /</a></dd> -->
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> -->
3030 < a
3131 href ="http://dev.w3.org/csswg/css3-flexbox/ "> http://dev.w3.org/csswg/css3-flexbox/</ a >
3232
@@ -156,7 +156,10 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
156156 < li > < a href ="#resolving-flexible-lengths "> < span class =secno > 5.1. </ span >
157157 Resolving Flexible Lengths</ a >
158158
159- < li > < a href ="#flex-function "> < span class =secno > 5.2. </ span > The
159+ < li > < a href ="#fraction-unit "> < span class =secno > 5.2. </ span > The
160+ ‘< code class =css > fr</ code > ’ unit</ a >
161+
162+ < li > < a href ="#flex-function "> < span class =secno > 5.3. </ span > The
160163 ‘< code class =css > flex()</ code > ’ function</ a >
161164 </ ul >
162165
@@ -600,9 +603,9 @@ <h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
600603 flexbox, the lengths of the left and right margins, left and right
601604 borders, left and right paddings, and widths of all < a
602605 href ="#flexbox-item "> < i > flexbox item</ i > </ a > s share the width of the
603- flexbox itself. Conversely, each < i title =" <i> flexbox item</i>s " > flexbox
604- item's </ i > vertical margins, borders, padding, and height individually
605- share the height of the flexbox.
606+ flexbox itself. Conversely, each < a href =" # flexbox- item" > < i > flexbox
607+ item</ i > </ a > ‘ < code class = property > s </ code > ’ vertical margins,
608+ borders, padding, and height individually share the height of the flexbox.
606609
607610 < div class =figure >
608611 < p class ="caption issue "> TODO: Diagram showing the relevant lengths in
@@ -613,26 +616,17 @@ <h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
613616 in each set. The < a href ="#preflex-size "> < i > preflex size</ i > </ a > of an
614617 inflexible length is just the length itself. The < a
615618 href ="#preflex-size "> < i > preflex size</ i > </ a > of a flexible length is its
616- < a href ="#preferred-size "> < i > preferred size</ i > </ a > . The < dfn
617- id =preferred-size > preferred size</ dfn > defaults to ‘< code
618- class =css > 0</ code > ’, and can be set to a different value with the
619- optional third argument to the ‘< code class =css > flex()</ code > ’
620- function (defined below).
621-
622- < p > If the sum of all the < a href ="#preflex-size "> < i title ="preflex
623- size "> preflex sizes</ i > </ a > is less than the available width/height of the
624- flexbox, then the difference is split up among all the < a
625- href ="#flexible-length "> < i title ="flexible length "> flexible
619+ < i > preferred size</ i > . If the sum of all the < a href ="#preflex-size "> < i
620+ title ="preflex size "> preflex sizes</ i > </ a > is less than the available
621+ width/height of the flexbox, then the difference is split up among all the
622+ < a href ="#flexible-length "> < i title ="flexible length "> flexible
626623 lengths</ i > </ a > with < dfn id =positive-flexibility > positive
627- flexibility</ dfn > (a non-zero value for the first argument to the
628- ‘< code class =css > flex()</ code > ’ function), with the space
629- divvied up proportionally to the flexibility of each length. If the sum is
630- greater than the available width/height, then all the < a
631- href ="#flexible-length "> < i title ="flexible length "> flexible
632- lengths</ i > </ a > with < dfn id =negative-flexibility > negative
633- flexibility</ dfn > (a non-zero value for the second argument to the
634- ‘< code class =css > flex()</ code > ’ function) shrink in proportion
635- to their flexibility to try and make the sum equal the available
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
636630 width/height.
637631
638632 < p > The ‘< a href ="#flex-pack0 "> < code
@@ -642,39 +636,113 @@ <h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
642636 precise details of how free space is determined and assigned to flexible
643637 lengths is detailed in a later chapter.
644638
645- < h3 id =flex-function > < span class =secno > 5.2. </ span > The ‘< code
639+ < h3 id =fraction-unit > < span class =secno > 5.2. </ span > The ‘< code
640+ class =css > fr</ code > ’ unit</ h3 >
641+
642+ < p > The ‘< code class =css > fr</ code > ’ unit, defined in the Values
643+ and Units spec < a href ="#CSS3VAL "
644+ rel =biblioentry > [CSS3VAL]<!--{{!CSS3VAL}}--> </ a > , can be used to specify a
645+ flexible length. When the ‘< code class =css > fr</ code > ’ unit is
646+ used, the < i > preferred size</ i > of the length is ‘< code
647+ class =css > 0</ code > ’, the < a href ="#positive-flexibility "> < i > positive
648+ flexibility</ i > </ a > is equal to the numeric part of the value, and the < a
649+ href ="#negative-flexibility "> < i > negative flexibility</ i > </ a > is
650+ ‘< code class =css > 0</ code > ’.
651+
652+ < h3 id =flex-function > < span class =secno > 5.3. </ span > The ‘< code
646653 class =css > flex()</ code > ’ function</ h3 >
647654
648655 < p > The ‘< code class =css > flex()</ code > ’ function is used to
649656 specify the parameters of a < a href ="#flexible-length "> < i > flexible
650657 length</ i > </ a > : the < a href ="#positive-flexibility "> < i title ="positive
651658 flexibility "> positive</ i > </ a > and < a
652- href ="#negative-flexibility "> < i > negative flexibility</ i > </ a > , and the < a
653- href ="#preferred-size "> < i > preferred size</ i > </ a > . The syntax of the
654- ‘< code class =css > flex()</ code > ’ function is:
659+ href ="#negative-flexibility "> < i > negative flexibility</ i > </ a > , and the
660+ < i > preferred size</ i > . The syntax of the ‘< code
661+ class =css > flex()</ code > ’ function is roughly (see following prose
662+ for a precise description):
655663
656664 < pre
657- class =prod > flex( < a href ="#positive-flexibility "> < i title ="positive flexibility "> <pos-flex> </ i > </ a > [, < a href ="#negative-flexibility "> < i title ="negative flexibility "> <neg-flex> </ i > </ a > [, < a href ="#preferred-size "> < i title ="preferred size "> <preferred-size> </ i > </ a > ]? ]? )</ pre >
658-
659- < p > The first argument sets the < a href ="#positive-flexibility "> < i > positive
660- flexibility</ i > </ a > of the length. It must be a non-negative <number> -
661- anything else is a syntax error.
662-
663- < p > The second argument sets the < a href ="#negative-flexibility "> < i > negative
664- flexibility</ i > </ a > of the length. It must also be a non-negative
665- <number> , with anything else being a syntax error. This argument is
666- optional; if omitted, it defaults to ‘< code
667- class =css > 0</ code > ’.
668-
669- < p > The third and final argument sets the < a
670- href ="#preferred-size "> < i > preferred size</ i > </ a > of the length. It must be
671- a <length> or a <percentage> , or the keyword ‘< code
672- class =css > auto</ code > ’ - anything else is a syntax error. This
673- argument is also optional; if omitted, it defaults to ‘< code
674- class =css > 0</ code > ’.
675-
676- < p class =issue > The precise syntax of the flex() function is still under
677- discussion.</ p >
665+ class =prod > flex( [ < a href ="#positive-flexibility "> < i title ="positive flexibility "> <pos-flex> </ i > </ a > || <!--
666+ --> < a href ="#negative-flexibility "> < i title ="negative flexibility "> <neg-flex> </ i > </ a > || <!--
667+ --> < i title ="preferred size "> <preferred-size> </ i > ] )</ pre >
668+
669+ < dl >
670+ < dt > If the ‘< code class =css > flex()</ code > ’ function contains a
671+ single value:
672+
673+ < dd >
674+ < ul >
675+ < li > If the value is a non-negative number, the < a
676+ href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
677+ that value, the < a href ="#negative-flexibility "> < i > negative
678+ flexibility</ i > </ a > is set to ‘< code class =css > 0</ code > ’,
679+ and the < i > preferred size</ i > is set to ‘< code
680+ class =css > auto</ code > ’.
681+
682+ < li > Otherwise, if the value is a <length> , a <percentage> , or a
683+ valid keyword for ‘< code class =property > width</ code > ’ or
684+ ‘< code class =property > height</ code > ’, the < i > preferred
685+ size</ i > is set to that value, the < a
686+ href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
687+ 1, and the < a href ="#negative-flexibility "> < i > negative
688+ flexibility</ i > </ a > is set to ‘< code class =css > 0</ code > ’.
689+
690+ < li > Otherwise, the ‘< code class =css > flex()</ code > ’ function
691+ is invalid.
692+ </ ul >
693+
694+ < dt > If the ‘< code class =css > flex()</ code > ’ function contains
695+ two values:
696+
697+ < dd >
698+ < ul >
699+ < li > If both values are non-negative numbers, the < a
700+ href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
701+ the first value, the < a href ="#negative-flexibility "> < i > negative
702+ flexibility</ i > </ a > is set to the second value, and the < i > preferred
703+ size</ i > is set to ‘< code class =css > auto</ code > ’.
704+
705+ < li > Otherwise, if one value is a non-negative integer and the other is a
706+ <length> , a <percentage> , or a valid keyword for ‘< code
707+ class =property > width</ code > ’ or ‘< code
708+ class =property > height</ code > ’, the < a
709+ href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
710+ the number, the < a href ="#negative-flexibility "> < i > negative
711+ flexibility</ i > </ a > is set to ‘< code class =css > 0</ code > ’,
712+ and the < i > preferred size</ i > is set to ‘< code
713+ class =css > auto</ code > ’.
714+
715+ < li > Otherwise, the ‘< code class =css > flex()</ code > ’ function
716+ is invalid.
717+ </ ul >
718+
719+ < dt > If the ‘< code class =css > flex()</ code > ’ function contains
720+ three values:
721+
722+ < dd >
723+ < 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
728+ href ="#positive-flexibility "> < i > positive flexibility</ i > </ a > is set to
729+ the first number, the < a href ="#negative-flexibility "> < i > negative
730+ flexibility</ i > </ a > is set to the second number, and the < i > preferred
731+ size</ i > is set to the other value.
732+
733+ < li > Otherwise, the ‘< code class =css > flex()</ code > ’ function
734+ is invalid.
735+ </ ul >
736+ </ dl >
737+
738+ < p class =note > Note that, while ‘< code class =css > 0</ code > ’
739+ <length> s are normally allowed to be specified without a unit suffix,
740+ the definition of the ‘< code class =css > flex()</ code > ’ function
741+ implicitly disallows this. Allowing a unitless ‘< code
742+ class =css > 0</ code > ’ length would cause ambiguity in some cases; even
743+ in the unambiguous cases, the flexible length could instead be written
744+ using the ‘< code class =css > fr</ code > ’ unit, which is shorter
745+ and simpler.</ p >
678746 <!-- ====================================================================== -->
679747
680748 < h2 id =flex-pack > < span class =secno > 6. </ span > The ‘< a
@@ -1352,6 +1420,16 @@ <h3 class=no-num id=normative>Normative references</h3>
13521420 href ="http://www.w3.org/TR/2010/WD-CSS2-20101207 "> http://www.w3.org/TR/2010/WD-CSS2-20101207</ a >
13531421 </ dd >
13541422 <!---->
1423+
1424+ < dt id =CSS3VAL > [CSS3VAL]
1425+
1426+ < dd > Chris Lilley; Håkon Wium Lie. < a
1427+ href ="http://www.w3.org/TR/2006/WD-css3-values-20060919 "> < cite > CSS3
1428+ Values and Units.</ cite > </ a > 19 September 2006. W3C Working Draft. (Work
1429+ in progress.) URL: < a
1430+ href ="http://www.w3.org/TR/2006/WD-css3-values-20060919 "> http://www.w3.org/TR/2006/WD-css3-values-20060919</ a >
1431+ </ dd >
1432+ <!---->
13551433 </ dl >
13561434 <!--end-normative-->
13571435
@@ -1424,9 +1502,6 @@ <h2 class=no-num id=index>Index</h2>
14241502 < li > positive flexibility, < a href ="#positive-flexibility " title ="positive
14251503 flexibility "> < strong > 5.1.</ strong > </ a >
14261504
1427- < li > preferred size, < a href ="#preferred-size " title ="preferred
1428- size "> < strong > 5.1.</ strong > </ a >
1429-
14301505 < li > preflex size, < a href ="#preflex-size " title ="preflex
14311506 size "> < strong > 5.1.</ strong > </ a >
14321507
0 commit comments