s/preferred size/flex basis/

--HG--
extra : rebase_source : 445e01368ab8c6eaf2727a94fe9142aa4074aeae

Author: tabatkins

css3-flexbox/Overview.html

@@ -1251,9 +1251,9 @@ <h3 id=flex-order><span class=secno>6.4. </span> Display Order: the
   <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
    href="#flex"><code class=property>flex</code></a>&rsquo; property</h2>
 
-  <p>The defining aspect of flexbox layout is the ability to make the <a
+  <p> The defining aspect of flexbox layout is the ability to make the <a
    href="#flexbox-item"><i>flexbox items</i></a> "flex", altering their width
-   or height to fill the available space. This is done by using a &lsquo;<a
+   or height to fill the available space. This is done with the &lsquo;<a
    href="#flex"><code class=property>flex</code></a>&rsquo; property. A
    flexbox distributes free space to its items proportional to their positive
    flexibility, or shrinks them to prevent overflow proportional to their
@@ -1289,8 +1289,8 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
     <tr>
      <th>Computed Value:
 
-     <td>Two integers for positive and negative flex, and a preferred size
-      given either as an absolute length or a keyword.
+     <td>Two numbers for positive and negative flex, and a flex basis given
+      either as an absolute length or a keyword.
 
     <tr>
      <th>Media:
@@ -1315,8 +1315,8 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
    length</dfn>: the <dfn id=positive-flexibility
    title="positive flexibility">positive</dfn> and <dfn
    id=negative-flexibility>negative flexibility</dfn>, and the <dfn
-   id=preferred-size>preferred size</dfn>. When the element containing
-   &lsquo;<a href="#flex"><code class=property>flex</code></a>&rsquo; is a <a
+   id=flex-basis>flex basis</dfn>. When the element containing &lsquo;<a
+   href="#flex"><code class=property>flex</code></a>&rsquo; is a <a
    href="#flexbox-item"><i>flexbox item</i></a>, &lsquo;<a href="#flex"><code
    class=property>flex</code></a>&rsquo; is consulted <em>instead of</em> the
    <a href="#main-size-property"><i>main size property</i></a> to determine
@@ -1335,13 +1335,13 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
    href="#positive-flexibility"><i>positive flexibility</i></a> defaults to
    &lsquo;<code class=css>1</code>&rsquo;.
 
-  <p> The <var>&lt;&apos;width&apos;></var> component sets the preferred
-   size. If omitted, the preferred size defaults to &lsquo;<code
+  <p> The <var>&lt;&apos;width&apos;></var> component sets the flex basis. If
+   omitted, the flex basis defaults to &lsquo;<code
    class=css>0px</code>&rsquo;. If the <var>&lt;&apos;width&apos;></var>
    component is &lsquo;<code class=css>auto</code>&rsquo; on a child of a <a
    href="#display-flexbox"><i>flexbox</i></a>, the <a
