Skip to content

Commit 2c78472

Browse files
tabatkinstabatkins
committed
Commit unfinished flexbox layout algorithm.
1 parent 1ec30d3 commit 2c78472

2 files changed

Lines changed: 250 additions & 5 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 167 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,31 @@
99
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
1010
type="text/css">
1111

12+
<style>
13+
code.one-line { white-space: pre; }
14+
</style>
15+
1216
<body>
1317
<div class=head> <!--begin-logo-->
1418
<p><a href="http://www.w3.org/"><img alt=W3C height=48
1519
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
1620

1721
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
1822

19-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 November 2011</h2>
23+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 December 2011</h2>
2024

2125
<dl>
2226
<dt>This version:
27+
<!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-flexbox-20111207/">http://www.w3.org/TR/2011/ED-css3-flexbox-20111207/</a>-->
28+
2329

24-
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111124/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111124/</a></dd> -->
25-
<a
30+
<dd><a
2631
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
2732

2833

2934
<dt>Latest version:
35+
<!--<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>-->
36+
3037

3138
<dd><a
3239
href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
@@ -1410,6 +1417,157 @@ <h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
14101417
calculations that depend on those lengths.</p>
14111418
</div>
14121419

1420+
<p>The layout algorithm for flexbox is, unfortunately, too complex and
1421+
interdependent to usefully describe in pieces within each property's
1422+
description. As such, the normative layout algorithm is described in this
1423+
chapter. Note that this is the <em>definitive</em> description of the
1424+
flexbox layout algorithm - any information located elsewhere in this spec
1425+
is informative only. Note as well that only the <strong>output</strong> of
1426+
the algorithm is normative. The precise steps described in this section
1427+
are informative, and written with an eye toward clarity and simplicity,
1428+
not efficiency. Any algorithm that achieves the same results is
1429+
acceptable.
1430+
1431+
<p>This section is mainly intended for implementors. Authors writing web
1432+
pages should generally be served well by the individual property
1433+
descriptions, and do not need to read this section unless they have a
1434+
deep-seated urge to understand arcane details of CSS layout.
1435+
1436+
<p>To lay out a flexbox and its contents, follow these steps:
1437+
1438+
<ol>
1439+
<li>Re-order the flexbox items according to their &lsquo;<a
1440+
href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;.
1441+
The items with the lowest (most negative) &lsquo;<a
1442+
href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
1443+
values are first in the ordering. If multiple items share a &lsquo;<a
1444+
href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
1445+
value, they're ordered by document order. This affects the order in which
1446+
the flexbox items generate boxes in the box-tree, and how the rest of
1447+
this algorithm deals with the items.
1448+
1449+
<li>
1450+
<p>Find the hypothetical size of each flexbox item. For the purpose of
1451+
this step:</p>
1452+
1453+
<ul>
1454+
<li>Treat the flexbox as &lsquo;<code
1455+
class=css>display:block</code>&rsquo; if it was &lsquo;<code
1456+
class=css>display:flexbox</code>&rsquo;, and as &lsquo;<code
1457+
class=css>display:inline-block</code>&rsquo; if it was &lsquo;<code
1458+
class=css>display:inline-flexbox</code>&rsquo;.
1459+
1460+
<li>Treat the flexbox and every flexbox item as establishing a block
1461+
formatting context.
1462+
1463+
<li>If the width or height of a flexbox item is flexible, treat it as
1464+
the preferred width of the flexible length. <strong>Do not apply
1465+
min/max-width/height constraints to the preferred widths/heights of
1466+
flexible lengths - those constraints are handled elsewhere in this
1467+
algorithm, and doing so will produce incorrect results.</strong> Do
1468+
apply those constraints to non-flexible lengths, as normal.
1469+
1470+
<li>If the width or height of a flexbox item is &lsquo;<code
1471+
class=property>auto</code>&rsquo;, or is being treated as &lsquo;<code
1472+
class=property>auto</code>&rsquo; due to the above step, treat it as
1473+
&lsquo;<code class=property>fit-content</code>&rsquo;. <span
1474+
class=note>IIRC, this is the name we expect to give to the "shrinkwrap"
1475+
behavior.</span>.
1476+
</ul>
1477+
1478+
<p>For each flexbox item:</p>
1479+
1480+
<ol>
1481+
<li>Ignore all other flexbox items. The rest of this sub-algorithm is
1482+
run with the assumption that the flexbox contains only the single
1483+
flexbox item in question.
1484+
1485+
<li>Using normal block layout, resolve the width and height of the
1486+
flexbox item.
1487+
</ol>
1488+
1489+
<p>Each flexbox item now has a hypothetical width and hypothetical
1490+
height.</p>
1491+
1492+
<li>Find the available space of the flexbox (the space inside the flexbox
1493+
that can be used to lay out children). Basically, how wide would a block
1494+
be in that situation with "width:fill" (or "auto", in normal block
1495+
layout), minus margin/border/padding. <span class=issue>Figure this out
1496+
by talking with Ojan, etc.</span>
1497+
1498+
<li>
1499+
<p>If the flexbox is multiline, group the flexbox items into multiple
1500+
lines:</p>
1501+
1502+
<ol>
1503+
<li>Collect as many consecutive flexbox items as possible, starting from
1504+
the first item, while keeping the sum of their main size smaller than
1505+
the flexbox's available space. The items so collected form a single
1506+
flexbox line.
1507+
1508+
<li>Repeat the previous step, starting each time from the first flexbox
1509+
item not yet collected into a flexbox line, until all flexbox items
1510+
have been collected into flexbox lines.
1511+
</ol>
1512+
1513+
<p>If the flexbox is single-line, collect all the flexbox items into a
1514+
single flexbox line.</p>
1515+
1516+
<li>
1517+
<p>Find the actual main size of the flexbox.</p>
1518+
1519+
<p>If the flexbox is to be shrinkwrapped in the main axis, then, for each
1520+
flexbox line, sum the hypothetical main sizes of the items in the line.
1521+
The actual main size of the flexbox is then the largest of these sums.</p>
1522+
1523+
<p>Otherwise, determine the size as normal for block layout.</p>
1524+
1525+
<li>For each flexbox line, <a
1526+
href="#resolve-the-flexible-lengths"><i>resolve the flexible
1527+
lengths</i></a> of the items contained within it.
1528+
</ol>
1529+
1530+
<p> ...
1531+
1532+
<p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
1533+
lengths</dfn> of the items within a flexbox line:
1534+
1535+
<ol>
1536+
<li><a href="#distribute-the-free-space"><i>Distribute the free
1537+
space</i></a> in the flexbox line. If any flexbox item's main size is in
1538+
violation of its max size constraint (&lsquo;<code
1539+
class=property>max-height</code>&rsquo; or &lsquo;<code
1540+
class=property>max-width</code>&rsquo;), mark the item as being in
1541+
violation of a max size constraint; if any other item is marked as being
1542+
in violation of a max size constraint from a previous invocation of this
1543+
step, remove the mark. Set its main size to be equal to its max size
1544+
constraint. <a href="#distribute-the-free-space"><i>Distribute the free
1545+
space</i></a> again.
1546+
1547+
<li><a href="#distribute-the-free-space"><i>Distribute the free
1548+
space</i></a> in the flexbox line. If any flexbox item's main size is in
1549+
violation of its min size constraint (&lsquo;<code
1550+
class=property>min-height</code>&rsquo; or &lsquo;<code
1551+
class=property>min-width</code>&rsquo;), mark the item as being in
1552+
violation of a min size constraint; if any other item is marked as being
1553+
in violation of a min size constraint from a previous invocation of this
1554+
step, remove the mark. Set its main size to be equal to its min size
1555+
constraint. <a href="#distribute-the-free-space"><i>Distribute the free
1556+
space</i></a> again.
1557+
1558+
<li>If the set of flexbox items in the line that are marked as violating a
1559+
max or min size constraint has changed since the last time this step was
1560+
reached, or this is the first time this step was reached, restart this
1561+
algorithm.
1562+
</ol>
1563+
1564+
<p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
1565+
a flexbox line:
1566+
1567+
<ol>
1568+
<li>...
1569+
</ol>
1570+
14131571
<h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
14141572

