Skip to content

Commit 4a79d4d

Browse files
tabatkinstabatkins
committed
Make sure the algo properly handles combinations of writing mode and flex-direction.
1 parent 7da5f3c commit 4a79d4d

2 files changed

Lines changed: 82 additions & 35 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 47 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@
2929

3030
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
3131

32-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 April 2012</h2>
32+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 April 2012</h2>
3333

3434
<dl>
3535
<dt>This version:
36-
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120424/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120424/</a>-->
36+
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120425/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120425/</a>-->
3737

3838

3939
<dd><a
@@ -2021,39 +2021,65 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
20212021
generate boxes in the box-tree, and how the rest of this algorithm deals
20222022
with the items.
20232023

2024-
<li> <strong>Determine the main size of the flexbox</strong> using its <a
2025-
href="#main-size-property"><i>main size property</i></a>. In this
2026-
calculation, the <i>min content main size</i> of the flexbox is the
2027-
maximum of the flexbox's items' <i>min-content size contributions</i>,
2028-
and the <i>max content main size</i> of the flexbox is the sum of the
2029-
flexbox's items' <i>max-content size contributions</i>. For these
2030-
computations, &lsquo;<code class=css>auto</code>&rsquo; margins are
2031-
treated as &lsquo;<code class=css>0</code>&rsquo;, and for flexbox items
2032-
the preferred size is used in place of the <a
2033-
href="#main-size-property"><i>main size property</i></a>.
2024+
<li> <strong>Determine the available main and cross space for the flexbox
2025+
items.</strong> For each dimension, if that dimension of the flexbox is a
2026+
<i>definite size</i>, use that; otherwise, subtract the flexbox's margin,
2027+
border, and padding from the space available to the flexbox in that
2028+
dimension and use that value. <span class=note>This might result in an
2029+
infinite value.</span>
20342030

20352031
<li> <strong>Determine the hypothetical main size of each item:</strong>
20362032
<ul>
20372033
<li> If the item has a <a href="#definite"><i>definite</i></a> preferred
20382034
size, that's the hypothetical size.
20392035

20402036
<li> Otherwise, if the flexbox's main-axis is parallel to the item's
2041-
inline-axis, the hypothetical size is the item's preferred size,
2042-
treating &lsquo;<code class=css>auto</code>&rsquo; as &lsquo;<code
2043-
class=css>fit-content</code>&rsquo;.
2044-
2045-
<li> Otherwise, the item is laid out using <a
2037+
inline-axis, lay out the item using its preferred size and the
2038+
available space, treating &lsquo;<code class=css>auto</code>&rsquo; as
2039+
&lsquo;<code class=css>fit-content</code>&rsquo; unless the item's
2040+
writing mode is perpendicular to the flexbox's writing mode (in which
2041+
case <a
2042+
href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the
2043+
rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES"
2044+
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
2045+
are in effect). If the preferred size is &lsquo;<code
2046+
class=css>fill-available</code>&rsquo;, or &lsquo;<code
2047+
class=css>fit-content</code>&rsquo;, and the flexbox is being sized
2048+
under a min-content or max-content main-size constraint, size the item
2049+
under that constraint instead. The hypothetical size is the item's
2050+
resulting measure.
2051+
2052+
<li> Otherwise, lay out the item using the available space, treating
2053+
&lsquo;<code class=css>auto</code>&rsquo; as &lsquo;<code
2054+
class=css>fit-content</code>&rsquo; unless the item's writing mode is
2055+
perpendicular to the flexbox's writing mode (in which case <a
20462056
href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the
2047-
rules for a box in an orthogonal flow</a> as specified in <a
2048-
href="#CSS3-WRITING-MODES"
2049-
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>,
2050-
and the hypothetical size is the item's max-content extent.
2057+
rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES"
2058+
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
2059+
are in effect). If the preferred size is &lsquo;<code
2060+
class=css>auto</code>&rsquo;, &lsquo;<code
2061+
class=css>fill-available</code>&rsquo;, or &lsquo;<code
2062+
class=css>fit-content</code>&rsquo;, and the flexbox is being sized
2063+
under a min-content or max-content cross-size constraint, size the item
2064+
under that constraint instead. The hypothetical size is the item's
2065+
resulting max-content extent.
20512066
</ul>
20522067

20532068
<p> <em>Do not apply min/max-width/height constraints to the preferred
20542069
size of flexible lengths &mdash; those constraints are handled elsewhere
20552070
in this algorithm, and doing so will produce incorrect results.</em>
20562071

