Tweak the rules about abspos positioning again.

Tue, 31 Jul 2012 13:59:27 -0700

author
Tab Atkins Jr. <jackalmage@gmail.com>
date
Tue, 31 Jul 2012 13:59:27 -0700
changeset 6317
df252589ecfc
parent 6316
8f00cb17ec04
child 6318
ed03c6908070

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>&apos;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>&apos;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>

mercurial