Clarifications to common values of flex.

Sun, 05 Aug 2012 21:30:16 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Sun, 05 Aug 2012 21:30:16 -0700
changeset 6357
4e1547aca385
parent 6356
b2a41fac8bd9
child 6358
02d11d287730

Clarifications to common values of flex.

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	Sun Aug 05 20:49:51 2012 -0700
     1.2 +++ b/css3-flexbox/Overview.html	Sun Aug 05 21:30:16 2012 -0700
     1.3 @@ -428,8 +428,8 @@
     1.4       <li><a href="#flex-property"><span class=secno>7.1. </span> The ‘<code
     1.5        class=property>flex</code>’ Shorthand</a>
     1.6  
     1.7 -     <li><a href="#flex-examples"><span class=secno>7.2. </span> Common
     1.8 -      Values of ‘<code class=property>flex</code>’</a>
     1.9 +     <li><a href="#flex-common"><span class=secno>7.2. </span> Common Values
    1.10 +      of ‘<code class=property>flex</code>’</a>
    1.11  
    1.12       <li><a href="#flex-components"><span class=secno>7.3. </span> Components
    1.13        of Flexibility</a>
    1.14 @@ -1256,7 +1256,8 @@
    1.15     <dt><dfn id=min-auto title="min-width/height:auto">auto</dfn>
    1.16  
    1.17     <dd> When used as the value of a flex item's min main size property, this
    1.18 -    keyword indicates a minimum main size of the min-content size.
    1.19 +    keyword indicates a minimum of the min-content size, to help ensure that
    1.20 +    the item is large enough to fit its contents.
    1.21      <p class=note> It is intended that this will compute to the ‘<code
    1.22       class=css>min-content</code>’ keyword when the specification defining
    1.23       it (<a
    1.24 @@ -1973,7 +1974,8 @@
    1.25     not a <a href="#flex-item"><i>flex item</i></a>, ‘<a href="#flex"><code
    1.26     class=property>flex</code></a>’ has no effect.
    1.27  
    1.28 -  <p> The <var>&lt;&apos;flex-basis&apos;></var> component sets the <dfn
    1.29 +  <p> The <var>&lt;<a href="#flex-basis-property">‘<code
    1.30 +   class=property>flex-basis</code>’</a>></var> component sets the <dfn
    1.31     id=flex-basis>flex basis</dfn>, which is the initial <a
    1.32     href="#main-size"><i>main size</i></a> of the <a href="#flex-item"><i>flex
    1.33     item</i></a>, before free space is distributed according to the flex
    1.34 @@ -1986,8 +1988,10 @@
    1.35     specified with a unit. Unitless zero will either be interpreted as one of
    1.36     the flex ratios, or will make the declaration invalid.
    1.37  
    1.38 -  <p> The <var>&lt;&apos;flex-grow&apos;></var> and
    1.39 -   <var>&lt;&apos;flex-shrink&apos;></var> components set the <dfn
    1.40 +  <p> The <var>&lt;<a href="#flex-grow">‘<code
    1.41 +   class=property>flex-grow</code>’</a>></var> and <var>&lt;<a
    1.42 +   href="#flex-basis-property">‘<code
    1.43 +   class=property>flex-shrink</code>’</a>></var> components set the <dfn
    1.44     id=flex-grow-ratio>flex grow ratio</dfn> and <dfn
    1.45     id=flex-shrink-ratio>flex shrink ratio</dfn>, which determine how much the
    1.46     <a href="#flex-item"><i>flex item</i></a> will grow or shrink relative to
    1.47 @@ -2005,7 +2009,7 @@
    1.48     basis of zero) and "relative" flex (starting from a basis of the item's
    1.49     content size). </figcaption> </figure>
    1.50  
    1.51 -  <h3 id=flex-examples><span class=secno>7.2. </span> Common Values of ‘<a
    1.52 +  <h3 id=flex-common><span class=secno>7.2. </span> Common Values of ‘<a
    1.53     href="#flex"><code class=property>flex</code></a>’</h3>
    1.54  
    1.55    <p><em>This section is informative.</em>
    1.56 @@ -2018,48 +2022,44 @@
    1.57  
    1.58     <dt>‘<code class=css>flex: 0 auto</code>’
    1.59  
    1.60 -   <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. The value
    1.61 -    sets the size of the item according to the ‘<code
    1.62 +   <dd> Equivalent to ‘<code class=css>flex: 0 1 auto</code>’. (This is
    1.63 +    the initial value.) Sizes the item based on the ‘<code
    1.64      class=property>width</code>’/‘<code class=property>height</code>’
    1.65 -    properties and makes the flex item inflexible when there is positive free
    1.66 -    space, but allows it to shrink to its <a
    1.67 -    href="#min-size-auto">minimum</a> when there is insufficient space. (If
    1.68 -    the ‘<code class=property>width</code>’/‘<code
    1.69 -    class=property>height</code>’ used as the <a href="#flex-basis"><i>flex
    1.70 -    basis</i></a> computes to ‘<code class=css>auto</code>’, this will
    1.71 -    size the flex item based on its contents.) The <a
    1.72 -    href="#alignment">alignment abilities</a> or <a
    1.73 +    properties. (If the item's <a href="#main-size-property"><i>main size
    1.74 +    property</i></a> computes to ‘<code class=css>auto</code>’, this will
    1.75 +    size the flex item based on its contents.) Makes the flex item inflexible
    1.76 +    when there is positive free space, but allows it to shrink to its <a
    1.77 +    href="#min-size-auto">minimum</a> when there is insufficient space. The
    1.78 +    <a href="#alignment">alignment abilities</a> or <a
    1.79      href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be
    1.80 -    used to align flex items within the flex container.
    1.81 +    used to align flex items along the <a href="#main-axis"><i>main
    1.82 +    axis</i></a>.
    1.83  
    1.84     <dt>‘<code class=css>flex: auto</code>’
    1.85  
    1.86 -   <dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. This value
    1.87 -    makes the flex item flexible, and sets the <a href="#flex-basis"><i>flex
    1.88 -    basis</i></a> according to the ‘<code
    1.89 +   <dd> Equivalent to ‘<code class=css>flex: 1 1 auto</code>’. Sizes the
    1.90 +    item based on the ‘<code class=property>width</code>’/‘<code
    1.91 +    class=property>height</code>’ properties, but makes them fully
    1.92 +    flexible, so that they absorb any free space along the <a
    1.93 +    href="#main-axis"><i>main axis</i></a>. If all items are either ‘<code
    1.94 +    class=css>flex: auto</code>’, ‘<code class=css>flex:
    1.95 +    initial</code>’, or ‘<code class=css>flex: none</code>’, any
    1.96 +    positive free space after the items have been sized will be distributed
    1.97 +    evenly to the items with ‘<code class=css>flex: auto</code>’.
    1.98 +
    1.99 +   <dt>‘<code class=css>flex: none</code>’
   1.100 +
   1.101 +   <dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value
   1.102 +    sizes the item according to the ‘<code
   1.103      class=property>width</code>’/‘<code class=property>height</code>’
   1.104 -    properties. If all items are either ‘<code class=css>flex:
   1.105 -    auto</code>’ or ‘<code class=css>flex: none</code>’, any free space
   1.106 -    after the items have been sized will be distributed evenly to the items
   1.107 -    with ‘<code class=css>flex: auto</code>’.
   1.108 -
   1.109 -   <dt>‘<code class=css>flex: none</code>’
   1.110 -
   1.111 -   <dd> Equivalent to ‘<code class=css>flex: 0 0 auto</code>’. This value
   1.112 -    makes the flex item inflexible, and sets the size of the item according
   1.113 -    to the ‘<code class=property>width</code>’/‘<code
   1.114 -    class=property>height</code>’ properties. To size things normally but
   1.115 -    still use the <a href="#alignment">alignment abilities</a> of flex
   1.116 -    layout, set all the flex items to ‘<code class=css>flex: none</code>’
   1.117 -    and then use ‘<code class=css>auto</code>’ margins or the alignment
   1.118 -    properties. This is similar to <a href="#flex-initial">‘<code
   1.119 -    class=css>initial</code>’</a>, except that flex items are not allowed
   1.120 -    to shrink, even in overflow situations.
   1.121 +    properties, but makes the flex item fully inflexible. This is similar to
   1.122 +    <a href="#flex-initial">‘<code class=css>initial</code>’</a>, except
   1.123 +    that flex items are not allowed to shrink, even in overflow situations.
   1.124  
   1.125     <dt>‘<code class=css>flex: &lt;positive-number></code>’
   1.126  
   1.127     <dd> Equivalent to ‘<code class=css>flex: &lt;positive-number> 1
   1.128 -    0%</code>’. This value makes the flex item flexible, and sets the <a
   1.129 +    0px</code>’. Makes the flex item flexible and sets the <a
   1.130      href="#flex-basis"><i>flex basis</i></a> to zero, resulting in an item
   1.131      that receives the specified proportion of the free space in the flex
   1.132      container. If all items in the flex container use this pattern, their
   1.133 @@ -2069,7 +2069,8 @@
   1.134    <p> By default, flex items won't shrink below their minimum content size
   1.135     (the length of the longest word or fixed-size element). To change this,
   1.136     set the ‘<code class=property>min-width</code>’ or ‘<code
   1.137 -   class=property>min-height</code>’ property.
   1.138 +   class=property>min-height</code>’ property. (See <a
   1.139 +   href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
   1.140  
   1.141    <h3 id=flex-components><span class=secno>7.3. </span> Components of
   1.142     Flexibility</h3>
     2.1 --- a/css3-flexbox/Overview.src.html	Sun Aug 05 20:49:51 2012 -0700
     2.2 +++ b/css3-flexbox/Overview.src.html	Sun Aug 05 21:30:16 2012 -0700
     2.3 @@ -898,7 +898,8 @@
     2.4  		<dt><dfn title="min-width/height:auto" id='min-auto'>auto</dfn>
     2.5  		<dd>
     2.6  			When used as the value of a flex item's min main size property,
     2.7 -			this keyword indicates a minimum main size of the min-content size.
     2.8 +			this keyword indicates a minimum of the min-content size,
     2.9 +			to help ensure that the item is large enough to fit its contents.
    2.10  
    2.11  			<p class='note'>
    2.12  				It is intended that this will compute to the ''min-content'' keyword
    2.13 @@ -1468,7 +1469,7 @@
    2.14  		'flex' has no effect.
    2.15  
    2.16  	<p>
    2.17 -		The <var>&lt;&apos;flex-basis&apos;></var> component sets the <dfn>flex basis</dfn>,
    2.18 +		The <var>&lt;<a href="#flex-basis-property">'flex-basis'</a>></var> component sets the <dfn>flex basis</dfn>,
    2.19  		which is the initial <i>main size</i> of the <i>flex item</i>,
    2.20  		before free space is distributed according to the flex ratios.
    2.21  		If omitted, the <i>flex basis</i> defaults to the length zero. 
    2.22 @@ -1478,7 +1479,7 @@
    2.23  		or will make the declaration invalid.
    2.24  
    2.25  	<p>
    2.26 -		The <var>&lt;&apos;flex-grow&apos;></var> and <var>&lt;&apos;flex-shrink&apos;></var> components
    2.27 +		The <var>&lt;<a href="#flex-grow">'flex-grow'</a>></var> and <var>&lt;<a href="#flex-basis-property">'flex-shrink'</a>></var> components
    2.28  		set the <dfn>flex grow ratio</dfn> and <dfn>flex shrink ratio</dfn>,
    2.29  		which determine how much the <i>flex item</i> will grow or shrink
    2.30  		relative to the rest of the <i>flex items</i> in the flex container
    2.31 @@ -1487,7 +1488,7 @@
    2.32  		<span class='note'>Note that this is different from the initial value of 'flex-grow', which is ''0''.</span>
    2.33  
    2.34  	<p id="flex-none">
    2.35 -		The keyword 'none' computes to ''0 0 auto''. 
    2.36 +		The keyword 'none' computes to ''0 0 auto''.
    2.37  	
    2.38  	<figure>
    2.39  		<img src='images/rel-vs-abs-flex.svg' width='504' height='240'>
    2.40 @@ -1500,7 +1501,7 @@
    2.41  	</figure>
    2.42  
    2.43  
    2.44 -<h3 id='flex-examples'>
    2.45 +<h3 id='flex-common'>
    2.46  Common Values of 'flex'</h3>
    2.47  
    2.48  	<p><em>This section is informative.</em>
    2.49 @@ -1512,40 +1513,37 @@
    2.50  		<dt id="flex-initial">''flex: initial''
    2.51  		<dt>''flex: 0 auto''
    2.52  		<dd>
    2.53 -			Equivalent to ''flex: 0 1 auto''.
    2.54 -			The value sets the size of the item according to the 'width'/'height' properties
    2.55 -			and  makes the flex item inflexible when there is positive free space,
    2.56 +			Equivalent to ''flex: 0 1 auto''. (This is the initial value.)
    2.57 +			Sizes the item based on the 'width'/'height' properties.
    2.58 +			(If the item's <i>main size property</i> computes to ''auto'',
    2.59 +			this will size the flex item based on its contents.)
    2.60 +			Makes the flex item inflexible when there is positive free space,
    2.61  			but allows it to shrink to its <a href="#min-size-auto">minimum</a> when there is insufficient space.
    2.62 -			(If the 'width'/'height' used as the <i>flex basis</i> computes to ''auto'',
    2.63 -			this will size the flex item based on its contents.)
    2.64  			The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins">''auto'' margins</a>
    2.65 -			can be used to align flex items within the flex container.
    2.66 +			can be used to align flex items along the <i>main axis</i>.
    2.67  
    2.68  		<dt>''flex: auto''
    2.69  		<dd>
    2.70  			Equivalent to ''flex: 1 1 auto''.
    2.71 -			This value makes the flex item flexible,
    2.72 -			and sets the <i>flex basis</i> according to the 'width'/'height' properties. 
    2.73 -			If all items are either ''flex: auto'' or ''flex: none'',
    2.74 -			any free space after the items have been sized will be distributed evenly to the items with ''flex: auto''.
    2.75 +			Sizes the item based on the 'width'/'height' properties,
    2.76 +			but makes them fully flexible, so that they absorb any free space along the <i>main axis</i>.
    2.77 +			If all items are either ''flex: auto'', ''flex: initial'', or ''flex: none'',
    2.78 +			any positive free space after the items have been sized will be distributed evenly to the items with ''flex: auto''.
    2.79  
    2.80  		<dt>''flex: none''
    2.81  		<dd>
    2.82  			Equivalent to ''flex: 0 0 auto''.
    2.83 -			This value makes the flex item inflexible,
    2.84 -			and sets the size of the item according to the 'width'/'height' properties.
    2.85 -			To size things normally but still use the <a href="#alignment">alignment abilities</a> of flex layout,
    2.86 -			set all the flex items to ''flex: none''
    2.87 -			and then use ''auto'' margins or the alignment properties.
    2.88 +			This value sizes the item according to the 'width'/'height' properties,
    2.89 +			but makes the flex item fully inflexible.
    2.90  			This is similar to <a href="#flex-initial">''initial''</a>,
    2.91  			except that flex items are not allowed to shrink,
    2.92  			even in overflow situations.
    2.93  
    2.94  		<dt>''flex: &lt;positive-number>''
    2.95  		<dd>
    2.96 -			Equivalent to ''flex: &lt;positive-number> 1 0%''.
    2.97 -			This value makes the flex item flexible,
    2.98 -			and sets the <i>flex basis</i> to zero, resulting in an item that receives the specified proportion of the free space in the flex container.
    2.99 +			Equivalent to ''flex: &lt;positive-number> 1 0px''.
   2.100 +			Makes the flex item flexible and sets the <i>flex basis</i> to zero,
   2.101 +			resulting in an item that receives the specified proportion of the free space in the flex container.
   2.102  			If all items in the flex container use this pattern,
   2.103  			their sizes will be proportional to the specified flex ratio.
   2.104  	</dl>
   2.105 @@ -1554,6 +1552,7 @@
   2.106  		By default, flex items won't shrink below their minimum content size
   2.107  		(the length of the longest word or fixed-size element).
   2.108  		To change this, set the 'min-width' or 'min-height' property.
   2.109 +		(See <a href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
   2.110  
   2.111  <h3 id='flex-components'>
   2.112  Components of Flexibility</h3>

mercurial