css3-flexbox/Overview.src.html

changeset 6823
3b0baf36f76d
parent 6752
54565c24c458
child 6873
4d607e6a3cf7
     1.1 --- a/css3-flexbox/Overview.src.html	Tue Oct 09 10:40:38 2012 -0700
     1.2 +++ b/css3-flexbox/Overview.src.html	Tue Oct 09 11:03:39 2012 -0700
     1.3 @@ -204,8 +204,8 @@
     1.4  
     1.5  	<dl>
     1.6  		<dt>This version:
     1.7 -		<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a>
     1.8 -		<!--<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> -->
     1.9 +		<!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/CR-css3-flexbox-[CDATE]/</a>-->
    1.10 +		<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
    1.11  		<dt>Latest version:
    1.12  		<!--<dd><a href="[LATEST]">[LATEST]</a>-->
    1.13  		<dd><a href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
    1.14 @@ -214,7 +214,7 @@
    1.15  		<dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
    1.16  
    1.17  		<dt>Previous version:
    1.18 -		<dd><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
    1.19 +		<dd><a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/</a>
    1.20  
    1.21  		<dt>Issues List:
    1.22          <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Flexbox&amp;resolution=---">Bugzilla Bugs for Flexbox</a>
    1.23 @@ -589,10 +589,10 @@
    1.24  
    1.25  	<p>
    1.26  		The contents of a <i>flex container</i> consists of zero or more <dfn title="flex item" id="flex-item">flex items</dfn>:
    1.27 -		each child of a <i>flex container</i>
    1.28 +		each in-flow child of a <i>flex container</i>
    1.29  		becomes a <i>flex item</i>,
    1.30  		and each contiguous run of text that is directly contained inside a <i>flex container</i>
    1.31 -		is wrapped in an anonymous <i>flex item</i>.
    1.32 +		is wrapped in an anonymous <i>flex item</i> element.
    1.33  		However, an anonymous flex item that contains only
    1.34  		<a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a>
    1.35  		is not rendered, as if it were ''display:none''.
    1.36 @@ -665,10 +665,10 @@
    1.37  		and the table box were the <i>flex item</i>.
    1.38  
    1.39  <h3 id='abspos-items'>
    1.40 -Absolutely-Positioned Flex Items</h3>
    1.41 +Absolutely-Positioned Flex Children</h3>
    1.42  
    1.43  	<p>
    1.44 -		An absolutely-positioned <i>flex item</i> does not participate in flex layout
    1.45 +		An absolutely-positioned child element of a <i>flex container</i> does not participate in flex layout
    1.46  		beyond the <a href="#algo-flex-order">reordering step</a>.
    1.47  		However, if both 'left' and 'right' or both 'top' and 'bottom' are ''auto'',
    1.48  		then the used value of those properties 
    1.49 @@ -676,12 +676,12 @@
    1.50  
    1.51  	<p>
    1.52  		If both 'left' and 'right' are ''auto'',
    1.53 -		the <i>flex item</i> must be positioned so that
    1.54 +		the absolutely-positioned child must be positioned so that
    1.55  		its <i>main-start</i> or <i>cross-start</i> edge
    1.56  		(whichever is in the horizontal axis)
    1.57  		is aligned with the <i>static position</i>.
    1.58  		If both 'top' and 'bottom' are ''auto'',
    1.59 -		the <i>flex item</i> must be positioned so that
    1.60 +		the absolutely-positioned child must be positioned so that
    1.61  		its <i>main-start</i> or <i>cross-start</i> edge
    1.62  		(whichever is in the vertical axis)
    1.63  		is aligned with the <i>static position</i>.
    1.64 @@ -691,17 +691,17 @@
    1.65  
    1.66  	<ol>
    1.67  		<li>
    1.68 -			If there is a subsequent in-flow <i>flex item</i> on the same <i>flex line</i>,
    1.69 +			If there is a subsequent <i>flex item</i> on the same <i>flex line</i>,
    1.70  			the <i>static position</i> is the outer <i>main-start</i> edge of that <i>flex item</i>.
    1.71  
    1.72  		<li>
    1.73 -			Otherwise, if there is a preceding in-flow <i>flex item</i> on the same <i>flex line</i>,
    1.74 +			Otherwise, if there is a preceding <i>flex item</i> on the same <i>flex line</i>,
    1.75  			the <i>static position</i> is the outer <i>main-end</i> edge of that <i>flex item</i>.
    1.76  
    1.77  		<li>
    1.78  			Otherwise, the <i>static position</i> is determined
    1.79  			by the value of 'justify-content' on the <i>flex container</i>
    1.80 -			as if the <i>static position</i> were represented by a zero-sized flex item.
    1.81 +			as if the <i>static position</i> were represented by a zero-sized <i>flex item</i>.
    1.82  	</ol>
    1.83  
    1.84  	<p>
    1.85 @@ -709,7 +709,7 @@
    1.86  
    1.87  	<ol>
    1.88  		<li>
    1.89 -			If there is a preceding in-flow <i>flex item</i>,
    1.90 +			If there is a preceding <i>flex item</i>,
    1.91  			the <i>static position</i> is the <i>cross-start</i> edge of the <i>flex-line</i>
    1.92  			that item is in.
    1.93  		<li>
    1.94 @@ -1208,7 +1208,7 @@
    1.95  			<td>0
    1.96  		<tr>
    1.97  			<th>Applies to:
    1.98 -			<td>flex items
    1.99 +			<td>flex items and absolutely-positioned flex container children
   1.100  		<tr>
   1.101  			<th>Inherited:
   1.102  			<td>no
   1.103 @@ -2402,12 +2402,12 @@
   1.104  			as described in the <a href="#flex-items">Flex Items</a> section.
   1.105  
   1.106  		<li id='algo-flex-order'>
   1.107 -			<strong>Re-order the flex items according to their 'order'.</strong>
   1.108 -			The items with the lowest (most negative) 'order' values are first in the ordering.  
   1.109 -			If multiple items share a 'order' value, 
   1.110 +			<strong>Re-order the flex items and absolutely positioned flex container children according to their 'order'.</strong>
   1.111 +			The elements with the lowest (most negative) 'order' values are first in the ordering.  
   1.112 +			If multiple elements share an 'order' value, 
   1.113  			they're ordered by document order.  
   1.114 -			This affects the order in which the flex items generate boxes in the box-tree, 
   1.115 -			and how the rest of this algorithm deals with the items.
   1.116 +			This affects the order in which the elements generate boxes in the box-tree, 
   1.117 +			and how the rest of this algorithm deals with the generated flex items.
   1.118  	</ol>
   1.119  
   1.120  <h3 id='line-sizing'>
   1.121 @@ -3280,21 +3280,9 @@
   1.122  
   1.123  	<p>
   1.124  		The following significant changes were made since the
   1.125 -		<a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">12 June 2012 Last Call Working Draft</a>:
   1.126 +		<a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120921/">21 September 2012 Candidate Recommendation</a>:
   1.127  	<ul>
   1.128 -		<li>All children of a flex container now become flex items (not just those that are not ''inline'').
   1.129 -		<li>Defined <a href="#painting">painting behavior of flex items</a>.
   1.130 -		<li>Made 'z-index' automatically apply to flex items.
   1.131 -		<li>Changed how absolutely-positioned flex container children are handled so that they don't impact layout.
   1.132 -		<li>Defined which properties apply to the table wrapper box vs. the table box of a table element.
   1.133 -		<li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speech/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'nav-index'</a>.
   1.134 -		<li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>.
   1.135 -		<li>Defined <a href="#flex-baselines">baselines in flex layout</a>.
   1.136 -		<li>Various clarifications to the
   1.137 -			<a href="#flex-containers">flex containers</a> and
   1.138 -			<a href="#flex-items">flex items</a> chapters.
   1.139 -		<li>Clarified parsing of the 'flex' shorthand and unitless zeroes.
   1.140 -		<li>Added or rewrote many examples to make them more realistic and more interesting.
   1.141 +		<li>Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion).
   1.142  	</ul>
   1.143  
   1.144  	<p>A <a href="http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012">Disposition of Last Call Comments</a> is available.

mercurial