- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 22 Feb 2011 23:44:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox In directory hutz:/tmp/cvs-serv12896 Modified Files: Overview.new.src.html Log Message: Rewrote the Flexibility chapter for better organization and clarity. Switched over to AlexMog's suggestion for flex() syntax, dropped the 'fl' unit. Index: Overview.new.src.html =================================================================== RCS file: /sources/public/csswg/css3-flexbox/Overview.new.src.html,v retrieving revision 1.10 retrieving revision 1.11 diff -u -d -r1.10 -r1.11 --- Overview.new.src.html 22 Feb 2011 23:27:48 -0000 1.10 +++ Overview.new.src.html 22 Feb 2011 23:44:10 -0000 1.11 @@ -338,82 +338,74 @@ <p>The defining aspect of Flexbox Layout is the ability to make various lengths of the flexbox children flexible. Flexible lengths can be used for the 'width', - 'height', 'padding', and 'margin' properties. A <dfn>flexible length</dfn> can grow if - the flexbox has extra space available, or shrink if the flexbox would otherwise - overflow.</p> - - <p>When figuring out how large a flexible length should be, CSS starts with - the length's <dfn>preferred size</dfn>. For lengths specified using the ''fl'' - unit, the preferred size is ''0'' - it starts from nothing, and only gets some - space if there is any left over to distribute. For lengths specified with the - ''flex()'' function, the preferred size is the value of the first argument.</p> - - <p>CSS then sums all the lengths that are sharing space, whether they are flexible - or inflexible, and subtracts that value from the total available space in that - direction. If there's space left over, then any lengths with <dfn>positive flexibility</dfn> - split the space between each other in proportion to their flexibility. If - the sum is larger than the available space, so that the flexbox would be overflowing, - then any lengths with <dfn>negative flexibility</dfn> shrink in proportion to - their flexibility, so that the contents of the flexbox exactly fit without - overflowing.</p> + 'height', 'padding', and 'margin' properties of flexbox children. A + <dfn>flexible length</dfn> can grow if the flexbox has extra space available, + or shrink if the flexbox would otherwise overflow. The ''flex()'' function + is used to specify a <i>flexible length</i> and it's parameters.</p> - <p>The 'flex-pack' and 'flex-align' properties offer more complex control over - free-space distribution. The precise details of how free space is determined - and assigned to flexible lengths is detailed in a later chapter.</p> + <div class=example> + <p class=issue>TODO: Examples!</p> + </div> - <p>For <i>flexbox children</i>, the 'width', 'height', 'padding', and 'margin' - properties additionally accept the <dfn><flex></dfn> data type. Using - ''<flex>'' in any other context is a syntax error. The ''<flex>'' data - type can be expressed in two forms: the ''fl'' unit, and the ''flex()'' function.</p> +<h3 id=resolving-flexible-lengths> +Resolving Flexible Lengths</h3> - <div> - <h3 id=flex-unit>The ''fl'' unit</h3> + <p>CSS resolves a <i>flexible length</i> into a definite length by first collecting + all the lengths, flexible or inflexible, that will share some space. For example, + for a horizontal flexbox, the lengths of the left and right margins, left and right + borders, left and right paddings, and widths of all <i>flexbox children</i> share + the width of the flexbox itself. Conversely, each <i title="flexbox children">flexbox child's</i> + vertical margins, borders, padding, and height individually share the height + of the flexbox.</p> - <p>One way to indicate that a length is flexible is by setting the property's - value using the <dfn>flex unit</dfn>, denoted as a ''<number>'' followed by ''fl''. - The ''fl'' unit defines a <i>flexible length</i> with a <i>preferred size</i> - of ''0'', a minimum size of ''0'', no maximum size, and a flexibility equal - to its value.</p> + <div class=figure> + <p class="caption issue">TODO: Diagram showing the relevant lengths + in each axis.</p> </div> - <div> - <h3 id=flex-function>The ''flex()'' function</h3> - - <p>For more complex flexible lengths, the ''flex()'' function can be used - to specify various attributes of the length; most importantly, the ''flex()'' - function can specify a non-zero length for the <i>preferred size</i>. The - syntax of the ''flex()'' function is:</p> - - <pre class=prod>flex( <preferred-size>, <flex-grow>[, <flex-shrink>]? )</pre> + <p>CSS then sums the <dfn>preflex size</dfn> of the lengths in each set. The + <i>preflex size</i> of an inflexible length is just the length itself. The + <i>preflex size</i> of a flexible length is its <i>preferred size</i>. The + <i>preferred size</i> defaults to ''0'', and can be set to a different value + with the optional third argument to the ''flex()'' function (defined below).</p> - <p>The first argument given to the function sets the <i>preferred size</i> - of the <i>flexible length</i>. It must be a value that would be valid for the property - the ''flex()'' function is being used on, and resolves to the same length - that it would if used in that property (with the exception of ''auto'', which - is handled specially in flexbox layout). It must not be a ''<flex>'' - value itself.</p> + <p>If the sum of all the <i title="preflex size">preflex sizes</i> is less than + the available width/height of the flexbox, then the difference is split up among all the + <i title="flexible length">flexible lengths</i> with <dfn>positive flexibility</dfn> + (a non-zero value for the first argument to the ''flex()'' function), with the + space divvied up proportionally to the flexibility of each length. If the sum + is greater than the available width/height, then all the + <i title="flexible length">flexible lengths</i> with <dfn>negative flexibility</dfn> + (a non-zero value for the second argument to the ''flex()'' function) shrink + in proportion to their flexibility to try and make the sum equal the available + width/height.</p> + + <p>The 'flex-pack' and 'flex-align' properties offer more complex control over + free-space distribution. The precise details of how free space is determined + and assigned to flexible lengths is detailed in a later chapter.</p> + +<h3 id=flex-function> +The ''flex()'' function</h3> + + <p>The ''flex()'' function is used to specify the parameters of a + <i>flexible length</i>: the <i title="positive flexibility">positive</i> + and <i>negative flexibility</i>, and the <i>preferred size</i>. The syntax + of the ''flex()'' function is:</p> - <p>The second argument sets the <i>positive flexibility</i> of the length. - It must be specified in flex units.</p> + <pre class=prod>flex( <i title="positive flexibility"><pos-flex></i>[, <i title="negative flexibility"><neg-flex></i>[, <i title="preferred size"><preferred-size></i>]?]? )</pre> - <p>The third argument is optional. If provided, it sets the <i>negative flexibility</i> - of the <i>flexible length</i>. Just like the previous argument, it must - be specified in <i>flex unit</i>s. If not provided, the <i>negative flexibility</i> - of the length is ''0''.</p> + <p>The first argument sets the <i>positive flexibility</i> of the length. + It must be a non-negative <number> - anything else is a syntax error.</p> - <p>Flexible lengths created by the ''flex()'' function have a minimum size - of ''0'' and no maximum size.</p> - </div> + <p>The second argument sets the <i>negative flexibility</i> of the length. + It must also be a non-negative <number>, with anything else being a syntax + error. This argument is optional; if omitted, it defaults to ''0''.</p> - <div class=figure> - <p class=caption><span class=issue>TODO: Diagram showing the relevant flexible - lengths in both the layout and transverse axis.</span></p> - </div> + <p>The third and final argument sets the <i>preferred size</i> of the length. + It must be a <length> or a <percentage>, or the keyword ''auto'' - + anything else is a syntax error. This argument is also optional; if omitted, + it defaults to ''0''.</p> - <div class=example> - <p class=issue>TODO: Yank some examples from my original blog post and/or - the HTML5ROCKS article.</p> - </div> <!-- ====================================================================== -->
Received on Tuesday, 22 February 2011 23:44:13 UTC