Skip to content

Commit f08a5d0

Browse files
committed
[css-flexbox] Be more clear about used vs computed flex basis in various parts.
1 parent b5b3bbf commit f08a5d0

3 files changed

Lines changed: 17 additions & 14 deletions

File tree

css-flexbox/Overview.bs

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1483,7 +1483,7 @@ The 'flex' Shorthand</h3>
14831483
When omitted from the 'flex' shorthand, its specified value is ''0%''.
14841484
<p>
14851485
If the specified 'flex-basis' is <a value for=flex-basis>main-size</a>,
1486-
the used <i>flex basis</i> is the value of the flex item’s <i>main size property</i>.
1486+
the used <i>flex basis</i> is the computed value of the flex item’s <i>main size property</i>.
14871487

14881488
<figure>
14891489
<img src='images/rel-vs-abs-flex.svg' width='504' height='240'>
@@ -2258,29 +2258,29 @@ Line Length Determination</h3>
22582258

22592259
<ol type=A>
22602260
<li>
2261-
If the item has a <i>definite</i> flex basis,
2261+
If the item has a <i>definite</i> used <a>flex basis</a>,
22622262
that's the <i>flex base size</i>.
22632263

22642264
<li>
22652265
If the flex item has ...
22662266
<ul>
22672267
<li>an intrinsic aspect ratio,
2268-
<li>a <i>flex basis</i> of ''width/auto'', and
2268+
<li>a used <i>flex basis</i> of ''width/auto'', and
22692269
<li>a <i>definite</i> <i>cross size</i>
22702270
</ul>
22712271
then the <i>flex base size</i> is calculated from its inner <i>cross size</i>
2272-
and the <i>flex item</i>&rsquo;s intrinsic aspect ratio.
2272+
and the <i>flex item</i>s intrinsic aspect ratio.
22732273

22742274
<li>
2275-
If the <a>flex basis</a> is <a value for=width>auto</a> or depends on its available size,
2275+
If the used <a>flex basis</a> is <a value for=width>auto</a> or depends on its available size,
22762276
and the flex container is being sized under a min-content or max-content constraint
22772277
(e.g. when performing <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">automatic table layout</a> [[!CSS21]]),
22782278
size the item under that constraint.
22792279
The <i>flex base size</i> is the item's resulting main size.
22802280

22812281
<li>
22822282
Otherwise,
2283-
if the <a>flex basis</a> is <a value for=width>auto</a> or depends on its available size,
2283+
if the used <a>flex basis</a> is <a value for=width>auto</a> or depends on its available size,
22842284
the available main size is infinite,
22852285
and the flex item's inline axis is parallel to the main axis,
22862286
lay the item out using
@@ -2290,7 +2290,7 @@ Line Length Determination</h3>
22902290
<li>
22912291
Otherwise,
22922292
lay out the item into the <i>available space</i>
2293-
using its <i>flex basis</i> in place of its <i>main size</i>,
2293+
using its used <i>flex basis</i> in place of its <i>main size</i>,
22942294
treating a <i>main size</i> of <a value for=width>auto</a> as ''max-content''.
22952295
If a <i>cross size</i> is needed to determine the <i>main size</i>
22962296
(e.g. when the <i>flex item</i>’s <i>main size</i> is in its block axis)

css-flexbox/Overview.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1522,7 +1522,7 @@ <h3 class="heading settled" data-level=7.1 id=flex-property><span class=secno>7.
15221522
When omitted from the <a class=property data-link-type=propdesc href=#propdef-flex title=flex>flex</a> shorthand, its specified value is <span class=css>0%</span>.
15231523
<p>
15241524
If the specified <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> is <a class=css data-link-for=flex-basis data-link-type=value href=#valdef-flex-basis-main-size title=main-size>main-size</a>,
1525-
the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is the value of the flex item’s <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>.
1525+
the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is the computed value of the flex item’s <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a>.
15261526

15271527
</p><figure>
15281528
<img height=240 src=images/rel-vs-abs-flex.svg width=504>
@@ -2179,29 +2179,29 @@ <h3 class="heading settled" data-level=9.2 id=line-sizing><span class=secno>9.2
21792179

21802180
<ol type=A>
21812181
<li>
2182-
If the item has a <a data-link-type=dfn href=#definite title=definite>definite</a> flex basis,
2182+
If the item has a <a data-link-type=dfn href=#definite title=definite>definite</a> used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a>,
21832183
that’s the <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a>.
21842184

21852185
<li>
21862186
If the flex item has ...
21872187
<ul>
21882188
<li>an intrinsic aspect ratio,
2189-
<li>a <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> of <span class=css data-link-for=width>auto</span>, and
2189+
<li>a used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> of <span class=css data-link-for=width>auto</span>, and
21902190
<li>a <a data-link-type=dfn href=#definite title=definite>definite</a> <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>
21912191
</ul>
21922192
then the <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a> is calculated from its inner <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>
21932193
and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s intrinsic aspect ratio.
21942194

21952195
<li>
2196-
If the <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is <a class=css data-link-for=width data-link-type=value title=auto>auto</a> or depends on its available size,
2196+
If the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is <a class=css data-link-for=width data-link-type=value title=auto>auto</a> or depends on its available size,
21972197
and the flex container is being sized under a min-content or max-content constraint
21982198
(e.g. when performing <a href=http://www.w3.org/TR/CSS21/tables.html#auto-table-layout>automatic table layout</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>),
21992199
size the item under that constraint.
22002200
The <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a> is the item’s resulting main size.
22012201

22022202
<li>
22032203
Otherwise,
2204-
if the <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is <a class=css data-link-for=width data-link-type=value title=auto>auto</a> or depends on its available size,
2204+
if the used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> is <a class=css data-link-for=width data-link-type=value title=auto>auto</a> or depends on its available size,
22052205
the available main size is infinite,
22062206
and the flex item’s inline axis is parallel to the main axis,
22072207
lay the item out using
@@ -2211,7 +2211,7 @@ <h3 class="heading settled" data-level=9.2 id=line-sizing><span class=secno>9.2
22112211
<li>
22122212
Otherwise,
22132213
lay out the item into the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#available title="available space">available space</a>
2214-
using its <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> in place of its <a data-link-type=dfn href=#main-size title="main size">main size</a>,
2214+
using its used <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> in place of its <a data-link-type=dfn href=#main-size title="main size">main size</a>,
22152215
treating a <a data-link-type=dfn href=#main-size title="main size">main size</a> of <a class=css data-link-for=width data-link-type=value title=auto>auto</a> as <span class=css>max-content</span>.
22162216
If a <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> is needed to determine the <a data-link-type=dfn href=#main-size title="main size">main size</a>
22172217
(e.g. when the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <a data-link-type=dfn href=#main-size title="main size">main size</a> is in its block axis)

css-flexbox/issues-lc-20140325.txt

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,10 @@ Verified:
285285
Issue 36.
286286
Summary: Should intrinsic aspect ratio be considered?
287287
Comment: http://lists.w3.org/Archives/Public/www-style/2014Jul/0609.html
288-
Open
288+
Response: http://lists.w3.org/Archives/Public/www-style/2014Jul/0616.html
289+
Response: http://lists.w3.org/Archives/Public/www-style/2014Aug/0042.html
290+
Closed: Invalid
291+
Verified:
289292
----
290293
Issue 37.
291294
Summary: Error in application of intrinsic ratio

0 commit comments

Comments
 (0)