1.1 --- a/css3-flexbox/Overview.html Thu Mar 14 14:33:28 2013 -0700
1.2 +++ b/css3-flexbox/Overview.html Thu Mar 14 14:54:35 2013 -0700
1.3 @@ -11,7 +11,7 @@
1.4
1.5 <meta content="CSS Flexible Box Layout Module" name=dcterms.title>
1.6 <meta content=text name=dcterms.type>
1.7 - <meta content=2013-03-05 name=dcterms.issued>
1.8 + <meta content=2013-03-14 name=dcterms.issued>
1.9 <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator>
1.10 <meta content=W3C name=dcterms.publisher>
1.11 <meta content="http://dev.w3.org/csswg/css3-flexbox/"
1.12 @@ -219,11 +219,11 @@
1.13 <h1 class=p-name id=head-box-flexible>CSS Flexible Box Layout Module</h1>
1.14
1.15 <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, <time
1.16 - class=dt-updated datetime=20130305> 5 March 2013</time></h2>
1.17 + class=dt-updated datetime=20130314>14 March 2013</time></h2>
1.18
1.19 <dl>
1.20 <dt>This version:
1.21 - <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130305/</a>-->
1.22 + <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130314/</a>-->
1.23
1.24 <dd><a class=u-url
1.25 href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
1.26 @@ -343,20 +343,22 @@
1.27 “css3-flexbox” in the subject, preferably like this:
1.28 “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>”
1.29
1.30 - <p>This document was produced by the <a href="/Style/CSS/members">CSS
1.31 - Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
1.32 + <p>This document was produced by the <a
1.33 + href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
1.34 + the <a href="http://www.w3.org/Style/">Style Activity</a>).
1.35
1.36 <p>This document was produced by a group operating under the <a
1.37 - href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
1.38 - Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
1.39 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
1.40 + 2004 W3C Patent Policy</a>. W3C maintains a <a
1.41 + href="http://www.w3.org/2004/01/pp-impl/32061/status"
1.42 rel=disclosure>public list of any patent disclosures</a> made in
1.43 connection with the deliverables of the group; that page also includes
1.44 instructions for disclosing a patent. An individual who has actual
1.45 knowledge of a patent which the individual believes contains <a
1.46 - href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
1.47 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
1.48 Claim(s)</a> must disclose the information in accordance with <a
1.49 - href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
1.50 - W3C Patent Policy</a>.</p>
1.51 + href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
1.52 + 6 of the W3C Patent Policy</a>.</p>
1.53 <!--end-status-->
1.54
1.55 <p>The CR period will last at least until 20 March 2013. At the time of
1.56 @@ -410,9 +412,6 @@
1.57
1.58 <li><a href="#visibility-collapse"><span class=secno>4.4. </span>
1.59 Collapsed Items</a>
1.60 -
1.61 - <li><a href="#min-size-auto"><span class=secno>4.5. </span> Implied
1.62 - Minimum Size of Flex Items</a>
1.63 </ul>
1.64
1.65 <li><a href="#flow-order"><span class=secno>5. </span> Ordering and
1.66 @@ -740,11 +739,10 @@
1.67 class=property>display</code>’ property <a href="#CSS21"
1.68 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, adding a new block-level and
1.69 new inline-level display type, and defining a new type of formatting
1.70 - context along with properties to control its layout. It also defines a new
1.71 - initial value for ‘<code class=property>min-width</code>’ and ‘<code
1.72 - class=property>min-height</code>’. None of the properties defined in
1.73 - this module apply to the ‘<code class=css>::first-line</code>’ or
1.74 - ‘<code class=css>::first-letter</code>’ pseudo-elements.
1.75 + context along with properties to control its layout. None of the
1.76 + properties defined in this module apply to the ‘<code
1.77 + class=css>::first-line</code>’ or ‘<code
1.78 + class=css>::first-letter</code>’ pseudo-elements.
1.79
1.80 <h3 id=values><span class=secno>1.3. </span> Values</h3>
1.81
1.82 @@ -1248,76 +1246,6 @@
1.83 class=css>visibility: collapse</code>’ is still recommended for dynamic
1.84 cases.)
1.85
1.86 - <h3 id=min-size-auto><span class=secno>4.5. </span> Implied Minimum Size of
1.87 - Flex Items</h3>
1.88 -
1.89 - <p> To provide a more reasonable default minimum size for flex items, this
1.90 - specification introduces a new <a href="#min-auto">‘<code
1.91 - class=css>auto</code>’</a> value as the initial value of the ‘<code
1.92 - class=property>min-width</code>’ and ‘<code
1.93 - class=property>min-height</code>’ properties defined in CSS 2.1. <a
1.94 - href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
1.95 -
1.96 - <table class=propdef>
1.97 - <tbody>
1.98 - <tr>
1.99 - <th>Name:
1.100 -
1.101 - <td>min-width, min-height
1.102 -
1.103 - <tr>
1.104 - <th><a href="#values">New value</a>:
1.105 -
1.106 - <td>auto
1.107 -
1.108 - <tr>
1.109 - <th>New Initial Value:
1.110 -
1.111 - <td><a href="#min-auto"><strong
1.112 - title="min-width/height:auto">auto</strong></a>
1.113 -
1.114 - <tr>
1.115 - <th>New Computed Value:
1.116 -
1.117 - <td>the percentage as specified or the absolute length or a keyword
1.118 - </table>
1.119 -
1.120 - <dl>
1.121 - <dt><dfn id=min-auto title="min-width/height:auto">auto</dfn>
1.122 -
1.123 - <dd> When used as the value of a flex item's min main size property, this
1.124 - keyword indicates a minimum of the min-content size, to help ensure that
1.125 - the item is large enough to fit its contents.
1.126 - <p class=note> It is intended that this will compute to the ‘<code
1.127 - class=css>min-content</code>’ keyword when the specification defining
1.128 - it (<a
1.129 - href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">Writing
1.130 - Modes Appendix D</a>) is sufficiently mature.
1.131 -
1.132 - <p> Otherwise, this keyword computes to ‘<code class=css>0</code>’
1.133 - (unless otherwise defined by a future specification).
1.134 - </dl>
1.135 -
1.136 - <div class=note id=min-size-opt>
1.137 - <p> Note that while a content-based minimum size is often appropriate, and
1.138 - helps prevent content from overlapping or spilling outside its container,
1.139 - in some cases it is not:
1.140 -
1.141 - <p> In particular, if flex sizing is being used for a major content area
1.142 - of a document, it is better to set an explicit font-relative minimum
1.143 - width such as ‘<code class=css>min-width: 12em</code>’. A
1.144 - content-based minimum width could result in a large table or large image
1.145 - stretching the size of the entire content area into an overflow zone, and
1.146 - thereby making lines of text gratuitously long and hard to read.
1.147 -
1.148 - <p> Note also, when content-based sizing is used on an item with large
1.149 - amounts of content, the layout engine must traverse all of this content
1.150 - before finding its minimum size, whereas if the author sets an explicit
1.151 - minimum, this is not necessary. (For items with small amounts of content,
1.152 - however, this traversal is trivial and therefore not a performance
1.153 - concern.)
1.154 - </div>
1.155 -
1.156 <h2 id=flow-order><span class=secno>5. </span> Ordering and Orientation</h2>
1.157
1.158 <p> The contents of a flex container can be laid out in any direction and
1.159 @@ -1753,6 +1681,10 @@
1.160 .tabs {
1.161 display: flex;
1.162 }
1.163 +.tabs > * {
1.164 + min-width: min-content;
1.165 + /* Prevent tabs from getting too small for their content. */
1.166 +}
1.167 .tabs > .current {
1.168 order: -1; /* Lower than the default of 0 */
1.169 }</pre>
1.170 @@ -1825,9 +1757,9 @@
1.171
1.172 <pre>
1.173 #main { display: flex; }
1.174 -#main > article { flex:1; order: 2; }
1.175 -#main > nav { width: 200px; order: 1; }
1.176 -#main > aside { width: 200px; order: 3; }</pre>
1.177 +#main > article { order: 2; min-width: 12em; flex:1; }
1.178 +#main > nav { order: 1; width: 200px; }
1.179 +#main > aside { order: 3; width: 200px; }</pre>
1.180
1.181 <p> As an added bonus, the columns will all be <a
1.182 href="#align-stretch">equal-height</a> by default, and the main content
1.183 @@ -2118,9 +2050,9 @@
1.184 properties. (If the item's <a href="#main-size-property"><i>main size
1.185 property</i></a> computes to ‘<code class=css>auto</code>’, this will
1.186 size the flex item based on its contents.) Makes the flex item inflexible
1.187 - when there is positive free space, but allows it to shrink to its <a
1.188 - href="#min-size-auto">minimum</a> when there is insufficient space. The
1.189 - <a href="#alignment">alignment abilities</a> or <a
1.190 + when there is positive free space, but allows it to shrink to its
1.191 + min-size when there is insufficient space. The <a
1.192 + href="#alignment">alignment abilities</a> or <a
1.193 href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be
1.194 used to align flex items along the <a href="#main-axis"><i>main
1.195 axis</i></a>.
1.196 @@ -2156,11 +2088,14 @@
1.197 sizes will be proportional to the specified flex factor.
1.198 </dl>
1.199
1.200 - <p> By default, flex items won't shrink below their minimum content size
1.201 - (the length of the longest word or fixed-size element). To change this,
1.202 - set the ‘<code class=property>min-width</code>’ or ‘<code
1.203 - class=property>min-height</code>’ property. (See <a
1.204 - href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
1.205 + <div class=note> Note that, because flex items typically can shrink, it is
1.206 + often recommended that a minimum main size be set (with ‘<code
1.207 + class=property>min-width</code>’ or ‘<code
1.208 + class=property>min-height</code>’) to prevent them from shrinking too
1.209 + small to fit their contents. This problem is especially common with
1.210 + horizontal navigation or toolbars.
1.211 + <pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
1.212 + </div>
1.213
1.214 <h3 id=flex-components><span class=secno>7.3. </span> Components of
1.215 Flexibility</h3>
1.216 @@ -2442,6 +2377,10 @@
1.217 nav > ul {
1.218 display: flex;
1.219 }
1.220 +nav > ul > li {
1.221 + min-width: min-content;
1.222 + /* Prevent items from getting too small for their content. */
1.223 +}
1.224 nav > ul > #login {
1.225 margin-left: auto;
1.226 }
1.227 @@ -4399,9 +4338,6 @@
1.228 <li>main-start, <a href="#main-start"
1.229 title="section 2."><strong>2.</strong></a>
1.230
1.231 - <li>min-width/height:auto, <a href="#min-auto"
1.232 - title="section 4.5."><strong>4.5.</strong></a>
1.233 -
1.234 <li>multi-line, <a href="#multi-line"
1.235 title="section 6."><strong>6.</strong></a>
1.236
