Switch display:flexbox to display:flex.

--HG--
extra : rebase_source : 93e14ff2edd2ff1bc5eeccc76d5bd55b85fe3b4e

Author: tabatkins

css3-flexbox/Overview.html

@@ -194,8 +194,8 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
     Model</a>
 
    <li><a href="#display-flexbox"><span class=secno>3. </span> Flexboxes: the
-    &lsquo;<code class=css>flexbox</code>&rsquo; and &lsquo;<code
-    class=css>inline-flexbox</code>&rsquo; &lsquo;<code
+    &lsquo;<code class=css>flex</code>&rsquo; and &lsquo;<code
+    class=css>inline-flex</code>&rsquo; &lsquo;<code
     class=property>display</code>&rsquo; values</a>
 
    <li><a href="#flex-items"><span class=secno>4. </span> Flexbox Items</a>
@@ -340,7 +340,7 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   &lt;li>&lt;button>&lt;img src='trash.svg' alt="trash">&lt;/button>&lt;/li>
 &lt;/ul>
 &lt;style>
-ul { display: flexbox; flex-pack: distribute; }
+ul { display: flex; flex-pack: distribute; }
 /* Irrelevant styling for this example removed. */
 &lt;/style></pre>
 
@@ -376,8 +376,8 @@ <h3 id=values><span class=secno>1.2. </span> Values</h3>
 
   <h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
 
-  <p>An element with &lsquo;<code class=css>display:flexbox</code>&rsquo; or
-   &lsquo;<code class=css>display:inline-flexbox</code>&rsquo; is a <dfn
+  <p>An element with &lsquo;<code class=css>display:flex</code>&rsquo; or
+   &lsquo;<code class=css>display:inline-flex</code>&rsquo; is a <dfn
    id=flexbox>flexbox</dfn>. Children of a flexbox are called <a
    href="#flexbox-item"><i>flexbox items</i></a> and are laid out using the
    flexbox box model.
@@ -448,10 +448,9 @@ <h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
    class=property>flex-line-pack</code></a>&rsquo; property.
 
   <h2 id=display-flexbox><span class=secno>3. </span> Flexboxes: the
-   &lsquo;<a href="#display-flexbox"><code
-   class=css>flexbox</code></a>&rsquo; and &lsquo;<a
-   href="#display-inline-flexbox"><code
-   class=css>inline-flexbox</code></a>&rsquo; &lsquo;<code
+   &lsquo;<a href="#flex"><code class=css>flex</code></a>&rsquo; and
+   &lsquo;<a href="#display-inline-flex"><code
+   class=css>inline-flex</code></a>&rsquo; &lsquo;<code
    class=property>display</code>&rsquo; values</h2>
 
   <table class=propdef>
@@ -464,27 +463,26 @@ <h2 id=display-flexbox><span class=secno>3. </span> Flexboxes: the
     <tr>
      <th><a href="http://dev.w3.org/csswg/css-module/#values">New value</a>:
 
-     <td><dfn id=display-flexbox>flexbox</dfn> | <dfn
-      id=display-inline-flexbox>inline-flexbox</dfn>
+     <td><dfn id=display-flex>flex</dfn> | <dfn
+      id=display-inline-flex>inline-flex</dfn>
   </table>
 
   <p> An element whose computed &lsquo;<code
    class=property>display</code>&rsquo; is either &lsquo;<a
-   href="#display-flexbox"><code class=css>flexbox</code></a>&rsquo; or
-   &lsquo;<a href="#display-inline-flexbox"><code
-   class=css>inline-flexbox</code></a>&rsquo; is a flexbox, and establishes a
-   new <dfn id=flexbox-formatting-context>flexbox formatting context</dfn>
-   for its contents. This is similar to a block formatting context root:
-   floats do not intrude into the flexbox, and the flexbox's margins do not
-   collapse with the margins of its contents. Additionally, each of the <a
+   href="#flex"><code class=css>flex</code></a>&rsquo; or &lsquo;<a
+   href="#display-inline-flex"><code class=css>inline-flex</code></a>&rsquo;
+   is a flexbox, and establishes a new <dfn
+   id=flexbox-formatting-context>flexbox formatting context</dfn> for its
+   contents. This is similar to a block formatting context root: floats do
+   not intrude into the flexbox, and the flexbox's margins do not collapse
+   with the margins of its contents. Additionally, each of the <a
    href="#flexbox-item"><i>flexbox items</i></a> establishes a new formatting
    context for its contents.
 