14151573
<p class=issue>TODO: define how flexbox should break on pages, columns,
@@ -1626,6 +1784,9 @@ <h2 class=no-num id=index>Index</h2>
16261784
<li>cross-start, <a href="#cross-start"
16271785
title=cross-start><strong>2.</strong></a>
16281786

1787+
<li>distribute the free space, <a href="#distribute-the-free-space"
1788+
title="distribute the free space"><strong>7.</strong></a>
1789+
16291790
<li>end, <a href="#flex-align-end" title=end><strong>5.2.</strong></a>, <a
16301791
href="#flex-line-pack-end" title=end><strong>6.1.</strong></a>, <a
16311792
href="#flex-pack-end" title=end><strong>5.1.</strong></a>
@@ -1700,6 +1861,9 @@ <h2 class=no-num id=index>Index</h2>
17001861
<li>preferred size, <a href="#preferred-size"
17011862
title="preferred size"><strong>4.1.</strong></a>
17021863

1864+
<li>resolve the flexible lengths, <a href="#resolve-the-flexible-lengths"
1865+
title="resolve the flexible lengths"><strong>7.</strong></a>
1866+
17031867
<li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>
17041868

17051869
<li>row-reverse, <a href="#flex-flow-row-reverse"

‎css3-flexbox/Overview.src.html‎

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>CSS Flexible Box Layout Module</title>
66
<link rel="stylesheet" type="text/css" href="http://dev.w3.org/csswg/css-module/default.css">
77
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
8+
<style>
9+
code.one-line { white-space: pre; }
10+
</style>
811
</head><body>
912

1013
<div class="head">
@@ -15,10 +18,11 @@ <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS], [DATE]</h2>
1518

1619
<dl>
1720
<dt>This version:
18-
<dd><!-- <a href="http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a></dd> -->
19-
<a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
21+
<!--<dd><a href="[VERSION]">[VERSION]</a>-->
22+
<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
2023

