css-flexbox/Overview.bs

changeset 13452
dd7b53d4dd43
parent 13451
a69647cdbe7f
child 13453
f5fbab30aaff
     1.1 --- a/css-flexbox/Overview.bs	Fri Mar 07 13:15:19 2014 -0800
     1.2 +++ b/css-flexbox/Overview.bs	Fri Mar 07 13:53:17 2014 -0800
     1.3 @@ -442,10 +442,10 @@
     1.4  		<dt class='size'>main size
     1.5  		<dt class='size'>main size property
     1.6  		<dd>
     1.7 -			A <i>flex item</i>&apos;s width or height,
     1.8 +			A <i>flex item</i>’s width or height,
     1.9  			whichever is in the <i>main dimension</i>,
    1.10  			is the item's <dfn>main size</dfn>.
    1.11 -			The <i>flex item</i>&apos;s <dfn>main size property</dfn> is
    1.12 +			The <i>flex item</i>’s <dfn>main size property</dfn> is
    1.13  			either the 'width' or 'height' property,
    1.14  			whichever is in the <i>main dimension</i>.
    1.15  	</dl>
    1.16 @@ -537,9 +537,12 @@
    1.17  <h2 id='flex-items'>
    1.18  Flex Items</h2>
    1.19  
    1.20 +	Loosely speaking, the <a>flex items</a> of a <a>flex container</a>
    1.21 +	are the in-flow boxes generated from the contents
    1.22 +	of the element that generated the <a>flex container</a>.
    1.23 +
    1.24  	<p>
    1.25 -		The contents of a <i>flex container</i> consists of zero or more <i>flex items</i>:
    1.26 -		each in-flow child of a <i>flex container</i>
    1.27 +		Each in-flow child of a <i>flex container</i>
    1.28  		becomes a <i>flex item</i>,
    1.29  		and each contiguous run of text that is directly contained inside a <i>flex container</i>
    1.30  		is wrapped in an anonymous <i>flex item</i>.
    1.31 @@ -551,7 +554,7 @@
    1.32  	<p>
    1.33  		A <i>flex item</i> establishes a new formatting context for its contents.
    1.34  		The type of this formatting context is determined by its 'display' value, as usual.
    1.35 -		However, flex items are flex-level boxes, not block-level boxes:
    1.36 +		However, flex items themselves are flex-level boxes, not block-level boxes:
    1.37  		they participate in their container's flex formatting context,
    1.38  		not in a block formatting context.
    1.39  
    1.40 @@ -584,27 +587,15 @@
    1.41  		<a href="#item-margins">skip past the following box-generation details</a>.
    1.42  
    1.43  	<p>
    1.44 -		The computed 'display' of a <i>flex item</i>
    1.45 -		is determined by applying the table in
    1.46 -		<a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>
    1.47 -		(except that internal table boxes are instead handled by anonymous box fixup, see below).
    1.48 -
    1.49 -	<p class='note'>
    1.50 -		The 'display' computation on flex items as defined here
    1.51 -		is expected to be superseded by a future specification
    1.52 -		that defines a new 'display' value specific to flex items.
    1.53 -
    1.54 -	<p>
    1.55 -		Some values of 'display' trigger the generation of anonymous boxes.
    1.56 -		For example, a misparented ''table-cell'' child is fixed up
    1.57 -		by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous ''table'' and ''table-row'' boxes</a> around it. [[!CSS21]]
    1.58 -		This fixup must occur <em>before</em> a flex container's children are promoted to <i>flex items</i>.
    1.59 -		For example, given two contiguous child elements with ''display:table-cell'',
    1.60 -		an anonymous table wrapper box around them becomes the <i>flex item</i>.
    1.61 -
    1.62 -	<p class='note'>
    1.63 -		Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins).
    1.64 -		It is intended that flex item determination run after these operations.
    1.65 +		If the specified 'display-outside' of an in-flow child of an element that generates a <a>flex container</a>
    1.66 +		is ''inline-level'',
    1.67 +		it computes to ''block-level''.
    1.68 +
    1.69 +	Note: Some values of 'display-outside' trigger the creation of anonymous boxes around the original box.
    1.70 +	It's the outermost box, the direct child of the <a>flex container</a> box,
    1.71 +	that becomes a <a>flex item</a>.
    1.72 +	For example, given two contiguous child elements with ''display:table-cell'',
    1.73 +	an anonymous table wrapper box around them becomes the <i>flex item</i>.
    1.74  
    1.75  	<p id="table-items">
    1.76  		On a flex item with ''display: table'', the table wrapper box becomes the <i>flex item</i>,
    1.77 @@ -612,7 +603,7 @@
    1.78  		The contents of any caption boxes contribute to the calculation of
    1.79  		the table wrapper box's min-content and max-content sizes.
    1.80  		However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows:
    1.81 -		the <i>flex item</i>&apos;s final size is calculated
    1.82 +		the <i>flex item</i>’s final size is calculated
    1.83  		by performing layout as if the distance between
    1.84  		the table wrapper box's edges and the table box's content edges
    1.85  		were all part of the table box's border+padding area,
    1.86 @@ -796,7 +787,7 @@
    1.87  Implied Minimum Size of Flex Items</h3>
    1.88  
    1.89  <div class='issue'>
    1.90 -	This section is under discussion. See <a href="issues-cr-2012#issue-19">Issue 19</a>.
    1.91 +	This section is under discussion. See <a href="issues-cr-2012#issue-19">Issue </a>.
    1.92  
    1.93  	To provide a more reasonable default minimum size for <a>flex items</a>,
    1.94  	this specification introduces a new ''min-width/auto'' value
    1.95 @@ -1762,14 +1753,14 @@
    1.96  
    1.97  		<dt><dfn>center</dfn>
    1.98  		<dd>
    1.99 -			The <i>flex item</i>&apos;s margin box is centered in the <i>cross axis</i> within the line.
   1.100 +			The <i>flex item</i>’s margin box is centered in the <i>cross axis</i> within the line.
   1.101  			(If the <i>cross size</i> of the flex line is less than that of the <i>flex item</i>,
   1.102  			it will overflow equally in both directions.)
   1.103  
   1.104  		<dt><dfn>baseline</dfn>
   1.105  		<dd>
   1.106  			<p>
   1.107 -				If the <i>flex item</i>&apos;s inline axis is the same as the <i>cross axis</i>,
   1.108 +				If the <i>flex item</i>’s inline axis is the same as the <i>cross axis</i>,
   1.109  				this value is identical to <a value for=align-self>flex-start</a>.
   1.110  
   1.111  			<p>

mercurial