-  <p> The &lsquo;<a href="#display-flexbox"><code
-   class=css>flexbox</code></a>&rsquo; value makes the flexbox a block-level
-   element. The &lsquo;<a href="#display-inline-flexbox"><code
-   class=css>inline-flexbox</code></a>&rsquo; value makes the flexbox an
-   atomic inline-level element.
+  <p> The &lsquo;<a href="#flex"><code class=css>flex</code></a>&rsquo; value
+   makes the flexbox a block-level element. The &lsquo;<a
+   href="#display-inline-flex"><code class=css>inline-flex</code></a>&rsquo;
+   value makes the flexbox an atomic inline-level element.
 
   <p> Flexboxes are not block containers, and so some properties that were
    designed with the assumption of block layout don't apply in a flexbox
@@ -495,12 +493,13 @@ <h2 id=display-flexbox><span class=secno>3. </span> Flexboxes: the
     in the Multicol module have no effect on a flexbox.
 
    <li> &lsquo;<code class=property>float</code>&rsquo; and &lsquo;<code
-    class=property>clear</code>&rsquo; have no effect on a flexbox item.
-    Using &lsquo;<code class=property>float</code>&rsquo; on an element still
-    causes that element's &lsquo;<code class=property>display</code>&rsquo;
-    property to compute to &lsquo;<code class=css>block</code>&rsquo;, and
-    thus &lsquo;<code class=property>float</code>&rsquo; may affect whether
-    an element becomes a flexbox item or is wrapped in one. (See <a
+    class=property>clear</code>&rsquo; have no effect on a <a
+    href="#flexbox-item"><i>flexbox item</i></a>. Using &lsquo;<code
+    class=property>float</code>&rsquo; on an element still causes that
+    element's &lsquo;<code class=property>display</code>&rsquo; property to
+    compute to &lsquo;<code class=css>block</code>&rsquo;, and thus
+    &lsquo;<code class=property>float</code>&rsquo; may affect whether an
+    element becomes a flexbox item or is wrapped in one. (See <a
     href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter
     9.7</a>.)
 
@@ -510,17 +509,15 @@ <h2 id=display-flexbox><span class=secno>3. </span> Flexboxes: the
 
   <p> If an element's specified value for &lsquo;<code
    class=property>display</code>&rsquo; is &lsquo;<a
-   href="#display-inline-flexbox"><code
-   class=css>inline-flexbox</code></a>&rsquo; and the element is floated or
-   absolutely positioned, the computed value of &lsquo;<code
-   class=property>display</code>&rsquo; is &lsquo;<a
-   href="#display-flexbox"><code class=css>flexbox</code></a>&rsquo;. The
-   table in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS
-   2.1 Chapter 9.7</a> is thus amended to contain an additional row, with
-   &lsquo;<a href="#display-inline-flexbox"><code
-   class=css>inline-flexbox</code></a>&rsquo; in the "Specified Value" column
-   and &lsquo;<a href="#display-flexbox"><code
-   class=css>flexbox</code></a>&rsquo; in the "Computed Value" column.
+   href="#display-inline-flex"><code class=css>inline-flex</code></a>&rsquo;
+   and the element is floated or absolutely positioned, the computed value of
+   &lsquo;<code class=property>display</code>&rsquo; is &lsquo;<a
+   href="#flex"><code class=css>flex</code></a>&rsquo;. The table in <a
+   href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter
+   9.7</a> is thus amended to contain an additional row, with &lsquo;<a
+   href="#display-inline-flex"><code class=css>inline-flex</code></a>&rsquo;
+   in the "Specified Value" column and &lsquo;<a href="#flex"><code
+   class=css>flex</code></a>&rsquo; in the "Computed Value" column.
 
   <p> The baseline of a flexbox is:
 
@@ -581,7 +578,7 @@ <h2 id=flex-items><span class=secno>4. </span> Flexbox Items</h2>
    <p>Examples of flexbox items:
 
    <pre>
-&lt;div style="display:flexbox">
+&lt;div style="display:flex">
 
     &lt;!-- flexbox item: block-level child -->
     &lt;div id="item1">block&lt;/div>
@@ -713,7 +710,7 @@ <h2 id=multi-line><span class=secno>5. </span> Multi-line Flexbox</h2>
 
    <pre>&lt;style>
 #div1 {
-	display: flexbox;
+	display: flex;
 	flex-flow: row wrap;
 	width: 300px;
 }
