Tue, 31 Jul 2012 13:59:27 -0700
Tweak the rules about abspos positioning again.
css3-flexbox/Overview.html | file | annotate | diff | comparison | revisions | |
css3-flexbox/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-flexbox/Overview.html Tue Jul 31 12:54:33 2012 -0700 1.2 +++ b/css3-flexbox/Overview.html Tue Jul 31 13:59:27 2012 -0700 1.3 @@ -206,11 +206,11 @@ 1.4 1.5 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 1.6 1.7 - <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 July 2012</h2> 1.8 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 31 July 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120725/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120725/</a>--> 1.13 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120731/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120731/</a>--> 1.14 1.15 1.16 <dd><a 1.17 @@ -382,16 +382,19 @@ 1.18 1.19 <li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a> 1.20 <ul class=toc> 1.21 - <li><a href="#item-margins"><span class=secno>4.1. </span> Flex Item 1.22 + <li><a href="#abspos-items"><span class=secno>4.1. </span> 1.23 + Absolutely-Positioned Flex Items</a> 1.24 + 1.25 + <li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item 1.26 Margins</a> 1.27 1.28 - <li><a href="#painting"><span class=secno>4.2. </span> Flex Item 1.29 + <li><a href="#painting"><span class=secno>4.3. </span> Flex Item 1.30 Painting</a> 1.31 1.32 - <li><a href="#visibility-collapse"><span class=secno>4.3. </span> 1.33 + <li><a href="#visibility-collapse"><span class=secno>4.4. </span> 1.34 Collapsed Items</a> 1.35 1.36 - <li><a href="#min-size-auto"><span class=secno>4.4. </span> Implied 1.37 + <li><a href="#min-size-auto"><span class=secno>4.5. </span> Implied 1.38 Minimum Size of Flex Items</a> 1.39 </ul> 1.40 1.41 @@ -981,29 +984,83 @@ 1.42 class=property>flex</code></a>’ longhands apply to the table box as 1.43 follows: The contents of any caption boxes contribute to the calculation 1.44 of the table wrapper box's min-content and max-content sizes. However, the 1.45 - <a href="#flex-item"><i>flex item</i></a>‘<code class=css>s final size 1.46 - is calculated by first laying out the captions, and then performing layout 1.47 - as if the distance between the table wrapper box</code>’s edges and the 1.48 - table box's content edges were all part of the table box's border+padding 1.49 - area, and the table box were the <a href="#flex-item"><i>flex 1.50 - item</i></a>. 1.51 - 1.52 - <p id=abspos-items> The <a 1.53 - href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">hypothetical 1.54 - box</a> used to calculate the <i>static position</i> <a href="#CSS21" 1.55 - rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> of an absolutely-positioned 1.56 - <a href="#flex-item"><i>flex item</i></a> corresponds to that of an 1.57 - anonymous empty flex item whose <i>main-axis</i> position, after <a 1.58 - href="#order-property">reordering</a> coincides with the <a 1.59 - href="#main-start"><i>main-start</i></a> edge of any subsequent real flex 1.60 - item on the flex line, and, being hypothetical, has no effect on flex 1.61 - layout. If there is no subsequent real flex item, the hypothetical box's 1.62 - <i>main-axis</i> position is that of a hypothetical last item on the flex 1.63 - line, after any packing spaces that were introduced around any previous 1.64 - real items due to ‘<code class=css>content-justify: 1.65 - space-around</code>’. 1.66 - 1.67 - <h3 id=item-margins><span class=secno>4.1. </span> Flex Item Margins</h3> 1.68 + <a href="#flex-item"><i>flex item</i></a>'s final size is calculated 1.69 + by first laying out the captions, and then performing layout as if the 1.70 + distance between the table wrapper box's edges and the table box's content 1.71 + edges were all part of the table box's border+padding area, and the table 1.72 + box were the <a href="#flex-item"><i>flex item</i></a>. 1.73 + 1.74 + <h3 id=abspos-items><span class=secno>4.1. </span> Absolutely-Positioned 1.75 + Flex Items</h3> 1.76 + 1.77 + <p> An absolutely-positioned <a href="#flex-item"><i>flex item</i></a> does 1.78 + not participate in flex layout beyond the <a 1.79 + href="#algo-flex-order">reordering step</a>. However, if both ‘<code 1.80 + class=property>left</code>’ and ‘<code class=property>right</code>’ 1.81 + or both ‘<code class=property>top</code>’ and ‘<code 1.82 + class=property>bottom</code>’ are ‘<a href="#align-self-auto"><code 1.83 + class=css>auto</code></a>’, then the used value of those properties are 1.84 + computed from its <dfn id=flex-item-static-position>static position</dfn>, 1.85 + as follows: 1.86 + 1.87 + <p> In the <a href="#main-axis"><i>main axis</i></a>, 1.88 + 1.89 + <ol> 1.90 + <li> If there is a subsequent in-flow <a href="#flex-item"><i>flex 1.91 + item</i></a> on the same <i>flex line</i>, the <a 1.92 + href="#flex-item-static-position"><i>static position</i></a> is the outer 1.93 + <a href="#main-start"><i>main-start</i></a> edge of that <a 1.94 + href="#flex-item"><i>flex item</i></a>. 1.95 + 1.96 + <li> Otherwise, if there is a preceding in-flow <a 1.97 + href="#flex-item"><i>flex item</i></a> on the same <i>flex line</i>, the 1.98 + <a href="#flex-item-static-position"><i>static position</i></a> is the 1.99 + outer <a href="#main-end"><i>main-end</i></a> edge of that <a 1.100 + href="#flex-item"><i>flex item</i></a>. 1.101 + 1.102 + <li> Otherwise, the <a href="#flex-item-static-position"><i>static 1.103 + position</i></a> is based on the value of ‘<a 1.104 + href="#justify-content"><code 1.105 + class=property>justify-content</code></a>’ on the <a 1.106 + href="#flex-container"><i>flex container</i></a>: 1.107 + <ul> 1.108 + <li> if ‘<a href="#justify-content"><code 1.109 + class=property>justify-content</code></a>’ is ‘<a 1.110 + href="#align-content-flex-start"><code 1.111 + class=css>flex-start</code></a>’ or ‘<a 1.112 + href="#align-content-space-between"><code 1.113 + class=css>space-between</code></a>’, it is the inner <a 1.114 + href="#main-start"><i>main-start</i></a> edge of the <a 1.115 + href="#flex-container"><i>flex container</i></a>; 1.116 + 1.117 + <li> if ‘<a href="#justify-content"><code 1.118 + class=property>justify-content</code></a>’ is ‘<a 1.119 + href="#align-content-center"><code class=css>center</code></a>’ or 1.120 + ‘<a href="#align-content-space-around"><code 1.121 + class=css>space-around</code></a>’, it is the center of the content 1.122 + area of the <a href="#flex-container"><i>flex container</i></a>; 1.123 + 1.124 + <li> if ‘<a href="#justify-content"><code 1.125 + class=property>justify-content</code></a>’ is ‘<code 1.126 + class=css>end</code>’, it is the inner <a 1.127 + href="#main-end"><i>main-end</i></a> edge of the <a 1.128 + href="#flex-container"><i>flex container</i></a>. 1.129 + </ul> 1.130 + </ol> 1.131 + 1.132 + <p> In the <a href="#cross-axis"><i>cross axis</i></a>, if there is a 1.133 + preceding in-flow <a href="#flex-item"><i>flex item</i></a>, the <a 1.134 + href="#flex-item-static-position"><i>static position</i></a> is the <a 1.135 + href="#cross-start"><i>cross-start</i></a> edge of the <i>flex-line</i> 1.136 + that item is in. Otherwise, the <a 1.137 + href="#flex-item-static-position"><i>static position</i></a> is the 1.138 + <i>cross-start edge</i> of the first <i>flex line</i>. 1.139 + 1.140 + <p class=note> These rules are intended to more-or-less match what the 1.141 + position would be if the abspos was a 0x0 flex item that participated in 1.142 + layout. 1.143 + 1.144 + <h3 id=item-margins><span class=secno>4.2. </span> Flex Item Margins</h3> 1.145 1.146 <p> The margins of adjacent <a href="#flex-item"><i>flex items</i></a> do 1.147 not collapse. Auto margins absorb extra space in the corresponding 1.148 @@ -1011,7 +1068,7 @@ 1.149 apart; see <a href="#auto-margins">Aligning with ‘<code 1.150 class=css>auto</code>’ margins</a>. 1.151 1.152 - <h3 id=painting><span class=secno>4.2. </span> Flex Item Painting</h3> 1.153 + <h3 id=painting><span class=secno>4.3. </span> Flex Item Painting</h3> 1.154 1.155 <p> <a href="#flex-item"><i>Flex items</i></a> paint exactly the same as 1.156 block-level elements in the normal flow, except that ‘<code 1.157 @@ -1023,7 +1080,7 @@ 1.158 <p class=note> Note: Descendants that are positioned outside a flex item 1.159 still participate in any stacking context established by the flex item. 1.160 1.161 - <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Items</h3> 1.162 + <h3 id=visibility-collapse><span class=secno>4.4. </span> Collapsed Items</h3> 1.163 1.164 <p> Specifying ‘<code class=css>visibility:collapse</code>’ on a flex 1.165 item causes it to become a <dfn id=collapsed-flex-item 1.166 @@ -1156,7 +1213,7 @@ 1.167 class=css>visibility: collapse</code>’ is still recommended for dynamic 1.168 cases.) 1.169 1.170 - <h3 id=min-size-auto><span class=secno>4.4. </span> Implied Minimum Size of 1.171 + <h3 id=min-size-auto><span class=secno>4.5. </span> Implied Minimum Size of 1.172 Flex Items</h3> 1.173 1.174 <p> To provide a more reasonable default minimum size for flex items, this 1.175 @@ -4128,10 +4185,10 @@ 1.176 title="''center''"><strong>8.2.</strong></a> 1.177 1.178 <li>collapsed, <a href="#collapsed-flex-item" 1.179 - title=collapsed><strong>4.3.</strong></a> 1.180 + title=collapsed><strong>4.4.</strong></a> 1.181 1.182 <li>collapsed flex item, <a href="#collapsed-flex-item" 1.183 - title="collapsed flex item"><strong>4.3.</strong></a> 1.184 + title="collapsed flex item"><strong>4.4.</strong></a> 1.185 1.186 <li>‘<a href="#flex-flow-column"><code class=css>column</code></a>’, 1.187 <a href="#flex-flow-column" title="''column''"><strong>5.1.</strong></a> 1.188 @@ -4281,7 +4338,7 @@ 1.189 title=main-start><strong>2.</strong></a> 1.190 1.191 <li>min-width/height:auto, <a href="#min-auto" 1.192 - title="min-width/height:auto"><strong>4.4.</strong></a> 1.193 + title="min-width/height:auto"><strong>4.5.</strong></a> 1.194 1.195 <li>multi-line, <a href="#multi-line" 1.196 title=multi-line><strong>6.</strong></a> 1.197 @@ -4324,6 +4381,9 @@ 1.198 href="#justify-content-space-between" 1.199 title="''space-between''"><strong>8.2.</strong></a> 1.200 1.201 + <li>static position, <a href="#flex-item-static-position" 1.202 + title="static position"><strong>4.1.</strong></a> 1.203 + 1.204 <li>‘<a href="#align-content-stretch"><code 1.205 class=css>stretch</code></a>’, <a href="#align-content-stretch" 1.206 title="''stretch''"><strong>8.4.</strong></a>, <a
2.1 --- a/css3-flexbox/Overview.src.html Tue Jul 31 12:54:33 2012 -0700 2.2 +++ b/css3-flexbox/Overview.src.html Tue Jul 31 13:59:27 2012 -0700 2.3 @@ -652,27 +652,63 @@ 2.4 However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows: 2.5 The contents of any caption boxes contribute to the calculation of 2.6 the table wrapper box's min-content and max-content sizes. 2.7 - However, the <i>flex item</i>'s final size is calculated by 2.8 + However, the <i>flex item</i>'s final size is calculated by 2.9 first laying out the captions, 2.10 and then performing layout as if the distance between 2.11 the table wrapper box's edges and the table box's content edges 2.12 were all part of the table box's border+padding area, 2.13 and the table box were the <i>flex item</i>. 2.14 2.15 - <p id='abspos-items'> 2.16 - 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]] 2.17 - of an absolutely-positioned <i>flex item</i> corresponds to 2.18 - that of an anonymous empty flex item 2.19 - whose <i>main-axis</i> position, 2.20 - after <a href="#order-property">reordering</a> 2.21 - coincides with the <i>main-start</i> edge of 2.22 - any subsequent real flex item on the flex line, 2.23 - and, being hypothetical, has no effect on flex layout. 2.24 - If there is no subsequent real flex item, 2.25 - the hypothetical box's <i>main-axis</i> position is 2.26 - that of a hypothetical last item on the flex line, 2.27 - after any packing spaces that were introduced 2.28 - around any previous real items due to ''content-justify: space-around''. 2.29 +<h3 id='abspos-items'> 2.30 +Absolutely-Positioned Flex Items</h3> 2.31 + 2.32 + <p> 2.33 + An absolutely-positioned <i>flex item</i> does not participate in flex layout 2.34 + beyond the <a href="#algo-flex-order">reordering step</a>. 2.35 + However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'', 2.36 + then the used value of those properties 2.37 + are computed from its <dfn id='flex-item-static-position'>static position</dfn>, as follows: 2.38 + 2.39 + <p> 2.40 + In the <i>main axis</i>, 2.41 + 2.42 + <ol> 2.43 + <li> 2.44 + If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>, 2.45 + the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>. 2.46 + 2.47 + <li> 2.48 + Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>, 2.49 + the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>. 2.50 + 2.51 + <li> 2.52 + Otherwise, the <i>static position</i> is based on the value of 'justify-content' on the <i>flex container</i>: 2.53 + 2.54 + <ul> 2.55 + <li> 2.56 + if 'justify-content' is ''flex-start'' or ''space-between'', 2.57 + it is the inner <i>main-start</i> edge of the <i>flex container</i>; 2.58 + 2.59 + <li> 2.60 + if 'justify-content' is ''center'' or ''space-around'', 2.61 + it is the center of the content area of the <i>flex container</i>; 2.62 + <li> 2.63 + if 'justify-content' is ''end'', 2.64 + it is the inner <i>main-end</i> edge of the <i>flex container</i>. 2.65 + </ul> 2.66 + </ol> 2.67 + 2.68 + <p> 2.69 + In the <i>cross axis</i>, 2.70 + if there is a preceding in-flow <i>flex item</i>, 2.71 + the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i> 2.72 + that item is in. 2.73 + Otherwise, the <i>static position</i> is the <i>cross-start edge</i> of the first <i>flex line</i>. 2.74 + 2.75 + <p class='note'> 2.76 + These rules are intended to more-or-less match 2.77 + what the position would be if the abspos was a 0x0 flex item 2.78 + that participated in layout. 2.79 2.80 <h3 id='item-margins'> 2.81 Flex Item Margins</h3> 2.82 @@ -864,21 +900,23 @@ 2.83 2.84 <div class="note" id="min-size-opt"> 2.85 <p> 2.86 - Note that while a content-based minimum size is often appropriate, 2.87 - and helps prevent content from overlapping or spilling outside its container, 2.88 - in some cases it is not: 2.89 + Note that while a content-based minimum size is often appropriate, 2.90 + and helps prevent content from overlapping or spilling outside its container, 2.91 + in some cases it is not: 2.92 + 2.93 <p> 2.94 - In particular, if flex sizing is being used for a major content area of a document, 2.95 - it is better to set an explicit font-relative minimum width such as ''min-width: 12em''. 2.96 - A content-based minimum width could result in a large table or large image 2.97 - stretching the size of the entire content area into an overflow zone, 2.98 - and thereby making lines of text gratuitously long and hard to read. 2.99 + In particular, if flex sizing is being used for a major content area of a document, 2.100 + it is better to set an explicit font-relative minimum width such as ''min-width: 12em''. 2.101 + A content-based minimum width could result in a large table or large image 2.102 + stretching the size of the entire content area into an overflow zone, 2.103 + and thereby making lines of text gratuitously long and hard to read. 2.104 + 2.105 <p> 2.106 - Note also, when content-based sizing is used on an item with large amounts of content, 2.107 - the layout engine must traverse all of this content before finding its minimum size, 2.108 - whereas if the author sets an explicit minimum, this is not necessary. 2.109 - (For items with small amounts of content, however, 2.110 - this traversal is trivial and therefore not a problem.) 2.111 + Note also, when content-based sizing is used on an item with large amounts of content, 2.112 + the layout engine must traverse all of this content before finding its minimum size, 2.113 + whereas if the author sets an explicit minimum, this is not necessary. 2.114 + (For items with small amounts of content, however, 2.115 + this traversal is trivial and therefore not a problem.) 2.116 </div> 2.117 2.118 <h2>