-   href="#preferred-size"><i>preferred size</i></a> is the computed value of
-   the <a href="#main-size-property"><i>main size property</i></a>.
+   href="#flex-basis"><i>flex basis</i></a> is the computed value of the <a
+   href="#main-size-property"><i>main size property</i></a>.
 
   <p> If the <var>&lt;&apos;width&apos;></var> is zero, it
    <strong>must</strong> be specified with a unit (like &lsquo;<code
@@ -1356,7 +1356,7 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
    property is animatable by animating the <a
    href="#positive-flexibility"><i>positive flexibility</i></a>, <a
    href="#negative-flexibility"><i>negative flexibility</i></a>, and <a
-   href="#preferred-size"><i>preferred size</i></a> independently.
+   href="#flex-basis"><i>flex basis</i></a> independently.
 
   <p class=issue> Can you animate between zero and non-zero flex? It has bad
    effects right now, and should possibly be disallowed until we know how to
@@ -1380,13 +1380,12 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
 &lt;/div&gt;
 </pre>
 
-   <p> Here, all four paragraphs have a <a
-    href="#preferred-size"><i>preferred size</i></a> equal to the length of
-    their text. The leftover space (after subtracting their preferred sizes
-    and margins from the width of the flexbox) is distributed evenly to the
-    four paragraphs. This shows how elements with the same flexibility may
-    still end up different sizes, if their preferred sizes are different.
-    <img alt="" src="images/wp7zxxyu.gif">
+   <p> Here, all four paragraphs have a <a href="#flex-basis"><i>flex
+    basis</i></a> equal to the length of their text. The leftover space
+    (after subtracting their flex basises and margins from the width of the
+    flexbox) is distributed evenly to the four paragraphs. This shows how
+    elements with the same flexibility may still end up different sizes, if
+    their flex basises are different. <img alt="" src="images/wp7zxxyu.gif">
   </div>
 
   <h2 id=alignment><span class=secno>8. </span> Alignment</h2>
@@ -1412,7 +1411,7 @@ <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with
    in normal flow:
 
   <ul>
-   <li> During calculations of preferred sizes and flexible lengths, auto
+   <li> During calculations of flex basises and flexible lengths, auto
     margins are treated as &lsquo;<code class=css>0</code>&rsquo;.
 
    <li> Prior to alignment via &lsquo;<a href="#flex-pack0"><code
@@ -2050,19 +2049,19 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
 
    <li> <strong>Determine the hypothetical main size of each item:</strong>
     <ul>
-     <li> If the item has a <a href="#definite"><i>definite</i></a> preferred
-      size, that's the hypothetical size.
+     <li> If the item has a <a href="#definite"><i>definite</i></a> flex
+      basis, that's the hypothetical size.
 
      <li> Otherwise, if the flexbox's main-axis is parallel to the item's
-      inline-axis, lay out the item using its preferred size and the
-      available space, treating &lsquo;<code class=css>auto</code>&rsquo; as
+      inline-axis, lay out the item using its flex basis and the available
+      space, treating &lsquo;<code class=css>auto</code>&rsquo; as
       &lsquo;<code class=css>fit-content</code>&rsquo; unless the item's
       writing mode is perpendicular to the flexbox's writing mode (in which
       case <a
       href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the
       rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES"
       rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
-      are in effect). If the preferred size is &lsquo;<code
+      are in effect). If the flex basis is &lsquo;<code
       class=css>fill-available</code>&rsquo;, or &lsquo;<code
       class=css>fit-content</code>&rsquo;, and the flexbox is being sized
       under a min-content or max-content main-size constraint, size the item
@@ -2076,7 +2075,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
       href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the
       rules for a box in an orthogonal flow</a> <a href="#CSS3-WRITING-MODES"
       rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
-      are in effect). If the preferred size is &lsquo;<code
+      are in effect). If the flex basis is &lsquo;<code
       class=css>auto</code>&rsquo;, &lsquo;<code
       class=css>fill-available</code>&rsquo;, or &lsquo;<code
       class=css>fit-content</code>&rsquo;, and the flexbox is being sized
@@ -2085,9 +2084,9 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
       resulting max-content extent.
     </ul>
 
-    <p> <em>Do not apply min/max-width/height constraints to the preferred
-     size of flexible lengths &mdash; those constraints are handled elsewhere
-     in this algorithm, and doing so will produce incorrect results.</em>
+    <p> <em>Do not apply min/max-width/height constraints to the flex basis
+     of flexible lengths &mdash; those constraints are handled elsewhere in
+     this algorithm, and doing so will produce incorrect results.</em>
 
    <li> <strong>Determine the main size of the flexbox</strong> using its <a
     href="#main-size-property"><i>main size property</i></a>. In this
@@ -2097,7 +2096,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
     flexbox's items' <i>max-content size contributions</i>. For these
     computations, &lsquo;<code class=css>auto</code>&rsquo; margins are
     treated as &lsquo;<code class=css>0</code>&rsquo;, and for flexbox items
-    the preferred size is used in place of the <a
+    the flex basis is used in place of the <a
     href="#main-size-property"><i>main size property</i></a>.
 
    <li> <strong>Collect flexbox items into flexbox lines:</strong>
@@ -2319,8 +2318,8 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
      <li>
       <p>If flexbox main-axis size is definite, flexbox algorithm must be run
        first, without constraints of available space on page and using all
