Skip to content

Commit 2cf279c

Browse files
alexmog1alexmog1
committed
generated
1 parent a7e2e6d commit 2cf279c

1 file changed

Lines changed: 95 additions & 80 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 95 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1799,7 +1799,13 @@ <h3 id=flex-line-pack><span class=secno>8.4. </span> &lsquo;<a
17991799
href="#single-line"><i>single-line</i></a> flexbox the sole line
18001800
automatically stretches to fill the space.
18011801

1802-
<p class=issue>TODO: examples
1802+
<div class=figure> <img height=514 src="images/flex-line-pack-example.png"
1803+
width=585>
1804+
<p class=caption>An illustration of the &lsquo;<a
1805+
href="#flex-line-pack0"><code
1806+
class=property>flex-line-pack</code></a>&rsquo; keywords and their
1807+
effects on a multi-line flexbox.</p>
1808+
</div>
18031809

18041810
<h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
18051811
Algorithm</h2>
@@ -1878,31 +1884,30 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
18781884

18791885
<li>
18801886
<p>Otherwise layout the flexbox items using the shrink-to-fit
1881-
algorithm.</p>
1882-
1883-
<p>Calculation of the shrink-to-fit width is similar to calculating the
1884-
width of a table cell using the automatic table layout algorithm.
1885-
Roughly: calculate the preferred width by formatting the content
1886-
without breaking lines other than where explicit line breaks occur,
1887-
and also calculate the preferred minimum width, e.g., by trying all
1888-
possible line breaks. This module doesn&#39;t define the exact
1889-
algorithm, but it is expected that the shrink-to-fit size is
1890-
calculated the same way as it is for floats, except in this case it is
1891-
not affected by available space.</p>
1892-
1893-
<div class=issue>
1894-
<p>TODO: define shrink-to-fit. It works differently in row/column
1895-
flexboxes:</p>
1896-
1897-
<ul>
1898-
<li>In horizontal, STF is max-content.
1899-
1900-
<li>In vertical, cross-axis alignment has to happen first, then
1901-
main-axis STF size can be calculated. In multi-line vertical (tricky
1902-
case), auto sizes on cross axis are resolved as if it was
1903-
single-line.
1904-
</ul>
1905-
</div>
1887+
algorithm:</p>
1888+
1889+
<ol>
1890+
<li>
1891+
<p>In row-direction flexbox, shrink-to-fit size of a flex item along
1892+
the main axis is its &lsquo;<code
1893+
class=property>max-content</code>&rsquo;, as defined in <a
1894+
href="#CSS3-WRITING-MODES"
1895+
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a></p>
1896+
1897+
<li>
1898+
<p>In column-direction flexbox, shrink-to-fit size of a flex item
1899+
along the main axis is the extent in block direction that it gets
1900+
when laid out using its &#39;fit-content&#39; as its size in inline
1901+
direction, using cross-size of flexbox content box as available
1902+
measure, also as defined in <a href="#CSS3-WRITING-MODES"
1903+
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>.
1904+
</p>
1905+
1906+
<p>In multi-line column-direction flexbox, cross-size of the whole
1907+
flexbox content box is used as available measure, not the share of
1908+
individual flexbox line, to avoid a circular dependency of line
1909+
breaks on shrink-to-fit calculations.</p>
1910+
</ol>
19061911
</ol>
19071912

19081913
<p><em>Do not apply min/max-width/height constraints to the preferred
@@ -2015,31 +2020,34 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
20152020
<li>If the flexbox doesn't have a definite cross size, the cross size of
20162021
its content box is the sum of the cross sizes of all of its lines.
20172022

2018-
<li>Determine the final cross size of each flexbox item. For each flexbox
2019-
item, if it has &lsquo;<code
2020-
class=css>flex-item-align:stretch</code>&rsquo;, its final cross size is
2021-
set so that its margin-box cross size is equal to cross-size of its
2022-
flexbox line. For all other flexbox items, its final cross size is its
2023-
hypothetical cross size. If the result conflicts with
2024-
&#39;min-width&#39;, &#39;max-width&#39;, &#39;min-height&#39; or
2025-
&#39;max-height&#39;, correct the result to comply the restrictions.
2026-
</ol>
2023+
<li>
2024+
<p>Determine the final cross size of each flexbox item.
20272025

2028-
<p class=issue>&lsquo;<code class=property>auto</code>&rsquo; height must
2029-
only grow, not shrink here
2026+
<ol>
2027+
<li>If a flexbox item has &lsquo;<code
2028+
class=css>flex-item-align:stretch&#39;&#39; and its preferred cross
2029+
size is &#39;auto&#39; and its margin-box cross size is smaller than
2030+
cross-size of its flexbox line, its final cross size is set so that its
2031+
margin-box cross size is equal to cross-size of its flexbox line.
2032+
</code>
2033+
2034+
<li>For all other flexbox items, its final cross size is its
2035+
hypothetical cross size.
2036+
2037+
<li>If the resulting cross size of any item conflicts with
2038+
&#39;min-width&#39;, &#39;max-width&#39;, &#39;min-height&#39; or
2039+
&#39;max-height&#39;, correct the result to comply with the
2040+
restrictions.
2041+
</ol>
20302042

