Skip to content

Commit 77f433e

Browse files
committed
Slightly rephrase the abspos staticpos calculations for clarity.
1 parent 100c3a7 commit 77f433e

1 file changed

Lines changed: 22 additions & 12 deletions

File tree

css-flexbox/Overview.bs

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -653,7 +653,8 @@ Flex Items</h2>
653653
<h3 id='abspos-items'>
654654
Absolutely-Positioned Flex Children</h3>
655655

656-
An absolutely-positioned child of a <a>flex container</a> does not participate in flex layout.
656+
As it is out-of-flow,
657+
an absolutely-positioned child of a <a>flex container</a> does not participate in flex layout.
657658

658659
The <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">static position</a>
659660
of an absolutely-positioned child of a <a>flex container</a>
@@ -664,21 +665,28 @@ Absolutely-Positioned Flex Children</h3>
664665
For this purpose,
665666
a value of ''align-self: auto'' is treated identically to ''align-self/start''.
666667

667-
<div class='example'>
668-
The effect of this is that if you set, for example,
669-
''align-content: center;'' on an absolutely-positioned child of a <a>flex container</a>,
670-
the child’s static position will center it in the <a>flex container's</a> <a>cross axis</a>.
671-
</div>
672-
673668
<div class="note">
674-
The <dfn>static-position rectangle</dfn> is the <a>alignment container</a>
669+
In other words,
670+
the <a>static-position rectangle</a> of an absolutely-positioned child of a <a>flex container</a>
671+
is the <a>flex container's</a> content box,
672+
where the <dfn>static-position rectangle</dfn> is the <a>alignment container</a>
675673
used to determine the static-position offsets of an absolutely-positioned box.
676-
In block layout it corresponds to the position of the “hypothetical box”
674+
675+
(In block layout the static position rectangle corresponds to the position of the “hypothetical box”
677676
described in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2.1&sect;10.3.7</a>.
678-
(Since it has no alignment properties,
677+
Since it has no alignment properties,
679678
CSS2.1 always uses a <a>block-start</a> <a>inline-start</a> alignment
680-
of the absolutely-positioned box within the <a>static-position rectangle</a>.)
681-
Note that this definition will eventually move to the CSS Positioning module.
679+
of the absolutely-positioned box within the <a>static-position rectangle</a>.
680+
Note that this definition will eventually move to the CSS Positioning module.)
681+
</div>
682+
683+
<div class='example'>
684+
The effect of this is that if you set, for example,
685+
''align-content: center;'' on an absolutely-positioned child of a <a>flex container</a>,
686+
auto offsets on the child will center it in the <a>flex container's</a> <a>cross axis</a>.
687+
688+
However, since the absolutely-positioned box is considered to be “fixed-size”,
689+
a value of ''align-self/stretch'' is treated the same as ''align-self/flex-start''.
682690
</div>
683691

684692
<h3 id='item-margins'>
@@ -3472,6 +3480,8 @@ Clarifications</h4>
34723480
In general, the <a>automatic minimum size</a> &hellip; defined below:
34733481
</p></ins>
34743482
</blockquote>
3483+
<li id="change-2016-clarify-staticpos">
3484+
Slightly reworded the section on determining the static position of absolutely-positioned children to be clearer.
34753485
<li>Miscellaneous trivial editorial improvements.
34763486
</ul>
34773487

0 commit comments

Comments
 (0)