Skip to content

Commit ecd1320

Browse files
committed
Stab at simplifying the linebreaking/flexbox-main-size steps.
1 parent f1d47fc commit ecd1320

2 files changed

Lines changed: 51 additions & 16 deletions

File tree

css3-flexbox/Overview.html

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1833,10 +1833,31 @@ <h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
18331833
lines:</p>
18341834

18351835
<ol>
1836-
<li>Determine the main size of the flexbox's content box.
1837-
<p class=issue>Fill in the details about how to do so when the width is
1838-
min/max/fit-content. This is complicated for multiline, especially for
1839-
&lsquo;<code class=css>flex-flow:column</code>&rsquo;!
1836+
<li>
1837+
<p>Determine the maximum line length, based on the main size of the
1838+
flexbox:</p>
1839+
1840+
<dl>
1841+
<dt>
1842+
1843+
<dt>size doesn't rely on its contents
1844+
1845+
<dd>The maximum line length is main size of the flexbox's content box.
1846+
1847+
<dt>&lsquo;<code class=css>min-content</code>&rsquo;
1848+
1849+
<dd>The maximum line length is the flexbox's minimum main size.
1850+
1851+
<dt>&lsquo;<code class=css>max-content</code>&rsquo;
1852+
1853+
<dd>The maximum line length is the flexbox's maximum main size, or
1854+
infinity if it has no maximum main size.
1855+
1856+
<dt>&lsquo;<code class=css>fit-content</code>&rsquo;
1857+
1858+
<dd>Same as if the flexbox was sized as &lsquo;<code
1859+
class=css>fill-available</code>&rsquo;.
1860+
</dl>
18401861

18411862
<li>Collect as many consecutive flexbox items as possible, starting from
18421863
the first item, while keeping the sum of their main size smaller than
@@ -1850,12 +1871,14 @@ <h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
18501871
have been collected into flexbox lines.
18511872
</ol>
18521873

1853-
<li>
1854-
<p>Find the actual main size of the flexbox, per the standard rules for
1855-
blocks (for block flexboxes) or inline-blocks (for inline flexboxes).</p>
1874+
<p class=issue>Define "size doesn't rely on its contents". This should be
1875+
any &lt;length>, a &lt;percentage> that can be resolved, or &lsquo;<code
1876+
class=css>fill-available</code>&rsquo;.</p>
18561877

1857-
<p class=issue>Address min/max/fix-content here as well. Perhaps just
1858-
combine this step with the previous?</p>
1878+
<li>Find the actual main size of the flexbox. If the flexbox's main size
1879+
doesn't rely on its contents, it's actual main size is calculated per the
1880+
appropriate rules. Otherwise, its main size is the length of its longest
1881+
line.
18591882

18601883
<li>For each flexbox line, <a
18611884
href="#resolve-the-flexible-lengths"><i>resolve the flexible

css3-flexbox/Overview.src.html

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -898,22 +898,34 @@ <h2 id='layout-algorithm'>
898898
<p>If the flexbox is multi-line, group the flexbox items into multiple lines:</p>
899899

900900
<ol>
901-
<li>Determine the main size of the flexbox's content box.
901+
<li>
902+
<p>Determine the maximum line length, based on the main size of the flexbox:</p>
902903

903-
<p class='issue'>Fill in the details about how to do so when the width is min/max/fit-content. This is complicated for multiline, especially for ''flex-flow:column''!</p></li>
904+
<dt>
905+
<dt>size doesn't rely on its contents</dt>
906+
<dd>The maximum line length is main size of the flexbox's content box.</dd>
907+
908+
<dt>''min-content''</dt>
909+
<dd>The maximum line length is the flexbox's minimum main size.</dd>
910+
911+
<dt>''max-content''</dt>
912+
<dd>The maximum line length is the flexbox's maximum main size, or infinity if it has no maximum main size.</dd>
913+
914+
<dt>''fit-content''</dt>
915+
<dd>Same as if the flexbox was sized as ''fill-available''.</dd>
916+
</dt>
917+
</li>
904918

905919
<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. If a flexbox item is sized with a flexible length, then for the purpose of this step, clamp the item's size between its minimum and maximum main sizes. The items so collected form a single flexbox line.</li>
906920

907921
<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>
908922
</ol>
909-
</li>
910923

911-
<li>
912-
<p>Find the actual main size of the flexbox, per the standard rules for blocks (for block flexboxes) or inline-blocks (for inline flexboxes).</p>
913-
914-
<p class='issue'>Address min/max/fix-content here as well. Perhaps just combine this step with the previous?</p>
924+
<p class='issue'>Define "size doesn't rely on its contents". This should be any &lt;length>, a &lt;percentage> that can be resolved, or ''fill-available''.</p>
915925
</li>
916926

927+
<li>Find the actual main size of the flexbox. If the flexbox's main size doesn't rely on its contents, it's actual main size is calculated per the appropriate rules. Otherwise, its main size is the length of its longest line.</li>
928+
917929
<li>For each flexbox line, <i>resolve the flexible lengths</i> of the items contained within it. All flexbox items now have a final main size. Update each item's hypothetical cross size based on this main size.</li>
918930

919931
<li>For each flexbox line, align the flexbox items per 'flex-pack'. The leftover free-space for each line is calculated by subtracting the sum of the main sizes of the flexbox items on the line from the main size of the flexbox's content box.</li>

0 commit comments

Comments
 (0)