Skip to content

Commit 8a5a814

Browse files
committed
Attempt to implement WG resolution on abspos static position.
1 parent 74ed8e7 commit 8a5a814

2 files changed

Lines changed: 19 additions & 15 deletions

File tree

css3-flexbox/Overview.html

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -766,7 +766,7 @@ <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
766766
container. </figcaption> </figure>
767767

768768
<dl id=main>
769-
<dt class=axis>main axis
769+
<dt class=axis title="main axis|main-axis">main axis
770770

771771
<dt class=axis>main dimension
772772

@@ -797,7 +797,7 @@ <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
797797
</dl>
798798

799799
<dl id=cross>
800-
<dt class=axis>cross axis
800+
<dt class=axis title="cross axis|cross-axis">cross axis
801801

802802
<dt class=axis>cross dimension
803803

@@ -992,12 +992,15 @@ <h2 id=flex-items><span class=secno>4. </span> Flex Items</h2>
992992
href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">hypothetical
993993
box</a> used to calculate the <i>static position</i> <a href="#CSS21"
994994
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> of an absolutely-positioned
995-
<a href="#flex-item"><i>flex item</i></a> corresponds to the content-box
996-
of the flex container. (This effectively defines the <i>static
997-
position</i> as the <i>head</i> <i>start</i> content-box corner of the <a
998-
href="#flex-container"><i>flex container</i></a>.) As in block layout, the
999-
absolutely-positioned box has no effect on the layout of surrounding
1000-
content.
995+
<a href="#flex-item"><i>flex item</i></a> corresponds to that of an
996+
anonymous empty flex item whose <i>main-axis</i> position coincides with
997+
the <a href="#main-start"><i>main-start</i></a> edge of the subsequent
998+
real flex item and, being hypothetical, has no effect on flex layout. If
999+
there is no subsequent real flex item, the hypothetical box's
1000+
<i>main-axis</i> position is the <a href="#main-end"><i>main-end</i></a>
1001+
edge of the previous real flex item, else the <a
1002+
href="#main-start"><i>main-start</i></a> edge of the <a
1003+
href="#flex-container"><i>flex container</i></a>.
10011004

10021005
<h3 id=item-margins><span class=secno>4.1. </span> Flex Item Margins</h3>
10031006

css3-flexbox/Overview.src.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ <h2 id='box-model'>
474474
</figure>
475475

476476
<dl id="main">
477-
<dt class='axis'>main axis
477+
<dt class='axis' title="main axis|main-axis">main axis
478478
<dt class='axis'>main dimension
479479
<dd>
480480
The <dfn>main axis</dfn> of a flex container is the primary axis along which <i>flex items</i> are laid out.
@@ -499,7 +499,7 @@ <h2 id='box-model'>
499499
</dl>
500500

501501
<dl id="cross">
502-
<dt class='axis'>cross axis
502+
<dt class='axis' title="cross axis|cross-axis">cross axis
503503
<dt class='axis'>cross dimension
504504
<dd>
505505
The axis perpendicular to the <i>main axis</i> is called the <dfn>cross axis</dfn>.
@@ -662,11 +662,12 @@ <h2 id='flex-items'>
662662
<p id='abspos-items'>
663663
The <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">hypothetical box</a> used to calculate the <i>static position</i> [[!CSS21]]
664664
of an absolutely-positioned <i>flex item</i> corresponds to
665-
the content-box of the flex container.
666-
(This effectively defines the <i>static position</i> as
667-
the <i>head</i> <i>start</i> content-box corner of the <i>flex container</i>.)
668-
As in block layout, the absolutely-positioned box has no effect
669-
on the layout of surrounding content.
665+
that of an anonymous empty flex item
666+
whose <i>main-axis</i> position coincides with the <i>main-start</i> edge of the subsequent real flex item
667+
and, being hypothetical, has no effect on flex layout.
668+
If there is no subsequent real flex item,
669+
the hypothetical box's <i>main-axis</i> position is the <i>main-end</i> edge of the previous real flex item,
670+
else the <i>main-start</i> edge of the <i>flex container</i>.
670671

671672
<h3 id='item-margins'>
672673
Flex Item Margins</h3>

0 commit comments

Comments
 (0)