Editor's Draft, 5 March 2013

This version: - +

http://dev.w3.org/csswg/css3-flexbox/ @@ -343,20 +343,22 @@ “css3-flexbox” in the subject, preferably like this: “[css3-flexbox] …summary of comment…” -

This document was produced by the CSS - Working Group (part of the Style Activity). +

This document was produced by the CSS Working Group (part of + the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent - Policy. W3C maintains a 5 February + 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s) must disclose the information in accordance with section 6 of the - W3C Patent Policy.

+ href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section + 6 of the W3C Patent Policy.

The CR period will last at least until 20 March 2013. At the time of @@ -410,9 +412,6 @@

4.4. Collapsed Items - -

4.5. Implied - Minimum Size of Flex Items

5. Ordering and @@ -740,11 +739,10 @@ class=property>display’ property [CSS21], adding a new block-level and new inline-level display type, and defining a new type of formatting - context along with properties to control its layout. It also defines a new - initial value for ‘min-width’ and ‘min-height’. None of the properties defined in - this module apply to the ‘::first-line’ or - ‘::first-letter’ pseudo-elements. + context along with properties to control its layout. None of the + properties defined in this module apply to the ‘::first-line’ or ‘::first-letter’ pseudo-elements.

1.3. Values

@@ -1248,76 +1246,6 @@ class=css>visibility: collapse’ is still recommended for dynamic cases.) -

4.5. Implied Minimum Size of - Flex Items

- -

To provide a more reasonable default minimum size for flex items, this - specification introduces a new ‘auto’ value as the initial value of the ‘min-width’ and ‘min-height’ properties defined in CSS 2.1. [CSS21] - - - - - - - -
Name: - - min-width, min-height - -
New value: - - auto - -
New Initial Value: - - auto - -
New Computed Value: - - the percentage as specified or the absolute length or a keyword -
- -

Name: - -	min-width, min-height - -
New value: - -	auto - -
New Initial Value: - -	auto - -
New Computed Value: - -	the percentage as specified or the absolute length or a keyword -

auto - -

When used as the value of a flex item's min main size property, this - keyword indicates a minimum of the min-content size, to help ensure that - the item is large enough to fit its contents. -

It is intended that this will compute to the ‘min-content’ keyword when the specification defining - it (Writing - Modes Appendix D) is sufficiently mature. - -

Otherwise, this keyword computes to ‘0’ - (unless otherwise defined by a future specification). -

- -

Note that while a content-based minimum size is often appropriate, and - helps prevent content from overlapping or spilling outside its container, - in some cases it is not: - -

In particular, if flex sizing is being used for a major content area - of a document, it is better to set an explicit font-relative minimum - width such as ‘min-width: 12em’. A - content-based minimum width could result in a large table or large image - stretching the size of the entire content area into an overflow zone, and - thereby making lines of text gratuitously long and hard to read. - -

Note also, when content-based sizing is used on an item with large - amounts of content, the layout engine must traverse all of this content - before finding its minimum size, whereas if the author sets an explicit - minimum, this is not necessary. (For items with small amounts of content, - however, this traversal is trivial and therefore not a performance - concern.) -

5. Ordering and Orientation

The contents of a flex container can be laid out in any direction and @@ -1753,6 +1681,10 @@ .tabs { display: flex; } +.tabs > * { + min-width: min-content; + /* Prevent tabs from getting too small for their content. */ +} .tabs > .current { order: -1; /* Lower than the default of 0 */ } @@ -1825,9 +1757,9 @@

 #main { display: flex; }
-#main > article { flex:1;         order: 2; }
-#main > nav     { width: 200px;   order: 1; }
-#main > aside   { width: 200px;   order: 3; }

+#main > article { order: 2; min-width: 12em; flex:1; } +#main > nav { order: 1; width: 200px; } +#main > aside { order: 3; width: 200px; }

