- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 06 Jan 2012 22:17:16 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv17623
Modified Files:
Overview.html Overview.src.html
Log Message:
Switch the handling of abspos flexbox children to use placeholders, as resolved at TPAC.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.87
retrieving revision 1.88
diff -u -d -r1.87 -r1.88
--- Overview.html 6 Jan 2012 16:07:03 -0000 1.87
+++ Overview.html 6 Jan 2012 22:17:14 -0000 1.88
@@ -494,53 +494,32 @@
Absolutely Positioned Flexbox Items</h4>
<p>Absolutely positioned children of a flexbox are not <a
- href="#flexbox-item"><i>flexbox items</i></a>, but their "static position"
- (their position when the ‘<code
+ href="#flexbox-item"><i>flexbox items</i></a>, but they leave behind
+ "placeholders" in their normal position in the box tree. These
+ placeholders are anonymous inline boxes with a width and height of
+ ‘<code class=css>0px</code>’, and they interact normally with
+ the flexbox layout algorithm. In particular, they'll trigger the creation
+ an anonymous flexbox item wrapper boxes, or join neighboring inline
+ elements in <em>their</em> anonymous flexbox item wrapper boxes.
+
+ <p>The "static position" of an absolutely positioned child of a flexbox
+ (the position when the ‘<code
class=property>top</code>’/‘<code
class=property>right</code>’/‘<code
class=property>bottom</code>’/‘<code
class=property>left</code>’ properties are ‘<code
- class=css>auto</code>’) responds somewhat to the flexbox's various
- properties. The element's static position in the flexbox's <a
- href="#cross-axis"><i>cross axis</i></a> is on the <a
- href="#cross-start"><i>cross-start</i></a> edge of the flexbox's content
- box. The static position in the flexbox's <a href="#main-axis"><i>main
- axis</i></a> is slightly more complex to compute:
-
- <p>First, find the element's <dfn id=hypothetical-neighbors>hypothetical
- neighbors</dfn> by assuming that the element is a normal <a
- href="#flexbox-item"><i>flexbox item</i></a> with ‘<code
- class=css>flex-order:0</code>’, and reorder the flexbox's contents
- as mandated by ‘<a href="#flex-order0"><code
- class=property>flex-order</code></a>’. The <a
- href="#flexbox-item"><i>flexbox items</i></a> immediately preceding and
- following the element in the flexbox's direction (if any) are the
- element's <a href="#hypothetical-neighbors"><i>hypothetical
- neighbors</i></a>.
+ class=css>auto</code>’), then, is the final position of their
+ corresponding placeholder, after flexbox layout has been performed.
- <p>If the element has two neighbors, its static position in the <a
- href="#main-axis"><i>main axis</i></a> is exactly in the center of the
- packing space between them when the flexbox is actually laid out. If the
- element has only a preceding neighbor, its static position in the <a
- href="#main-axis"><i>main axis</i></a> is flush with the <a
- href="#main-end"><i>main-end</i></a> edge of the margin box of the
- neighbor. If the element has only a following neighbor, its static
- position in the <a href="#main-axis"><i>main axis</i></a> is flush with
- the <a href="#main-start"><i>main-start</i></a> edge of the margin box of
- the neighbor. Finally, if the element has no neighbors (the flexbox has no
- in-flow children at all), the static position in the <a
- href="#main-axis"><i>main axis</i></a> is based on the value of ‘<a
- href="#flex-pack0"><code class=property>flex-pack</code></a>’: if
- the value is ‘<a href="#flex-line-pack-start"><code
- class=css>start</code></a>’ or ‘<a
- href="#flex-line-pack-justify"><code class=css>justify</code></a>’,
- it's flush with the <a href="#main-start"><i>main-start</i></a> edge of
- the flexbox's content box; if the value is ‘<a
- href="#flex-line-pack-end"><code class=css>end</code></a>’, it's
- flush with the <a href="#main-end"><i>main-end</i></a> edge of the
- flexbox's content box; if the value is ‘<a
- href="#flex-line-pack-center"><code class=css>center</code></a>’,
- it's centered within the flexbox's content box.
+ <p class=note>Note: In most cases, this means that absolutely positioned
+ items will have no effect on flexbox layout, even if they force the
+ generation of an anonymous flexbox item wrapper, because those wrapper
+ items will also collapse to zero size and have no effect. The only
+ exception is when the flexbox has ‘<code
+ class=css>flex-pack:justify</code>’, in which case the anonymous
+ flexbox item will cause there to be two packing spaces where there would
+ otherwise be only one, which will appear as a double-size space between
+ two "real" items.
<h2 id=ordering-orientation><span class=secno>3. </span> Ordering and
Orientation</h2>
@@ -1981,9 +1960,6 @@
<li>flex-wrap, <a href="#flex-wrap"
title=flex-wrap><strong>3.1.</strong></a>
- <li>hypothetical neighbors, <a href="#hypothetical-neighbors"
- title="hypothetical neighbors"><strong>2.2.1.</strong></a>
-
<li>inline flexbox, <a href="#inline-flexbox"
title="inline flexbox"><strong>2.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.87
retrieving revision 1.88
diff -u -d -r1.87 -r1.88
--- Overview.src.html 6 Jan 2012 16:07:03 -0000 1.87
+++ Overview.src.html 6 Jan 2012 22:17:14 -0000 1.88
@@ -196,11 +196,11 @@
<h4 id='abspos-flexbox-items'>
Positioning Absolutely Positioned Flexbox Items</h4>
- <p>Absolutely positioned children of a flexbox are not <i>flexbox items</i>, but their "static position" (their position when the 'top'/'right'/'bottom'/'left' properties are ''auto'') responds somewhat to the flexbox's various properties. The element's static position in the flexbox's <i>cross axis</i> is on the <i>cross-start</i> edge of the flexbox's content box. The static position in the flexbox's <i>main axis</i> is slightly more complex to compute:</p>
+ <p>Absolutely positioned children of a flexbox are not <i>flexbox items</i>, but they leave behind "placeholders" in their normal position in the box tree. These placeholders are anonymous inline boxes with a width and height of ''0px'', and they interact normally with the flexbox layout algorithm. In particular, they'll trigger the creation an anonymous flexbox item wrapper boxes, or join neighboring inline elements in <em>their</em> anonymous flexbox item wrapper boxes.</p>
- <p>First, find the element's <dfn>hypothetical neighbors</dfn> by assuming that the element is a normal <i>flexbox item</i> with ''flex-order:0'', and reorder the flexbox's contents as mandated by 'flex-order'. The <i>flexbox items</i> immediately preceding and following the element in the flexbox's direction (if any) are the element's <i>hypothetical neighbors</i>.</p>
+ <p>The "static position" of an absolutely positioned child of a flexbox (the position when the 'top'/'right'/'bottom'/'left' properties are ''auto''), then, is the final position of their corresponding placeholder, after flexbox layout has been performed.</p>
- <p>If the element has two neighbors, its static position in the <i>main axis</i> is exactly in the center of the packing space between them when the flexbox is actually laid out. If the element has only a preceding neighbor, its static position in the <i>main axis</i> is flush with the <i>main-end</i> edge of the margin box of the neighbor. If the element has only a following neighbor, its static position in the <i>main axis</i> is flush with the <i>main-start</i> edge of the margin box of the neighbor. Finally, if the element has no neighbors (the flexbox has no in-flow children at all), the static position in the <i>main axis</i> is based on the value of 'flex-pack': if the value is ''start'' or ''justify'', it's flush with the <i>main-start</i> edge of the flexbox's content box; if the value is ''end'', it's flush with the <i>main-end</i> edge of the flexbox's content box; if the value is ''center'', it's centered within the flexbox's content box.</p>
+ <p class='note'>Note: In most cases, this means that absolutely positioned items will have no effect on flexbox layout, even if they force the generation of an anonymous flexbox item wrapper, because those wrapper items will also collapse to zero size and have no effect. The only exception is when the flexbox has ''flex-pack:justify'', in which case the anonymous flexbox item will cause there to be two packing spaces where there would otherwise be only one, which will appear as a double-size space between two "real" items.</p>
<h2 id='ordering-orientation'>
Ordering and Orientation</h2>
Received on Friday, 6 January 2012 22:17:18 UTC