2031-
<ul>
20322043
<li>Resolve &#39;auto&#39; margins on cross axis. For each flexbox item,
20332044
if its margin box cross size is smaller than cross size of its line and
20342045
it has any margins in cross direction set to &#39;auto&#39;, distribute
20352046
the difference equally to the auto margins.
20362047

2037-
<li>For each flexbox line, align the flexbox items per &lsquo;<a
2038-
href="#flex-item-align"><code
2039-
class=property>flex-item-align</code></a>&rsquo;.
2048+
<li>For each flexbox line, align the flexbox items per 'flex-item-align'.
20402049

2041-
<li>Align the flexbox lines per &lsquo;<a href="#flex-line-pack0"><code
2042-
class=property>flex-line-pack</code></a>&rsquo;. The leftover free-space
2050+
<li>Align the flexbox lines per 'flex-line-pack'. The leftover free-space
20432051
is calculated by subtracting the sum of the flexbox line's cross sizes
20442052
from the cross size of the flexbox's content box.
20452053

@@ -2048,7 +2056,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
20482056
optimized, but for precise results it has to be assumed that this step is
20492057
performed, because the layout of each item&#39;s content may change when
20502058
ea
2051-
</ul>
2059+
</ol>
20522060

20532061
<p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
20542062
lengths</dfn> of the items within a flexbox line:
@@ -2107,13 +2115,18 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
21072115
</dl>
21082116
</ol>
21092117

2118+
<p>For the purposes of this algorithm, measurements are considered <dfn
2119+
id=definite>definite</dfn> if their precise value is known before the
2120+
start of the algorithm. For example, sizes in pixels or inches are always
2121+
definite; 'auto' and percent may or may not be definite, which depends on
2122+
how these values were handled before this algorithm is applied.
2123+
21102124
<h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
21112125

21122126
<p>Flexboxes can break across pages between items, between lines of items
2113-
(in multi-line mode) and inside items, as long as &lsquo;<code
2114-
class=property>break-</code>&rsquo; property allow that. All &lsquo;<code
2115-
class=property>break-</code>&rsquo; properties are supported on flexbox,
2116-
on flexbox items and inside flexbox items.
2127+
(in multi-line mode) and inside items, as long as 'break-' property allow
2128+
that. All 'break-' properties are supported on flexbox, on flexbox items
2129+
and inside flexbox items.
21172130

21182131
<p>The following breaking rules refer to fragmentation container as
21192132
“page”. The same rules apply to any other fragmenters. Change
@@ -2145,23 +2158,19 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
21452158
<ol>
21462159
<li>In a row-direction single-line flexbox, breaks before and after
21472160
items apply to the flexbox
2148-
</ol>
2149-
2150-
<p class=issue>"break-inside:avoid" in single-line horizontal should
2151-
probably be applied to flexbox too.</p>
21522161

2153-
<li>In column-direction single-line flexbox and all multi-line flexboxes:
2154-
<ol>
2155-
<li>Forced break before the first item is applied to the flexbox
2162+
<li>In column-direction single-line flexbox and all multi-line
2163+
flexboxes:
2164+
<ol>
2165+
<li>Forced break before the first item is applied to the flexbox
21562166

2157-
<li>Forced break after the last item is applied to the flexbox
2167+
<li>Forced break after the last item is applied to the flexbox
21582168

2159-
<li>Forced break before or after any other item terminates the set of
2160-
items to be laid out on this page
2169+
<li>Forced break before or after any other item terminates the set of
2170+
items to be laid out on this page
2171+
</ol>
21612172
</ol>
2162-
</ol>
21632173

2164-
<ul>
21652174
<li>When necessary, a <dfn
21662175
id=break-inside-a-flexbox-item-is-considere>break inside a flexbox item
21672176
is considered</dfn> as follows:
@@ -2226,10 +2235,9 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
22262235
next page.
22272236

22282237
<li>If the flexbox is already at the top of the page, the item may
2229-
produce overflow. If &lsquo;<code
2230-
class=property>overflow</code>&rsquo; property of the flexbox is set
2231-
to &lsquo;<code class=property>visible</code>&rsquo;, it is paginated
2232-
using same rules as visible overflow of blocks in normal flow.
2238+
produce overflow. If 'overflow' property of the flexbox is set to
2239+
'visible', it is paginated using same rules as visible overflow of
2240+
blocks in normal flow.
22332241
<p class=note>After the break, continuation of overflow items may
22342242
overlap with other items and/or content after the flexbox. It is
22352243
undesirable but there is no good resolution for this spacial
@@ -2239,7 +2247,9 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
22392247
</ol>
22402248