2072+
<li> <strong>Determine the main size of the flexbox</strong> using its <a
2073+
href="#main-size-property"><i>main size property</i></a>. In this
2074+
calculation, the <i>min content main size</i> of the flexbox is the
2075+
maximum of the flexbox's items' <i>min-content size contributions</i>,
2076+
and the <i>max content main size</i> of the flexbox is the sum of the
2077+
flexbox's items' <i>max-content size contributions</i>. For these
2078+
computations, &lsquo;<code class=css>auto</code>&rsquo; margins are
2079+
treated as &lsquo;<code class=css>0</code>&rsquo;, and for flexbox items
2080+
the preferred size is used in place of the <a
2081+
href="#main-size-property"><i>main size property</i></a>.
2082+
20572083
<li> <strong>Collect flexbox items into flexbox lines:</strong>
20582084
<ul>
20592085
<li> If the flexbox is single-line, collect all the flexbox items into a

‎css3-flexbox/Overview.src.html‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1047,13 +1047,13 @@ <h2 id='layout-algorithm'>
10471047
and how the rest of this algorithm deals with the items.
10481048

10491049
<li>
1050-
<strong>Determine the main size of the flexbox</strong> using its <i>main size property</i>.
1051-
In this calculation, the <i>min content main size</i> of the flexbox
1052-
is the maximum of the flexbox's items' <i>min-content size contributions</i>,
1053-
and the <i>max content main size</i> of the flexbox
1054-
is the sum of the flexbox's items' <i>max-content size contributions</i>.
1055-
For these computations, ''auto'' margins are treated as ''0'',
1056-
and for flexbox items the preferred size is used in place of the <i>main size property</i>.
1050+
<strong>Determine the available main and cross space for the flexbox items.</strong>
1051+
For each dimension,
1052+
if that dimension of the flexbox is a <i>definite size</i>, use that;
1053+
otherwise, subtract the flexbox's margin, border, and padding
1054+
from the space available to the flexbox in that dimension
1055+
and use that value.
1056+
<span class='note'>This might result in an infinite value.</span>
10571057

10581058
<li>
10591059
<strong>Determine the hypothetical main size of each item:</strong>
@@ -1066,21 +1066,42 @@ <h2 id='layout-algorithm'>
10661066
<li>
10671067
Otherwise,
10681068
if the flexbox's main-axis is parallel to the item's inline-axis,
1069-
the hypothetical size is the item's preferred size,
1070-
treating ''auto'' as ''fit-content''.
1069+
lay out the item using its preferred size
1070+
and the available space,
1071+
treating ''auto'' as ''fit-content''
1072+
unless the item's writing mode is perpendicular to the flexbox's writing mode
1073+
(in which case <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a> [[!CSS3-WRITING-MODES]] are in effect).
1074+
If the preferred size is ''fill-available'', or ''fit-content'',
1075+
and the flexbox is being sized under a min-content or max-content main-size constraint,
1076+
size the item under that constraint instead.
1077+
The hypothetical size is the item's resulting measure.
10711078

10721079
<li>
10731080
Otherwise,
1074-
the item is laid out
1075-
using <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a>
1076-
as specified in [[!CSS3-WRITING-MODES]],
1077-
and the hypothetical size is the item's max-content extent.
1081+
lay out the item
1082+
using the available space,
1083+
treating ''auto'' as ''fit-content''
1084+
unless the item's writing mode is perpendicular to the flexbox's writing mode
1085+
(in which case <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a> [[!CSS3-WRITING-MODES]] are in effect).
1086+
If the preferred size is ''auto'', ''fill-available'', or ''fit-content'',
1087+
and the flexbox is being sized under a min-content or max-content cross-size constraint,
1088+
size the item under that constraint instead.
1089+
The hypothetical size is the item's resulting max-content extent.
10781090
</ul>
1079-
1091+
10801092
<p>
10811093
<em>Do not apply min/max-width/height constraints to the preferred size of flexible lengths &mdash;
10821094
those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results.</em>
10831095

1096+
<li>
1097+
<strong>Determine the main size of the flexbox</strong> using its <i>main size property</i>.
1098+
In this calculation, the <i>min content main size</i> of the flexbox
1099+
is the maximum of the flexbox's items' <i>min-content size contributions</i>,
1100+
and the <i>max content main size</i> of the flexbox
1101+
is the sum of the flexbox's items' <i>max-content size contributions</i>.
1102+
For these computations, ''auto'' margins are treated as ''0'',
1103+
and for flexbox items the preferred size is used in place of the <i>main size property</i>.
1104+
10841105
<li>
10851106
<strong>Collect flexbox items into flexbox lines:</strong>
10861107

0 commit comments

Comments
 (0)