changeset
Start rewriting the layout algo.
Mon, 23 Apr 2012 18:29:57 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Mon, 23 Apr 2012 18:29:57 -0700
- changeset 5597
- 647ff846ad7f
- parent 5596
- 67f4200b9d5d
- child 5598
- 2e04f2d16ef5
Start rewriting the layout algo.
| css3-flexbox/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-flexbox/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-flexbox/Overview.html Tue Apr 24 09:34:00 2012 +0900 1.2 +++ b/css3-flexbox/Overview.html Mon Apr 23 18:29:57 2012 -0700 1.3 @@ -29,11 +29,11 @@ 1.4 1.5 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 1.6 1.7 - <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 20 April 2012</h2> 1.8 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 April 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120420/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120420/</a>--> 1.13 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120424/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120424/</a>--> 1.14 1.15 1.16 <dd><a 1.17 @@ -1977,19 +1977,64 @@ 1.18 </ol> 1.19 </div> 1.20 1.21 - <p>This section is mainly intended for implementors. Authors writing web 1.22 - pages should generally be served well by the individual property 1.23 - descriptions, and do not need to read this section unless they have a 1.24 - deep-seated urge to understand arcane details of CSS layout. 1.25 - 1.26 - <p>To lay out a flexbox and its contents, follow these steps: 1.27 + <p class=note> This section is mainly intended for implementors. Authors 1.28 + writing web pages should generally be served well by the individual 1.29 + property descriptions, and do not need to read this section unless they 1.30 + have a deep-seated urge to understand arcane details of CSS layout. <!-- 1.31 +<dfn>min size</dfn> 1.32 +* each layout mode defines this for both dimensions: 1.33 + * for inline: 1.34 + * min-measure is largest word length or size of atomic inline in the measure axis 1.35 + * min-extent is the extent after layout 1.36 + * for block containers: 1.37 + * min-measure is largest min size contribution of its children boxes 1.38 + * min-extent is the extent after layout 1.39 + * for tables: 1.40 + * ? 1.41 + * min-extent is always the extent after layout 1.42 + 1.43 +<dfn>min-size contribution</dfn> 1.44 +* each layout mode defines this for both dimensions: 1.45 + * for inline: 1.46 + * min-measure is largest word length or size of atomic inline in the measure axis + margin/border/padding (attached to first/last words) 1.47 + * for block containers: 1.48 + * if measure is ''min-content'' or ''max-content'' or definite size, that value. 1.49 + * Otherwise, your min measure + margin/border/padding 1.50 + * for tables: 1.51 + * ? 1.52 + * min-extent is always the extent after layout 1.53 + 1.54 +<dfn>max size</dfn> 1.55 +* each layout mode defines this for both dimensions: 1.56 + * for inline: 1.57 + * max-measure is the largest line length when only forced breaks are taken 1.58 + * for block containers 1.59 + * max-measure is the largest max size contribution of its children boxes 1.60 + * for tables 1.61 + * ? 1.62 + * max-extent is always the extent after layout 1.63 + 1.64 +<dfn>max-size contribution</dfn> 1.65 +* each layout mode defines this for both dimensions: 1.66 + * for inline: 1.67 + * max-measure is largest line length when only forced breaks are taken + margin/border/padding (attached to first/last words) 1.68 + * for block containers: 1.69 + * if measure is ''min-content'' or ''max-content'' or definite size, that value. 1.70 + * Otherwise, your max measure + margin/border/padding 1.71 + * for tables: 1.72 + * ? 1.73 + * min-extent is always the extent after layout 1.74 + --> 1.75 + 1.76 + 1.77 + <p> To lay out a flexbox and its contents, follow these steps: 1.78 1.79 <ol> 1.80 - <li value=0>Generate anonymous flexbox items around runs of contiguous 1.81 + <li value=0> Generate anonymous flexbox items around runs of contiguous 1.82 inline content in the flexbox, as described in the <a 1.83 href="#flex-items">Flexbox Items</a> section. 1.84 1.85 - <li>Re-order the flexbox items according to their ‘<a 1.86 + <li> Re-order the flexbox items according to their ‘<a 1.87 href="#flex-order0"><code class=property>flex-order</code></a>’. 1.88 The items with the lowest (most negative) ‘<a 1.89 href="#flex-order0"><code class=property>flex-order</code></a>’ 1.90 @@ -1999,74 +2044,68 @@ 1.91 the flexbox items generate boxes in the box-tree, and how the rest of 1.92 this algorithm deals with the items. 1.93 1.94 + <li> Determine the main size of the flexbox. In this calculation, the 1.95 + <i>min content main size</i> of the flexbox is the maximum of the flexbox 1.96 + items' outer <i>min content main sizes</i>, and the <i>max content main 1.97 + size</i> of the flexbox is the maximum of the flexbox items' outer <i>max 1.98 + content main sizes</i>. For these computations, ‘<code 1.99 + class=css>auto</code>’ margins are treated as ‘<code 1.100 + class=css>0</code>’. 1.101 + 1.102 <li> Determine the hypothetical main size of items: 1.103 - <ol> 1.104 - <li>If item has a definite preferred size, it is the hypothetical main 1.105 - size. 1.106 - 1.107 - <li> 1.108 - <p>Otherwise layout the flexbox items using the shrink-to-fit 1.109 - algorithm:</p> 1.110 - 1.111 - <ol> 1.112 - <li> 1.113 - <p>In row-direction flexbox, shrink-to-fit size of a flex item along 1.114 - the main axis is its ‘<code 1.115 - class=property>max-content</code>’, as defined in <a 1.116 - href="#CSS3-WRITING-MODES" 1.117 - rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a></p> 1.118 - 1.119 - <li> 1.120 - <p>In column-direction flexbox, shrink-to-fit size of a flex item 1.121 - along the main axis is the extent in block direction that it gets 1.122 - when laid out using its ‘<code 1.123 - class=css>fit-content</code>’ as its size in inline direction 1.124 - and using cross-size of flexbox content box as available measure, 1.125 - also as defined in <a href="#CSS3-WRITING-MODES" 1.126 - rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>. 1.127 - </p> 1.128 - 1.129 - <p>In multi-line column-direction flexbox, cross-size of the whole 1.130 - flexbox content box is used as available measure, not the share of 1.131 - individual flexbox line, to avoid a circular dependency of line 1.132 - breaks on shrink-to-fit calculations.</p> 1.133 - </ol> 1.134 - </ol> 1.135 - 1.136 - <p><em>Do not apply min/max-width/height constraints to the preferred 1.137 - size of flexible lengths - those constraints are handled elsewhere in 1.138 - this algorithm, and doing so will produce incorrect results. </em></p> 1.139 - 1.140 - <li> 1.141 - <p>If the flexbox is single-line, collect all the flexbox items into a 1.142 - single flexbox line.</p> 1.143 - 1.144 - <li> 1.145 - <p>If the flexbox is multi-line, group the flexbox items into multiple 1.146 - lines:</p> 1.147 - 1.148 - <ol> 1.149 - <li> 1.150 - <p>Determine the maximum line length, based on the main size of the 1.151 - flexbox. The maximum line length is main size of the flexbox's content 1.152 - box, constrained by the min and max main size constraints of the 1.153 - flexbox. If the main size depends on the flexbox's content, then:</p> 1.154 - 1.155 + <ul> 1.156 + <li> If item has a <a href="#definite0"><i>definite</i></a> preferred 1.157 + size, it is the hypothetical main size. A size is <dfn id=definite 1.158 + title="definite|indefinite">definite</dfn> if it is a 1.159 + <var><length></var>, or it is a <var><percentage></var> that is 1.160 + resolved against a definite size. 1.161 + 1.162 + <li> Otherwise: 1.163 <ul> 1.164 - <li>for ‘<code class=css>min-content</code>’, the maximum 1.165 - line length is the flexbox's minimum main size, constrained by the 1.166 - min and max main size constraints of the flexbox. 1.167 - 1.168 - <li>for ‘<code class=css>max-content</code>’, the maximum 1.169 - line length is infinity, constrained by the min and max main size 1.170 - constraints of the flexbox. 1.171 - 1.172 - <li>for ‘<code class=css>fit-content</code>’, the maximum 1.173 - line length is the greater of the flexbox's min size constraint and 1.174 - the smaller of the flexbox's max size constraint and the available 1.175 - space. 1.176 + <li> If the flexbox's main axis is parallel to the item's inline axis, 1.177 + the hypothetical size is the item's <i>fit-content measure</i>. 1.178 + 1.179 + <li> Otherwise, the item is laid out at its <i>fit-content measure</i> 1.180 + and the hypothetical size is the item's extent. 1.181 </ul> 1.182 1.183 + <p class=note> Note that the <i>available measure</i> of a flexbox 1.184 + (used when calculating the <i>fit-content measure</i>) is the size of 1.185 + the entire flexbox. It does not take into account other flexbox items 1.186 + or flexbox lines. In other words, each item's hypothetical size is 1.187 + calculated independently, as if it were the only item in the flexbox. 1.188 + </ul> 1.189 + 1.190 + <p> <em>Do not apply min/max-width/height constraints to the preferred 1.191 + size of flexible lengths — those constraints are handled elsewhere 1.192 + in this algorithm, and doing so will produce incorrect results.</em> 1.193 + 1.194 + <li> Collect flexbox items into flexbox lines: 1.195 + <ul> 1.196 + <li> If the flexbox is single-line, collect all the flexbox items into a 1.197 + single flexbox line. 1.198 + 1.199 + <li> Otherwise, determine the <dfn id=maximum-line-length>maximum line 1.200 + length</dfn>, based on the flexbox's main size: 1.201 + <ul> 1.202 + <li> For a <a href="#definite0"><i>definite</i></a> main size, use 1.203 + that size. 1.204 + 1.205 + <li> For a ‘<code class=css>min-content</code>’ size, use 1.206 + the largest of the flexbox's item's <a 1.207 + href="#minimum-size"><i>minimum size</i></a>. 1.208 + 1.209 + <li> For a ‘<code class=css>max-content</code>’ size, use 1.210 + infinity. 1.211 + 1.212 + <li> For a ‘<code class=css>fit-content</code>’ size, use 1.213 + the <i>fill-available measure</i> of the flexbox. 1.214 + </ul> 1.215 + 1.216 + <p> In all cases, clamp the <a href="#maximum-line-length"><i>maximum 1.217 + line length</i></a> according to the flexbox's <i>min main size 1.218 + property</i> and <i>max main size property</i>. 1.219 + 1.220 <li>Collect as many consecutive flexbox items as possible, starting from 1.221 the first item, while keeping the sum of their margin-box main size 1.222 smaller than the flexbox's available space. If a flexbox item is sized 1.223 @@ -2077,8 +2116,19 @@ 1.224 <li>Repeat the previous step, starting each time from the first flexbox 1.225 item not yet collected into a flexbox line, until all flexbox items 1.226 have been collected into flexbox lines. 1.227 - </ol> 1.228 - 1.229 + </ul> 1.230 + 1.231 + <p> A flexbox item's <dfn id=minimum-size>minimum size</dfn> is: 1.232 + 1.233 + <ul> 1.234 + <li> If the <a href="#preferred-size"><i>preferred size</i></a> is <a 1.235 + href="#definite0"><i>definite</i></a>, use that. 1.236 + 1.237 + <li> 1.238 + </ul> 1.239 + </ol> 1.240 + 1.241 + <ul> 1.242 <li>Find the actual main size of the flexbox. If the flexbox's main size 1.243 doesn't rely on its contents, its actual main size is calculated per the 1.244 appropriate rules. Otherwise, its main size is the length of its longest 1.245 @@ -2189,7 +2239,7 @@ 1.246 Implementations can determine when this step is needed and how it can be 1.247 optimized, but for precise results it has to be assumed that this step is 1.248 performed. 1.249 - </ol> 1.250 + </ul> 1.251 1.252 <p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible 1.253 lengths</dfn> of the items within a flexbox line: 1.254 @@ -2251,7 +2301,7 @@ 1.255 </ol> 1.256 1.257 <p>For the purposes of this algorithm, measurements are considered <dfn 1.258 - id=definite>definite</dfn> if their precise value is known before the 1.259 + id=definite0>definite</dfn> if their precise value is known before the 1.260 start of the algorithm. For example, sizes in pixels or inches are always 1.261 definite; ‘<code class=property>auto</code>’ and percent may 1.262 or may not be definite, which depends on how these values were handled 1.263 @@ -2697,16 +2747,6 @@ 1.264 </dd> 1.265 <!----> 1.266 1.267 - <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 1.268 - 1.269 - <dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a 1.270 - href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/"><cite>CSS 1.271 - Writing Modes Module Level 3.</cite></a> 1 September 2011. W3C Working 1.272 - Draft. (Work in progress.) URL: <a 1.273 - href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a> 1.274 - </dd> 1.275 - <!----> 1.276 - 1.277 <dt id=RFC2119>[RFC2119] 1.278 1.279 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 1.280 @@ -2953,7 +2993,8 @@ 1.281 <li>cross-start, <a href="#cross-start" 1.282 title=cross-start><strong>2.</strong></a> 1.283 1.284 - <li>definite, <a href="#definite" title=definite><strong>9.</strong></a> 1.285 + <li>definite, <a href="#definite" title=definite><strong>9.</strong></a>, 1.286 + <a href="#definite0" title=definite><strong>9.</strong></a> 1.287 1.288 <li>distribute, <a href="#flex-line-pack-distribute" 1.289 title=distribute><strong>8.4.</strong></a>, <a 1.290 @@ -3016,6 +3057,9 @@ 1.291 href="#forced-breaks-on-flexbox-items" 1.292 title="Forced breaks on flexbox items"><strong>10.</strong></a> 1.293 1.294 + <li>indefinite, <a href="#definite" 1.295 + title=indefinite><strong>9.</strong></a> 1.296 + 1.297 <li>inline flexbox, <a href="#inline-flexbox" 1.298 title="inline flexbox"><strong>3.</strong></a> 1.299 1.300 @@ -3040,6 +3084,12 @@ 1.301 <li>main-start, <a href="#main-start" 1.302 title=main-start><strong>2.</strong></a> 1.303 1.304 + <li>maximum line length, <a href="#maximum-line-length" 1.305 + title="maximum line length"><strong>9.</strong></a> 1.306 + 1.307 + <li>minimum size, <a href="#minimum-size" 1.308 + title="minimum size"><strong>9.</strong></a> 1.309 + 1.310 <li>multi-line, <a href="#multi-line0" 1.311 title=multi-line><strong>5.</strong></a> 1.312
2.1 --- a/css3-flexbox/Overview.src.html Tue Apr 24 09:34:00 2012 +0900 2.2 +++ b/css3-flexbox/Overview.src.html Mon Apr 23 18:29:57 2012 -0700 2.3 @@ -1004,70 +1004,168 @@ 2.4 </ol> 2.5 </div> 2.6 2.7 - <p>This section is mainly intended for implementors. Authors writing web pages should generally be served well by the individual property descriptions, and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.</p> 2.8 + <p class='note'> 2.9 + This section is mainly intended for implementors. 2.10 + Authors writing web pages should generally be served well by the individual property descriptions, 2.11 + and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout. 2.12 2.13 - <p>To lay out a flexbox and its contents, follow these steps:</p> 2.14 + <!-- 2.15 +<dfn>min size</dfn> 2.16 +* each layout mode defines this for both dimensions: 2.17 + * for inline: 2.18 + * min-measure is largest word length or size of atomic inline in the measure axis 2.19 + * min-extent is the extent after layout 2.20 + * for block containers: 2.21 + * min-measure is largest min size contribution of its children boxes 2.22 + * min-extent is the extent after layout 2.23 + * for tables: 2.24 + * ? 2.25 + * min-extent is always the extent after layout 2.26 + 2.27 +<dfn>min-size contribution</dfn> 2.28 +* each layout mode defines this for both dimensions: 2.29 + * for inline: 2.30 + * min-measure is largest word length or size of atomic inline in the measure axis + margin/border/padding (attached to first/last words) 2.31 + * for block containers: 2.32 + * if measure is ''min-content'' or ''max-content'' or definite size, that value. 2.33 + * Otherwise, your min measure + margin/border/padding 2.34 + * for tables: 2.35 + * ? 2.36 + * min-extent is always the extent after layout 2.37 + 2.38 +<dfn>max size</dfn> 2.39 +* each layout mode defines this for both dimensions: 2.40 + * for inline: 2.41 + * max-measure is the largest line length when only forced breaks are taken 2.42 + * for block containers 2.43 + * max-measure is the largest max size contribution of its children boxes 2.44 + * for tables 2.45 + * ? 2.46 + * max-extent is always the extent after layout 2.47 + 2.48 +<dfn>max-size contribution</dfn> 2.49 +* each layout mode defines this for both dimensions: 2.50 + * for inline: 2.51 + * max-measure is largest line length when only forced breaks are taken + margin/border/padding (attached to first/last words) 2.52 + * for block containers: 2.53 + * if measure is ''min-content'' or ''max-content'' or definite size, that value. 2.54 + * Otherwise, your max measure + margin/border/padding 2.55 + * for tables: 2.56 + * ? 2.57 + * min-extent is always the extent after layout 2.58 + --> 2.59 + 2.60 + <p> 2.61 + To lay out a flexbox and its contents, follow these steps: 2.62 2.63 <ol> 2.64 - <li value=0>Generate anonymous flexbox items around runs of contiguous inline content in the flexbox, as described in the <a href="#flex-items">Flexbox Items</a> section.</li> 2.65 + <li value=0> 2.66 + Generate anonymous flexbox items around runs of contiguous inline content in the flexbox, 2.67 + as described in the <a href="#flex-items">Flexbox Items</a> section. 2.68 2.69 - <li>Re-order the flexbox items according to their 'flex-order'. The items with the lowest (most negative) 'flex-order' values are first in the ordering. If multiple items share a 'flex-order' value, they're ordered by document order. This affects the order in which the flexbox items generate boxes in the box-tree, and how the rest of this algorithm deals with the items.</li> 2.70 + <li> 2.71 + Re-order the flexbox items according to their 'flex-order'. 2.72 + The items with the lowest (most negative) 'flex-order' values are first in the ordering. 2.73 + If multiple items share a 'flex-order' value, 2.74 + they're ordered by document order. 2.75 + This affects the order in which the flexbox items generate boxes in the box-tree, 2.76 + and how the rest of this algorithm deals with the items. 2.77 + 2.78 + <li> 2.79 + Determine the main size of the flexbox. 2.80 + In this calculation, the <i>min content main size</i> of the flexbox 2.81 + is the maximum of the flexbox items' outer <i>min content main sizes</i>, 2.82 + and the <i>max content main size</i> of the flexbox 2.83 + is the maximum of the flexbox items' outer <i>max content main sizes</i>. 2.84 + For these computations, ''auto'' margins are treated as ''0''. 2.85 2.86 <li> 2.87 Determine the hypothetical main size of items: 2.88 2.89 - <ol> 2.90 - <li>If item has a definite preferred size, it is the hypothetical main size. </li> 2.91 + <ul> 2.92 + <li> 2.93 + If item has a <i>definite</i> preferred size, 2.94 + it is the hypothetical main size. 2.95 + A size is <dfn title="definite|indefinite">definite</dfn> if it is a <var><length></var>, 2.96 + or it is a <var><percentage></var> that is resolved against a definite size. 2.97 2.98 <li> 2.99 - <p>Otherwise layout the flexbox items using the 2.100 - shrink-to-fit algorithm:</p> 2.101 - <ol> 2.102 - <li> 2.103 - <p>In row-direction flexbox, shrink-to-fit size of a flex item along the main axis is its 'max-content', as defined in [[!CSS3-WRITING-MODES]]</p> 2.104 - <li> 2.105 - <p>In column-direction flexbox, shrink-to-fit size of a flex item along the main axis 2.106 - is the extent in block direction that it gets when laid 2.107 - out using its ''fit-content'' as its size in inline 2.108 - direction and using cross-size of flexbox content box as 2.109 - available measure, also as defined in 2.110 - [[!CSS3-WRITING-MODES]]. </p> 2.111 - <p>In multi-line column-direction flexbox, cross-size of the whole flexbox content box is used as available measure, not the share of individual flexbox line, to avoid a circular dependency of line breaks on shrink-to-fit calculations.</p> 2.112 - 2.113 - </li> 2.114 - </ol> 2.115 - </li> 2.116 - </ol> 2.117 + Otherwise: 2.118 2.119 - <p><em>Do not apply min/max-width/height constraints to the preferred size of flexible lengths - those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results. </em></p> 2.120 - </li> 2.121 + <ul> 2.122 + <li> 2.123 + If the flexbox's main axis is parallel to the item's inline axis, 2.124 + the hypothetical size is the item's <i>fit-content measure</i>. 2.125 + 2.126 + <li> 2.127 + Otherwise, 2.128 + the item is laid out at its <i>fit-content measure</i> 2.129 + and the hypothetical size is the item's extent. 2.130 + </ul> 2.131 + 2.132 + <p class='note'> 2.133 + Note that the <i>available measure</i> of a flexbox 2.134 + (used when calculating the <i>fit-content measure</i>) 2.135 + is the size of the entire flexbox. 2.136 + It does not take into account other flexbox items 2.137 + or flexbox lines. 2.138 + In other words, each item's hypothetical size is calculated independently, 2.139 + as if it were the only item in the flexbox. 2.140 + </ul> 2.141 + 2.142 + <p> 2.143 + <em>Do not apply min/max-width/height constraints to the preferred size of flexible lengths — 2.144 + those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results.</em> 2.145 2.146 <li> 2.147 - <p>If the flexbox is single-line, collect all the flexbox items into a single flexbox line.</p> 2.148 - </li> 2.149 + Collect flexbox items into flexbox lines: 2.150 2.151 - <li> 2.152 - <p>If the flexbox is multi-line, group the flexbox items into multiple lines:</p> 2.153 + <ul> 2.154 + <li> 2.155 + If the flexbox is single-line, 2.156 + collect all the flexbox items into a single flexbox line. 2.157 2.158 - <ol> 2.159 <li> 2.160 - <p>Determine the maximum line length, based on the main size of the flexbox. The maximum line length is main size of the flexbox's content box, constrained by the min and max main size constraints of the flexbox. If the main size depends on the flexbox's content, then:</p> 2.161 + Otherwise, determine the <dfn>maximum line length</dfn>, based on the flexbox's main size: 2.162 2.163 <ul> 2.164 - <li>for ''min-content'', the maximum line length is the flexbox's minimum main size, constrained by the min and max main size constraints of the flexbox.</li> 2.165 + <li> 2.166 + For a <i>definite</i> main size, 2.167 + use that size. 2.168 2.169 - <li>for ''max-content'', the maximum line length is infinity, constrained by the min and max main size constraints of the flexbox.</li> 2.170 + <li> 2.171 + For a ''min-content'' size, 2.172 + use the largest of the flexbox's item's <i>minimum size</i>. 2.173 2.174 - <li>for ''fit-content'', the maximum line length is the greater of the flexbox's min size constraint and the smaller of the flexbox's max size constraint and the available space.</li> 2.175 + <li> 2.176 + For a ''max-content'' size, 2.177 + use infinity. 2.178 + 2.179 + <li> 2.180 + For a ''fit-content'' size, 2.181 + use the <i>fill-available measure</i> of the flexbox. 2.182 </ul> 2.183 - </li> 2.184 2.185 - <li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their 2.186 - margin-box main size smaller than the flexbox's available space. 2.187 - If a flexbox item is sized with a flexible length, then for the 2.188 - purpose of this step, clamp its size between its minimum and maximum main sizes. The items so collected form a single flexbox line.</li> 2.189 + <p> 2.190 + In all cases, clamp the <i>maximum line length</i> according to the flexbox's <i>min main size property</i> and <i>max main size property</i>. 2.191 2.192 - <li>Repeat the previous step, starting each time from the first flexbox item not yet collected into a flexbox line, until all flexbox items have been collected into flexbox lines.</li> 2.193 + 2.194 + 2.195 + <li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their 2.196 + margin-box main size smaller than the flexbox's available space. 2.197 + If a flexbox item is sized with a flexible length, then for the 2.198 + purpose of this step, clamp its size between its minimum and maximum main sizes. The items so collected form a single flexbox line.</li> 2.199 + 2.200 + <li>Repeat the previous step, starting each time from the first flexbox item not yet collected into a flexbox line, until all flexbox items have been collected into flexbox lines.</li> 2.201 + 2.202 + <p> 2.203 + A flexbox item's <dfn>minimum size</dfn> is: 2.204 + 2.205 + <ul> 2.206 + <li> 2.207 + If the <i>preferred size</i> is <i>definite</i>, use that. 2.208 + 2.209 + <li> 2.210 </ol> 2.211 </li> 2.212