22412249
<li>Breaks inside items (forced or unforced) are not allowed
2250+
</ol>
22422251

2252+
<ul>
22432253
<li> <b>Row-direction flexbox: single-line</b>
22442254
<ol>
22452255
<li>
@@ -2278,15 +2288,12 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
22782288
</ol>
22792289
</ol>
22802290

2281-
<li> <b>Row-direction flexbox:multi-line</b>
2291+
<li> <b>Row-direction flexbox: multi-line</b>
22822292
<ol>
22832293
<li>Collect items into lines and determine line heights:
22842294
<ol>
22852295
<li>
2286-
<p>If &lsquo;<a href="#flex-line-pack0"><code
2287-
class=property>flex-line-pack</code></a>&rsquo; is &lsquo;<a
2288-
href="#flex-line-pack-stretch"><code
2289-
class=property>stretch</code></a>&rsquo; and flexbox size in block
2296+
<p>If 'flex-line-pack' is 'stretch' and flexbox size in block
22902297
direction is definite, layout of the complete flexbox has to be done
22912298
first to determine line heights. Layout is done as usual for
22922299
non-paginated case, but accounting for forced breaks.</p>
@@ -2313,10 +2320,9 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
23132320
next page.
23142321

23152322
<li>If the flexbox is already at the top of the page, the item may
2316-
produce overflow. If &lsquo;<code
2317-
class=property>overflow</code>&rsquo; property of the flexbox is set
2318-
to &lsquo;<code class=property>visible</code>&rsquo;, it is paginated
2319-
using same rules as visible overflow of blocks in normal flow.
2323+
produce overflow. If 'overflow' property of the flexbox is set to
2324+
'visible', it is paginated using same rules as visible overflow of
2325+
blocks in normal flow.
23202326
</ol>
23212327

23222328
<li>If size of flexbox in inline direction is not definite, multi-line
@@ -2325,10 +2331,6 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
23252331

23262332
<li>Line packing is done on each page, with content on the page
23272333
</ol>
2328-
2329-
<p class=issue>TODO: combine breaking algorithms for multiline in both
2330-
directions. If breaks inside items are not allowed the algorithm is
2331-
almost same.</p>
23322334
</ul>
23332335

23342336
<h2 id=conformance><span class=secno>11. </span> Conformance</h2>
@@ -2533,6 +2535,16 @@ <h3 class=no-num id=normative>Normative references</h3>
25332535
</dd>
25342536
<!---->
25352537

2538+
<dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
2539+
2540+
<dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a
2541+
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/"><cite>CSS
2542+
Writing Modes Module Level 3.</cite></a> 1 September 2011. W3C Working
2543+
Draft. (Work in progress.) URL: <a
2544+
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/</a>
2545+
</dd>
2546+
<!---->
2547+
25362548
<dt id=RFC2119>[RFC2119]
25372549

25382550
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
@@ -2734,8 +2746,9 @@ <h2 class=no-num id=index>Index</h2>
27342746
<li>authoring tool, <a href="#authoring-tool"
27352747
title="authoring tool"><strong>11.2.</strong></a>
27362748

2737-
<li>&lsquo;<code class=css>auto</code>&rsquo;, <a
2738-
href="#flex-item-align-auto" title="''auto''"><strong>8.2.</strong></a>
2749+
<li>&rsquo;auto'&lsquo;<code class=css>, <a href="#flex-item-align-auto"
2750+
title="</code>&rsquo;&lsquo;<code class=property>auto</code>&rsquo;&lsquo;<code class=css>"><strong>8.2.</strong></a>
2751+
</code>
27392752

27402753
<li>baseline, <a href="#flex-align-baseline"
27412754
title=baseline><strong>8.2.</strong></a>
@@ -2777,6 +2790,8 @@ <h2 class=no-num id=index>Index</h2>
27772790
<li>cross-start, <a href="#cross-start"
27782791
title=cross-start><strong>2.</strong></a>
27792792

2793+
<li>definite, <a href="#definite" title=definite><strong>9.</strong></a>
2794+
27802795
<li>distribute, <a href="#flex-line-pack-distribute"
27812796
title=distribute><strong>8.4.</strong></a>, <a
27822797
href="#flex-pack-distribute" title=distribute><strong>8.1.</strong></a>
@@ -2801,7 +2816,7 @@ <h2 class=no-num id=index>Index</h2>
28012816
<li>flexbox items, <a href="#flexbox-item"
28022817
title="flexbox items"><strong>2.</strong></a>
28032818

2804-
<li>flexbox item's, <a href="#flexbox-item"
2819+
<li>flexbox item&rsquo;s, <a href="#flexbox-item"
28052820
title="flexbox item's"><strong>2.</strong></a>
28062821

28072822
<li>flex-direction, <a href="#flex-direction0"

0 commit comments

Comments
 (0)