As an added bonus, the columns will all be equal-height by default, and the main content @@ -2118,9 +2050,9 @@ properties. (If the item's main size property computes to ‘auto’, this will size the flex item based on its contents.) Makes the flex item inflexible - when there is positive free space, but allows it to shrink to its minimum when there is insufficient space. The - alignment abilities or alignment abilities or ‘auto’ margins can be used to align flex items along the main axis. @@ -2156,11 +2088,14 @@ sizes will be proportional to the specified flex factor.

By default, flex items won't shrink below their minimum content size - (the length of the longest word or fixed-size element). To change this, - set the ‘min-width’ or ‘min-height’ property. (See Implied Minimum Size of Flex Items.) +

Note that, because flex items typically can shrink, it is + often recommended that a minimum main size be set (with ‘min-width’ or ‘min-height’) to prevent them from shrinking too + small to fit their contents. This problem is especially common with + horizontal navigation or toolbars. +

nav li { flex: 1; min-width: min-content; /* Don't overflow */}

7.3. Components of Flexibility

main-start, 2. -

min-width/height:auto, 4.5. -

multi-line, 6. diff -r e987b5da1953 -r 9437131b3d6e css3-flexbox/Overview.src.html --- a/css3-flexbox/Overview.src.html Thu Mar 14 14:33:28 2013 -0700 +++ b/css3-flexbox/Overview.src.html Thu Mar 14 14:54:35 2013 -0700 @@ -444,7 +444,6 @@ adding a new block-level and new inline-level display type, and defining a new type of formatting context along with properties to control its layout. - It also defines a new initial value for 'min-width' and 'min-height'. None of the properties defined in this module apply to the ''::first-line'' or ''::first-letter'' pseudo-elements.

@@ -889,67 +888,6 @@ (Since only part of the steps need to be repeated when 'visibility' is changed, however, 'visibility: collapse' is still recommended for dynamic cases.) -

-Implied Minimum Size of Flex Items

- -

- To provide a more reasonable default minimum size for flex items, - this specification introduces a new ''auto'' value as the initial value - of the 'min-width' and 'min-height' properties - defined in CSS 2.1. [[!CSS21]] - - - - - - -
Name: - min-width, min-height -
New value: - auto -
New Initial Value: - auto -
New Computed Value: - the percentage as specified or the absolute length or a keyword -
- -

Name: -	min-width, min-height -
New value: -	auto -
New Initial Value: -	auto -
New Computed Value: -	the percentage as specified or the absolute length or a keyword -

auto -

- When used as the value of a flex item's min main size property, - this keyword indicates a minimum of the min-content size, - to help ensure that the item is large enough to fit its contents. - -

- It is intended that this will compute to the ''min-content'' keyword - when the specification defining it (Writing Modes Appendix D) is sufficiently mature. - -

- Otherwise, - this keyword computes to ''0'' - (unless otherwise defined by a future specification). -

- -

- Note that while a content-based minimum size is often appropriate, - and helps prevent content from overlapping or spilling outside its container, - in some cases it is not: - -

- In particular, if flex sizing is being used for a major content area of a document, - it is better to set an explicit font-relative minimum width such as ''min-width: 12em''. - A content-based minimum width could result in a large table or large image - stretching the size of the entire content area into an overflow zone, - and thereby making lines of text gratuitously long and hard to read. - -

- Note also, when content-based sizing is used on an item with large amounts of content, - the layout engine must traverse all of this content before finding its minimum size, - whereas if the author sets an explicit minimum, this is not necessary. - (For items with small amounts of content, however, - this traversal is trivial and therefore not a performance concern.) -

Ordering and Orientation

@@ -1261,6 +1199,10 @@ .tabs { display: flex; } +.tabs > * { + min-width: min-content; + /* Prevent tabs from getting too small for their content. */ +} .tabs > .current { order: -1; /* Lower than the default of 0 */ } @@ -1331,9 +1273,9 @@

 #main { display: flex; }
-#main > article { flex:1;         order: 2; }
-#main > nav     { width: 200px;   order: 1; }
-#main > aside   { width: 200px;   order: 3; }

+#main > article { order: 2; min-width: 12em; flex:1; } +#main > nav { order: 1; width: 200px; } +#main > aside { order: 3; width: 200px; }

As an added bonus, @@ -1589,7 +1531,7 @@ (If the item's main size property computes to ''auto'', this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, - but allows it to shrink to its minimum when there is insufficient space. + but allows it to shrink to its min-size when there is insufficient space. The alignment abilities or ''auto'' margins can be used to align flex items along the main axis. @@ -1619,11 +1561,15 @@ their sizes will be proportional to the specified flex factor. -

- By default, flex items won't shrink below their minimum content size - (the length of the longest word or fixed-size element). - To change this, set the 'min-width' or 'min-height' property. - (See Implied Minimum Size of Flex Items.) +

+ Note that, because flex items typically can shrink, + it is often recommended that a minimum main size be set + (with 'min-width' or 'min-height') + to prevent them from shrinking too small to fit their contents. + This problem is especially common with horizontal navigation or toolbars. + +

nav li { flex: 1; min-width: min-content; /* Don't overflow */}

Components of Flexibility

@@ -1839,6 +1785,10 @@ nav > ul { display: flex; } +nav > ul > li { + min-width: min-content; + /* Prevent items from getting too small for their content. */ +} nav > ul > #login { margin-left: auto; }