2124
<dt>Latest version:
25+
<!--<dd><a href="[LATEST]">[LATEST]</a>-->
2226
<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
2327

2428
<dt>Previous version:
@@ -668,6 +672,83 @@ <h2 id='layout-algorithm'>
668672
<p>Note that if any "hypothetical" size is a definite length or percentage, it's actually a real size immediately and won't change (well, aside from flexing). The hypothetical calculations are meant to give intermediate results in the presence of ''auto'' values (and others?), so I can do other calculations that depend on those lengths.</p>
669673
</div>
670674

675+
<p>The layout algorithm for flexbox is, unfortunately, too complex and interdependent to usefully describe in pieces within each property's description. As such, the normative layout algorithm is described in this chapter. Note that this is the <em>definitive</em> description of the flexbox layout algorithm - any information located elsewhere in this spec is informative only. Note as well that only the <strong>output</strong> of the algorithm is normative. The precise steps described in this section are informative, and written with an eye toward clarity and simplicity, not efficiency. Any algorithm that achieves the same results is acceptable.</p>
676+
677+
<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>
678+
679+
<p>To lay out a flexbox and its contents, follow these steps:</p>
680+
681+
<ol>
682+
<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>
683+
684+
<li>
685+
<p>Find the hypothetical size of each flexbox item. For the purpose of this step:</p>
686+
687+
<ul>
688+
<li>Treat the flexbox as ''display:block'' if it was ''display:flexbox'', and as ''display:inline-block'' if it was ''display:inline-flexbox''.</li>
689+
690+
<li>Treat the flexbox and every flexbox item as establishing a block formatting context.</li>
691+
692+
<li>If the width or height of a flexbox item is flexible, treat it as the preferred width of the flexible length. <strong>Do not apply min/max-width/height constraints to the preferred widths/heights of flexible lengths - those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results.</strong> Do apply those constraints to non-flexible lengths, as normal.</li>
693+
694+
<li>If the width or height of a flexbox item is 'auto', or is being treated as 'auto' due to the above step, treat it as 'fit-content'. <span class='note'>IIRC, this is the name we expect to give to the "shrinkwrap" behavior.</span>.</li>
695+
</ul>
696+
697+
<p>For each flexbox item:</p>
698+
699+
<ol>
700+
<li>Ignore all other flexbox items. The rest of this sub-algorithm is run with the assumption that the flexbox contains only the single flexbox item in question.</li>
701+
702+
<li>Using normal block layout, resolve the width and height of the flexbox item.</li>
703+
</ol>
704+
705+
<p>Each flexbox item now has a hypothetical width and hypothetical height.</p>
706+
</li>
707+
708+
<li>Find the available space of the flexbox (the space inside the flexbox that can be used to lay out children). Basically, how wide would a block be in that situation with "width:fill" (or "auto", in normal block layout), minus margin/border/padding. <span class='issue'>Figure this out by talking with Ojan, etc.</span>
709+
710+
<li>
711+
<p>If the flexbox is multiline, group the flexbox items into multiple lines:</p>
712+
713+
<ol>
714+
<li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their main size smaller than the flexbox's available space. The items so collected form a single flexbox line.</li>
715+
716+
<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>
717+
</ol>
718+
719+
<p>If the flexbox is single-line, collect all the flexbox items into a single flexbox line.</p>
720+
</li>
721+
722+
<li>
723+
<p>Find the actual main size of the flexbox.</p>
724+
725+
<p>If the flexbox is to be shrinkwrapped in the main axis, then, for each flexbox line, sum the hypothetical main sizes of the items in the line. The actual main size of the flexbox is then the largest of these sums.</p>
726+
727+
<p>Otherwise, determine the size as normal for block layout.</p>
728+
</li>
729+
730+
<li>For each flexbox line, <i>resolve the flexible lengths</i> of the items contained within it.</li>
731+
732+
...
733+
</ol>
734+
735+
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
736+
737+
<ol>
738+
<li><i>Distribute the free space</i> in the flexbox line. If any flexbox item's main size is in violation of its max size constraint ('max-height' or 'max-width'), mark the item as being in violation of a max size constraint; if any other item is marked as being in violation of a max size constraint from a previous invocation of this step, remove the mark. Set its main size to be equal to its max size constraint. <i>Distribute the free space</i> again.</li>
739+
740+
<li><i>Distribute the free space</i> in the flexbox line. If any flexbox item's main size is in violation of its min size constraint ('min-height' or 'min-width'), mark the item as being in violation of a min size constraint; if any other item is marked as being in violation of a min size constraint from a previous invocation of this step, remove the mark. Set its main size to be equal to its min size constraint. <i>Distribute the free space</i> again.</li>
741+
742+
<li>If the set of flexbox items in the line that are marked as violating a max or min size constraint has changed since the last time this step was reached, or this is the first time this step was reached, restart this algorithm.</li>
743+
</ol>
744+
745+
<p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
746+
747+
<ol>
748+
<li>...
749+
</ol>
750+
751+
671752

672753
<h2 id="pagination">
673754
Page breaks in flexbox</h2>

0 commit comments

Comments
 (0)