You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css3-flexbox/Overview.src.html
+19-7Lines changed: 19 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -898,22 +898,34 @@ <h2 id='layout-algorithm'>
898
898
<p>If the flexbox is multi-line, group the flexbox items into multiple lines:</p>
899
899
900
900
<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>
902
903
903
-
<pclass='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>
904
918
905
919
<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>
906
920
907
921
<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>
908
922
</ol>
909
-
</li>
910
923
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
-
<pclass='issue'>Address min/max/fix-content here as well. Perhaps just combine this step with the previous?</p>
924
+
<pclass='issue'>Define "size doesn't rely on its contents". This should be any <length>, a <percentage> that can be resolved, or ''fill-available''.</p>
915
925
</li>
916
926
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
+
917
929
<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>
918
930
919
931
<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