-       content of the flexbox. Otherwise flexbox items use the preferred
-       size, adjusted for min/max.
+       content of the flexbox. Otherwise flexbox items use the flex basis,
+       adjusted for min/max.
 
       <p>If page size varies and flexbox size depends on page size, this step
        has to be repeated on each page, again with the whole content of the
@@ -2754,8 +2753,8 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>Two integers for positive and negative flex, and a preferred size
-      given either as an absolute length or a keyword.
+     <td>Two numbers for positive and negative flex, and a flex basis given
+      either as an absolute length or a keyword.
 
      <td>visual
 
@@ -2947,6 +2946,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>flex-align, <a href="#flex-align0"
     title=flex-align><strong>8.3.</strong></a>
 
+   <li>flex basis, <a href="#flex-basis"
+    title="flex basis"><strong>7.</strong></a>
+
    <li>flexbox, <a href="#display-flexbox"
     title=flexbox><strong>3.</strong></a>, <a href="#flexbox"
     title=flexbox><strong>2.</strong></a>
@@ -3034,9 +3036,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>positive flexibility, <a href="#positive-flexibility"
     title="positive flexibility"><strong>7.</strong></a>
 
-   <li>preferred size, <a href="#preferred-size"
-    title="preferred size"><strong>7.</strong></a>
-
    <li>renderer, <a href="#renderer"
     title=renderer><strong>12.2.</strong></a>
 

css3-flexbox/Overview.src.html

@@ -787,7 +787,12 @@ <h3 id='flex-order'>
 <h2 id='flexibility'>
 Flexibility: the 'flex' property</h2>
 
-	<p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", altering their width or height to fill the available space. This is done by using a 'flex' property. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.
+	<p>
+		The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", 
+		altering their width or height to fill the available space. 
+		This is done with the 'flex' property. 
+		A flexbox distributes free space to its items proportional to their positive flexibility, 
+		or shrinks them to prevent overflow proportional to their negative flexibility.
 
 	<table class=propdef>
 		<tr>
@@ -807,7 +812,7 @@ <h2 id='flexibility'>
 			<td>no
 		<tr>
 			<th>Computed Value:
-			<td>Two integers for positive and negative flex, and a preferred size given either as an absolute length or a keyword.
+			<td>Two numbers for positive and negative flex, and a flex basis given either as an absolute length or a keyword.
 		<tr>
 			<th>Media:
 			<td>visual
@@ -823,7 +828,7 @@ <h2 id='flexibility'>
 		The 'flex' property specifies the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: 
 		the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> 
 		and <dfn>negative flexibility</dfn>, 
-		and the <dfn>preferred size</dfn>.  
+		and the <dfn>flex basis</dfn>.  
 		When the element containing 'flex' is a <i>flexbox item</i>, 
 		'flex' is consulted <em>instead of</em> the <i>main size property</i> 
 		to determine the <i>main size</i> of the element.  
@@ -839,10 +844,10 @@ <h2 id='flexibility'>
 		the <i>positive flexibility</i> defaults to ''1''.
 
 	<p>
-		The <var>&lt;&apos;width&apos;></var> component sets the preferred size. 
-		If omitted, the preferred size defaults to ''0px''. 
+		The <var>&lt;&apos;width&apos;></var> component sets the flex basis. 
+		If omitted, the flex basis defaults to ''0px''. 
 		If the <var>&lt;&apos;width&apos;></var> component is ''auto'' on a child of a <i>flexbox</i>, 
-		the <i>preferred size</i> is the computed value of the <i>main size property</i>.
+		the <i>flex basis</i> is the computed value of the <i>main size property</i>.
 
 	<p>
 		If the <var>&lt;&apos;width&apos;></var> is zero, 
@@ -858,7 +863,7 @@ <h2 id='flexibility'>
 
 	<p>
 		The 'flex' property is animatable 
-		by animating the <i>positive flexibility</i>, <i>negative flexibility</i>, and <i>preferred size</i> independently.
+		by animating the <i>positive flexibility</i>, <i>negative flexibility</i>, and <i>flex basis</i> independently.
 
 	<p class='issue'>
 		Can you animate between zero and non-zero flex?
