Skip to content

Commit 00282f8

Browse files
committed
[css-flexbox] Clarify what single-line/multi-line flex containers are.
1 parent 69a557b commit 00282f8

2 files changed

Lines changed: 12 additions & 4 deletions

File tree

css-flexbox/Overview.bs

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1305,9 +1305,13 @@ Flex Lines</h2>
13051305
A flex container can be either <a>single-line</a> or <a>multi-line</a>,
13061306
depending on the 'flex-wrap' property:
13071307

1308-
* A <dfn>single-line</dfn> flex container lays out all of its children in a single line,
1308+
* A <dfn>single-line</dfn> flex container
1309+
(i.e. one with ''flex-wrap: nowrap'')
1310+
lays out all of its children in a single line,
13091311
even if that would cause its contents to overflow.
1310-
* A <dfn>multi-line</dfn> flex container breaks its <a>flex items</a> across multiple lines,
1312+
* A <dfn>multi-line</dfn> flex container
1313+
(i.e. one with ''flex-wrap: wrap'' or ''flex-wrap: wrap-reverse'')
1314+
breaks its <a>flex items</a> across multiple lines,
13111315
similar to how text is broken onto a new line when it gets too wide to fit on the existing line.
13121316
When additional lines are created,
13131317
they are stacked in the flex container along the <a>cross axis</a>

css-flexbox/Overview.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2162,12 +2162,16 @@ <h2 class="heading settled" data-level="6" id="flex-lines"><span class="secno">6
21622162

21632163
<ul>
21642164
<li data-md="">
2165-
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="single_line">single-line<a class="self-link" href="#single_line"></a></dfn> flex container lays out all of its children in a single line,
2165+
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="single_line">single-line<a class="self-link" href="#single_line"></a></dfn> flex container
2166+
(i.e. one with <a class="css" data-link-type="propdesc" href="#propdef-flex-wrap">flex-wrap: nowrap</a>)
2167+
lays out all of its children in a single line,
21662168
even if that would cause its contents to overflow.</p>
21672169

21682170

21692171
<li data-md="">
2170-
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="multi_line">multi-line<a class="self-link" href="#multi_line"></a></dfn> flex container breaks its <a data-link-type="dfn" href="#flex-item">flex items</a> across multiple lines,
2172+
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="multi_line">multi-line<a class="self-link" href="#multi_line"></a></dfn> flex container
2173+
(i.e. one with <a class="css" data-link-type="propdesc" href="#propdef-flex-wrap">flex-wrap: wrap</a> or <a class="css" data-link-type="propdesc" href="#propdef-flex-wrap">flex-wrap: wrap-reverse</a>)
2174+
breaks its <a data-link-type="dfn" href="#flex-item">flex items</a> across multiple lines,
21712175
similar to how text is broken onto a new line when it gets too wide to fit on the existing line.
21722176
When additional lines are created,
21732177
they are stacked in the flex container along the <a data-link-type="dfn" href="#cross-axis">cross axis</a>

0 commit comments

Comments
 (0)