css-flexbox/Overview.bs

changeset 14171
bd6e4c8effaf
parent 14170
844999c90631
child 14172
89a42b2fe4aa
     1.1 --- a/css-flexbox/Overview.bs	Tue Jul 01 08:15:02 2014 -0700
     1.2 +++ b/css-flexbox/Overview.bs	Tue Jul 01 08:24:49 2014 -0700
     1.3 @@ -887,7 +887,7 @@
     1.4  			this keyword specifies as the minimum size the smallest of:
     1.5  
     1.6  			<ul>
     1.7 -				<li>the used 'flex-basis', if the computed 'flex-basis' was ''flex-basis/auto'',
     1.8 +				<li>the used 'flex-basis', if the computed 'flex-basis' was ''flex-basis/main-size'',
     1.9  				<li>the computed 'max-width' ('max-height'), if that value is <a>definite</a>,
    1.10  				<li>if the item has no intrinsic aspect ratio, its <a>min-content size</a>,
    1.11  				<li>if the item has an intrinsic aspect ratio,
    1.12 @@ -1422,7 +1422,7 @@
    1.13  
    1.14  	<pre class='propdef'>
    1.15  	Name: flex
    1.16 -	Value: none | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
    1.17 +	Value: none | auto | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
    1.18  	Initial: see individual properties
    1.19  	Applies to: <a>flex items</a>
    1.20  	Inherited: see individual properties
    1.21 @@ -1474,9 +1474,8 @@
    1.22  				before free space is distributed according to the flex factors.
    1.23  				When omitted from the 'flex' shorthand, its specified value is ''0%''.
    1.24  			<p>
    1.25 -				If the specified 'flex-basis' is <a value for=flex-basis>auto</a>,
    1.26 +				If the specified 'flex-basis' is <a value for=flex-basis>main-size</a>,
    1.27  				the used <i>flex basis</i> is the value of the flex item’s <i>main size property</i>.
    1.28 -				(This can itself be the keyword <a value for=width>auto</a>, which sizes the flex item based on its contents.)
    1.29  
    1.30  			<figure>
    1.31  				<img src='images/rel-vs-abs-flex.svg' width='504' height='240'>
    1.32 @@ -1489,13 +1488,20 @@
    1.33  				</figcaption>
    1.34  			</figure>
    1.35  
    1.36 +		<dt><dfn>auto</dfn>
    1.37 +		<dd>
    1.38 +			The keyword ''flex/auto'' expands to ''1 1 main-size''.
    1.39 +
    1.40 +			<!-- This is a legacy value, because the "main-size" keyword used to be "auto", but that was confusing. -->
    1.41 +
    1.42 +
    1.43  		<dt><dfn>none</dfn>
    1.44  		<dd>
    1.45 -			<p>The keyword ''none'' computes to ''0 0 auto''.
    1.46 +			<p>The keyword ''none'' computes to ''0 0 main-size''.
    1.47  	</dl>
    1.48  
    1.49  	<p>
    1.50 -		The initial values of the 'flex' components are equivalent to <a class="css-code" href="#flex-initial">flex: 0 1 auto</a>.
    1.51 +		The initial values of the 'flex' components are equivalent to <a class="css-code" href="#flex-initial">flex: 0 1 main-size</a>.
    1.52  	<p class="note">
    1.53  		Note that the initial values of 'flex-grow' and 'flex-basis'
    1.54  		are different from their defaults when omitted in the 'flex' shorthand.
    1.55 @@ -1517,10 +1523,10 @@
    1.56  		The list below summarizes the effects of the most common 'flex' values:
    1.57  
    1.58  	<dl>
    1.59 -		<dt id="flex-initial">''flex: 0 auto''
    1.60 +		<dt id="flex-initial">''flex: 0 main-size''
    1.61  		<dt>''flex: initial''
    1.62  		<dd>
    1.63 -			Equivalent to ''flex: 0 1 auto''. (This is the initial value.)
    1.64 +			Equivalent to ''flex: 0 1 main-size''. (This is the initial value.)
    1.65  			Sizes the item based on the 'width'/'height' properties.
    1.66  			(If the item's <i>main size property</i> computes to <a value for=width>auto</a>,
    1.67  			this will size the flex item based on its contents.)
    1.68 @@ -1531,7 +1537,7 @@
    1.69  
    1.70  		<dt>''flex: auto''
    1.71  		<dd>
    1.72 -			Equivalent to ''flex: 1 1 auto''.
    1.73 +			Equivalent to ''flex: 1 1 main-size''.
    1.74  			Sizes the item based on the 'width'/'height' properties,
    1.75  			but makes them fully flexible, so that they absorb any free space along the <i>main axis</i>.
    1.76  			If all items are either ''flex: auto'', ''flex: initial'', or ''flex: none'',
    1.77 @@ -1539,7 +1545,7 @@
    1.78  
    1.79  		<dt>''flex: none''
    1.80  		<dd>
    1.81 -			Equivalent to ''flex: 0 0 auto''.
    1.82 +			Equivalent to ''flex: 0 0 main-size''.
    1.83  			This value sizes the item according to the 'width'/'height' properties,
    1.84  			but makes the flex item fully inflexible.
    1.85  			This is similar to ''initial'',
    1.86 @@ -1616,8 +1622,8 @@
    1.87  
    1.88  	<pre class='propdef'>
    1.89  	Name: flex-basis
    1.90 -	Value: auto | <<'width'>>
    1.91 -	Initial: auto
    1.92 +	Value: main-size | <<'width'>>
    1.93 +	Initial: main-size
    1.94  	Applies to: <a>flex items</a>
    1.95  	Inherited: no
    1.96  	Computed value: as specified, with lengths made absolute
    1.97 @@ -1631,9 +1637,8 @@
    1.98  		It accepts the same values as the 'width' and 'height' property.
    1.99  
   1.100  	<p>
   1.101 -		The <dfn value for=flex-basis>auto</dfn> keyword, when specified on a <i>flex item</i>,
   1.102 +		The <dfn value for=flex-basis>main-size</dfn> keyword, when specified on a <i>flex item</i>,
   1.103  		retrieves the value of the <i>main size property</i>.
   1.104 -		Note, this may result in a used <i>flex basis</i> of ''auto''.
   1.105  
   1.106  	<p>
   1.107  		The <i>flex basis</i> is resolved the same way as 'width' in horizontal writing modes [[!CSS21]]:
   1.108 @@ -2253,7 +2258,7 @@
   1.109  					If the flex item has ...
   1.110  					<ul>
   1.111  						<li>an intrinsic aspect ratio,
   1.112 -						<li>a <i>flex basis</i> of ''flex-basis/auto'', and
   1.113 +						<li>a <i>flex basis</i> of ''flex-basis/main-size'', and
   1.114  						<li>a <i>definite</i> <i>cross size</i>
   1.115  					</ul>
   1.116  					then the <i>flex base size</i> is calculated from its inner <i>cross size</i>

mercurial