@@ -885,12 +890,12 @@ <h2 id='flexibility'>
 </pre>
 
 		<p>
-			Here, all four paragraphs have a <i>preferred size</i> equal to the length of their text.  
+			Here, all four paragraphs have a <i>flex basis</i> equal to the length of their text.  
 			The leftover space 
-			(after subtracting their preferred sizes and margins from the width of the flexbox) 
+			(after subtracting their flex basises and margins from the width of the flexbox) 
 			is distributed evenly to the four paragraphs.  
 			This shows how elements with the same flexibility may still end up different sizes, 
-			if their preferred sizes are different.
+			if their flex basises are different.
 
 		<img src="images/wp7zxxyu.gif" alt="">
 
@@ -920,7 +925,7 @@ <h3 id='auto-margins'>
 
 	<ul>
 		<li>
-			During calculations of preferred sizes and flexible lengths, auto margins are treated as ''0''.
+			During calculations of flex basises and flexible lengths, auto margins are treated as ''0''.
 
 		<li>
 			Prior to alignment via 'flex-pack' and 'flex-item-align',
@@ -1369,18 +1374,18 @@ <h2 id='layout-algorithm'>
 
 			<ul>
 				<li>
-					If the item has a <i>definite</i> preferred size,
+					If the item has a <i>definite</i> flex basis,
 					that's the hypothetical size.
 
 				<li>
 					Otherwise,
 					if the flexbox's main-axis is parallel to the item's inline-axis,
-					lay out the item using its preferred size
+					lay out the item using its flex basis
 					and the available space,
 					treating ''auto'' as ''fit-content''
 					unless the item's writing mode is perpendicular to the flexbox's writing mode
 					(in which case <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a> [[!CSS3-WRITING-MODES]] are in effect).
-					If the preferred size is ''fill-available'', or ''fit-content'',
+					If the flex basis is ''fill-available'', or ''fit-content'',
 					and the flexbox is being sized under a min-content or max-content main-size constraint,
 					size the item under that constraint instead.
 					The hypothetical size is the item's resulting measure.
@@ -1392,14 +1397,14 @@ <h2 id='layout-algorithm'>
 					treating ''auto'' as ''fit-content'' 
 					unless the item's writing mode is perpendicular to the flexbox's writing mode
 					(in which case <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-flows">the rules for a box in an orthogonal flow</a> [[!CSS3-WRITING-MODES]] are in effect).
-					If the preferred size is ''auto'', ''fill-available'', or ''fit-content'',
+					If the flex basis is ''auto'', ''fill-available'', or ''fit-content'',
 					and the flexbox is being sized under a min-content or max-content cross-size constraint,
 					size the item under that constraint instead.
 					The hypothetical size is the item's resulting max-content extent.
 			</ul>
 
 			<p>
-				<em>Do not apply min/max-width/height constraints to the preferred size of flexible lengths &mdash; 
+				<em>Do not apply min/max-width/height constraints to the flex basis of flexible lengths &mdash; 
 				those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results.</em>
 
 		<li>
@@ -1409,7 +1414,7 @@ <h2 id='layout-algorithm'>
 			and the <i>max content main size</i> of the flexbox
 			is the sum of the flexbox's items' <i>max-content size contributions</i>.
 			For these computations, ''auto'' margins are treated as ''0'',
-			and for flexbox items the preferred size is used in place of the <i>main size property</i>.
+			and for flexbox items the flex basis is used in place of the <i>main size property</i>.
 
 		<li>
 			<strong>Collect flexbox items into flexbox lines:</strong>
@@ -1645,7 +1650,7 @@ <h2 id="pagination">
 			<ol>
 				<li>
 					<p>If flexbox main-axis size is definite, flexbox algorithm must be run first, without constraints of available space on page and using all content of the flexbox. Otherwise 
-					flexbox items use the preferred size, adjusted for min/max.
+					flexbox items use the flex basis, adjusted for min/max.
 
 					<p>If page size varies and flexbox size depends on page size, this step has to be repeated on each page, again with the whole content of the flexbox.