Skip to content

Commit 1e43603

Browse files
committed
[css-align] Clarify that stretching only increases size.
1 parent 0cfd8e2 commit 1e43603

File tree

2 files changed

+30
-8
lines changed

2 files changed

+30
-8
lines changed

css-align/Overview.bs

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -212,10 +212,13 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
212212

213213
<dt><dfn for="<item-position>">stretch</dfn>
214214
<dd>If the 'width' or 'height' (as appropriate) of the <a>alignment subject</a> is ''width/auto'',
215-
its used value is the length necessary to make the <a>alignment subject</a>’s outer size
215+
and its outer size is smaller than the <a>alignment container</a>,
216+
its used value is increased to the length necessary to make the <a>alignment subject</a>’s outer size
216217
as close to the size of the <a>alignment container</a> as possible,
217-
while still respecting the constraints imposed by 'min-height'/'max-width'/etc.
218-
Otherwise, this is equivalent to ''start''.
218+
while still respecting the constraints imposed by 'max-height'/'max-width'.
219+
220+
The <a>alignment subject</a> is then aligned as per ''flex-start''.
221+
<span class='note'>(For layout modes other than flex layout, ''flex-start'' is identical to ''start''.)</span>
219222

220223
Issue: Should this value allow a fallback alignment, like the <<content-distribution>> values do?
221224

@@ -382,7 +385,8 @@ Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between''
382385
so that the combined size exactly fills the <a>alignment container</a>,
383386
and then clamped by their 'max-width'/'max-height' constraints.
384387

385-
The <a>alignment subjects</a> are then aligned as per ''flex-start''.
388+
Unless otherwise specified,
389+
this value falls back to ''flex-start''.
386390
<span class='note'>(For layout modes other than flex layout, ''flex-start'' is identical to ''start''.)</span>
387391
</dl>
388392

@@ -1057,6 +1061,8 @@ Changes</h2>
10571061
* Added ''last-baseline'' keyword.
10581062
* Improved details of baseline alignment.
10591063
* Changed handling of ''justify-self/auto''/''<item-position>/stretch'' for block-level and abspos elements in 'justify-self'/'align-self' to be more powerful and less confusing.
1064+
* Tightened up grammar combinations with <<overflow-position>> to be restricted to values that actually make sense.
1065+
* Various clarifications.
10601066

10611067
<h2 class=no-num id="acknowledgments">
10621068
Acknowledgments</h2>

css-align/Overview.html

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -611,10 +611,15 @@ <h3 class="heading settled" data-level="3.1" id="positional-values"><span class=
611611
<dt><dfn class="css" data-dfn-for="<item-position>" data-dfn-type="value" data-export="" id="valdef-item-position-stretch">stretch<a class="self-link" href="#valdef-item-position-stretch"></a></dfn>
612612
</dt>
613613
<dd>If the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-width">width</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> (as appropriate) of the <a data-link-type="dfn" href="#alignment-subject">alignment subject</a> is <span class="css" data-link-for="width">auto</span>,
614-
its used value is the length necessary to make the <a data-link-type="dfn" href="#alignment-subject">alignment subject</a>’s outer size
614+
and its outer size is smaller than the <a data-link-type="dfn" href="#alignment-container">alignment container</a>,
615+
its used value is increased to the length necessary to make the <a data-link-type="dfn" href="#alignment-subject">alignment subject</a>’s outer size
615616
as close to the size of the <a data-link-type="dfn" href="#alignment-container">alignment container</a> as possible,
616-
while still respecting the constraints imposed by <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height">min-height</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width">max-width</a>/etc.
617-
Otherwise, this is equivalent to <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-start">start</a>.
617+
while still respecting the constraints imposed by <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-max-height">max-height</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width">max-width</a>.
618+
619+
620+
<p>The <a data-link-type="dfn" href="#alignment-subject">alignment subject</a> is then aligned as per <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-flex-start">flex-start</a>.
621+
<span class="note" role="note">(For layout modes other than flex layout, <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-flex-start">flex-start</a> is identical to <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-start">start</a>.)</span></p>
622+
618623

619624

620625
<p class="issue" id="issue-c363d194"><a class="self-link" href="#issue-c363d194"></a>Should this value allow a fallback alignment, like the <a class="production css" data-link-type="type" href="#typedef-content-distribution">&lt;content-distribution></a> values do?</p>
@@ -856,7 +861,8 @@ <h3 class="heading settled" data-level="3.3" id="distribution-values"><span clas
856861
and then clamped by their <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width">max-width</a>/<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-max-height">max-height</a> constraints.
857862

858863

859-
<p>The <a data-link-type="dfn" href="#alignment-subject">alignment subjects</a> are then aligned as per <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-flex-start">flex-start</a>.
864+
<p>Unless otherwise specified,
865+
this value falls back to <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-flex-start">flex-start</a>.
860866
<span class="note" role="note">(For layout modes other than flex layout, <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-flex-start">flex-start</a> is identical to <a class="css" data-link-type="maybe" href="#valdef-item-position-content-position-start">start</a>.)</span></p>
861867

862868

@@ -2025,6 +2031,16 @@ <h2 class="heading settled" data-level="8" id="changes"><span class="secno">8. <
20252031
<p>Changed handling of <a class="css" data-link-for="justify-self" data-link-type="maybe" href="#valdef-justify-self-auto">auto</a>/<a class="css" data-link-for="" data-link-type="maybe" href="#valdef-item-position-stretch">stretch</a> for block-level and abspos elements in <a class="property" data-link-type="propdesc" href="#propdef-justify-self">justify-self</a>/<a class="property" data-link-type="propdesc" href="#propdef-align-self">align-self</a> to be more powerful and less confusing.</p>
20262032

20272033

2034+
</li>
2035+
<li data-md="">
2036+
<p>Tightened up grammar combinations with <a class="production css" data-link-type="type" href="#typedef-overflow-position">&lt;overflow-position></a> to be restricted to values that actually make sense.</p>
2037+
2038+
2039+
</li>
2040+
<li data-md="">
2041+
<p>Various clarifications.</p>
2042+
2043+
20282044
</li>
20292045
</ul>
20302046

0 commit comments

Comments
 (0)