@@ -758,7 +755,7 @@ <h2 id=multi-line><span class=secno>5. </span> Multi-line Flexbox</h2>
 
    <pre>
 #div1 {
-	display: flexbox;
+	display: flex;
 	flex-flow: row wrap;
 	flex-pack: center;
 	width: 300px;
@@ -1183,7 +1180,7 @@ <h3 id=flex-order><span class=secno>6.4. </span> Display Order: the
 
    <pre>
 .tabs {
-	display: flexbox;
+	display: flex;
 }
 .tabs > .current {
 	flex-order: -1; /* Lower than the default of 0 */
@@ -1224,7 +1221,7 @@ <h3 id=flex-order><span class=secno>6.4. </span> Display Order: the
    <p>This layout can be easily achieved with Flexbox:
 
    <pre>
-#main { display: flexbox; }
+#main { display: flex; }
 #main > article { flex:1;         flex-order: 2; }
 #main > nav     { width: 200px;   flex-order: 1; }
 #main > aside   { width: 200px;   flex-order: 3; }</pre>
@@ -1339,8 +1336,8 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
    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="#flex-basis"><i>flex basis</i></a> is the computed value of the <a
+   href="#flexbox"><i>flexbox</i></a>, the <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
@@ -1369,7 +1366,7 @@ <h2 id=flexibility><span class=secno>7. </span> Flexibility: the &lsquo;<a
    <pre>
 &lt;!DOCTYPE html>
 &lt;style>
-	div { display:flexbox; outline:1px solid silver; }
+	div { display:flex; outline:1px solid silver; }
 	p { flex:1 auto; margin:1em; background:gold; }
 &lt;/style&gt;
 &lt;div&gt;
@@ -1433,8 +1430,11 @@ <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with
     simple markup like this
 
    <pre>
-div { 	display:flexbox;
-	width:4em; height:4em; background:silver;
+div { 
+	display: flex;
+	width: 4em; 
+	height: 4em; 
+	background:silver;
 }
 p { margin:auto; }
 &lt;div&gt;&lt;p&gt;OK&lt;/p&gt;&lt;/div&gt;</pre>
@@ -1445,10 +1445,13 @@ <h3 id=auto-margins><span class=secno>8.1. </span> Aligning with
    <p>And this
 
    <pre>
-div {	display:flexbox;
-	width:calc(100% - 4em); height:calc(100% - 4em);
-	border: 1em solid blue; border-radius:50%;
-	margin:auto;
+div {
+	display: flex;
+	width: calc(100% - 4em); 
+	height:calc(100% - 4em);
+	border: 1em solid blue; 
+	border-radius:50%;
+	margin: auto;
 }
 div#demo { width:9em; height:9em; }
 
@@ -1806,7 +1809,7 @@ <h3 id=flex-align><span class=secno>8.3. </span> Cross-axis Alignment: the
 &lt;/div>
 &lt;style>
   div {
-    display: flexbox;
+    display: flex;
     flex-flow: column;
     flex-align: center;
     width: 200px;
@@ -2740,7 +2743,7 @@ <h2 class=no-num id=property>Property index</h2>
     <tr>
      <th><span class=property>display</span>
 
-     <td>flexbox | inline-flexbox
+     <td>flex | inline-flex
 
     <tr>
      <th><a class=property href="#flex">flex</a>
@@ -2941,17 +2944,16 @@ <h2 class=no-num id=index>Index</h2>
     title="''end''"><strong>8.4.</strong></a>, <a href="#flex-pack-end"
     title="''end''"><strong>8.2.</strong></a>
 
-   <li>flex, <a href="#flex" title=flex><strong>7.</strong></a>
+   <li>flex, <a href="#display-flex" title=flex><strong>3.</strong></a>, <a
+    href="#flex" title=flex><strong>7.</strong></a>
 
    <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>
+   <li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
 
    <li>flexbox formatting context, <a href="#flexbox-formatting-context"
     title="flexbox formatting context"><strong>3.</strong></a>
@@ -3002,8 +3004,8 @@ <h2 class=no-num id=index>Index</h2>
    <li>indefinite, <a href="#definite"
     title=indefinite><strong>9.</strong></a>
 
-   <li>inline-flexbox, <a href="#display-inline-flexbox"
-    title=inline-flexbox><strong>3.</strong></a>
+   <li>inline-flex, <a href="#display-inline-flex"
+    title=inline-flex><strong>3.</strong></a>
 
    <li>&lsquo;<code class=css>justify</code>&rsquo;, <a
     href="#flex-line-pack-justify"