1.1 --- a/css3-flexbox/Overview.src.html Mon Apr 30 14:53:29 2012 -0700
1.2 +++ b/css3-flexbox/Overview.src.html Mon Apr 30 14:58:47 2012 -0700
1.3 @@ -106,7 +106,7 @@
1.4 <li><button><img src='trash.svg' alt="trash"></button></li>
1.5 </ul>
1.6 <style>
1.7 -ul { display: flexbox; flex-pack: distribute; }
1.8 +ul { display: flex; flex-pack: distribute; }
1.9 /* Irrelevant styling for this example removed. */
1.10 </style></pre>
1.11
1.12 @@ -131,7 +131,7 @@
1.13 <h2 id='box-model'>
1.14 The Flexbox Box Model</h2>
1.15
1.16 - <p>An element with ''display:flexbox'' or ''display:inline-flexbox'' is a <dfn>flexbox</dfn>. Children of a flexbox are called <i>flexbox items</i> and are laid out using the flexbox box model.
1.17 + <p>An element with ''display:flex'' or ''display:inline-flex'' is a <dfn>flexbox</dfn>. Children of a flexbox are called <i>flexbox items</i> and are laid out using the flexbox box model.
1.18
1.19 <p>Unlike block layout, which is normally biased towards laying things out vertically, and inline layout, which is normally biased toward laying things out horizontally, the flexbox layout algorithm is agnostic as to the direction the flexbox happens to be laid out in. To make it easier to talk about flexbox layout in a general way, we will define several direction-agnostic terms here to make the rest of the spec easier to read and understand.
1.20
1.21 @@ -181,7 +181,7 @@
1.22
1.23
1.24 <h2 id='display-flexbox'>
1.25 -Flexboxes: the ''flexbox'' and ''inline-flexbox'' 'display' values</h2>
1.26 +Flexboxes: the ''flex'' and ''inline-flex'' 'display' values</h2>
1.27
1.28 <table class="propdef">
1.29 <tr>
1.30 @@ -189,11 +189,11 @@
1.31 <td>display
1.32 <tr>
1.33 <th><a href="http://dev.w3.org/csswg/css-module/#values">New value</a>:
1.34 - <td><dfn id='display-flexbox'>flexbox</dfn> | <dfn id='display-inline-flexbox'>inline-flexbox</dfn>
1.35 + <td><dfn id='display-flex'>flex</dfn> | <dfn id='display-inline-flex'>inline-flex</dfn>
1.36 </table>
1.37
1.38 <p>
1.39 - An element whose computed 'display' is either ''flexbox'' or ''inline-flexbox''
1.40 + An element whose computed 'display' is either ''flex'' or ''inline-flex''
1.41 is a flexbox,
1.42 and establishes a new <dfn>flexbox formatting context</dfn> for its contents.
1.43 This is similar to a block formatting context root:
1.44 @@ -203,8 +203,8 @@
1.45 each of the <i>flexbox items</i> establishes a new formatting context for its contents.
1.46
1.47 <p>
1.48 - The ''flexbox'' value makes the flexbox a block-level element.
1.49 - The ''inline-flexbox'' value makes the flexbox an atomic inline-level element.
1.50 + The ''flex'' value makes the flexbox a block-level element.
1.51 + The ''inline-flex'' value makes the flexbox an atomic inline-level element.
1.52
1.53 <p>
1.54 Flexboxes are not block containers,
1.55 @@ -216,7 +216,7 @@
1.56 all of the 'column-*' properties in the Multicol module have no effect on a flexbox.
1.57
1.58 <li>
1.59 - 'float' and 'clear' have no effect on a flexbox item.
1.60 + 'float' and 'clear' have no effect on a <i>flexbox item</i>.
1.61 Using 'float' on an element still causes that element's 'display' property to compute to ''block'',
1.62 and thus 'float' may affect whether an element becomes a flexbox item
1.63 or is wrapped in one.
1.64 @@ -227,13 +227,13 @@
1.65 </ul>
1.66
1.67 <p>
1.68 - If an element's specified value for 'display' is ''inline-flexbox''
1.69 + If an element's specified value for 'display' is ''inline-flex''
1.70 and the element is floated or absolutely positioned,
1.71 - the computed value of 'display' is ''flexbox''.
1.72 + the computed value of 'display' is ''flex''.
1.73 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
1.74 to contain an additional row,
1.75 - with ''inline-flexbox'' in the "Specified Value" column
1.76 - and ''flexbox'' in the "Computed Value" column.
1.77 + with ''inline-flex'' in the "Specified Value" column
1.78 + and ''flex'' in the "Computed Value" column.
1.79
1.80 <p>
1.81 The baseline of a flexbox is:
1.82 @@ -288,7 +288,7 @@
1.83 <div class="example">
1.84 <p>Examples of flexbox items:
1.85 <pre>
1.86 -<div style="display:flexbox">
1.87 +<div style="display:flex">
1.88
1.89 <!-- flexbox item: block-level child -->
1.90 <div id="item1">block</div>
1.91 @@ -406,7 +406,7 @@
1.92
1.93 <pre><style>
1.94 #div1 {
1.95 - display: flexbox;
1.96 + display: flex;
1.97 flex-flow: row wrap;
1.98 width: 300px;
1.99 }
1.100 @@ -455,7 +455,7 @@
1.101
1.102 <pre>
1.103 #div1 {
1.104 - display: flexbox;
1.105 + display: flex;
1.106 flex-flow: row wrap;
1.107 flex-pack: center;
1.108 width: 300px;
1.109 @@ -736,7 +736,7 @@
1.110
1.111 <pre>
1.112 .tabs {
1.113 - display: flexbox;
1.114 + display: flex;
1.115 }
1.116 .tabs > .current {
1.117 flex-order: -1; /* Lower than the default of 0 */
1.118 @@ -763,7 +763,7 @@
1.119 <p>This layout can be easily achieved with Flexbox:
1.120
1.121 <pre>
1.122 -#main { display: flexbox; }
1.123 +#main { display: flex; }
1.124 #main > article { flex:1; flex-order: 2; }
1.125 #main > nav { width: 200px; flex-order: 1; }
1.126 #main > aside { width: 200px; flex-order: 3; }</pre>
1.127 @@ -878,7 +878,7 @@
1.128 <pre>
1.129 <!DOCTYPE html>
1.130 <style>
1.131 - div { display:flexbox; outline:1px solid silver; }
1.132 + div { display:flex; outline:1px solid silver; }
1.133 p { flex:1 auto; margin:1em; background:gold; }
1.134 </style>
1.135 <div>
1.136 @@ -945,8 +945,11 @@
1.137 <p>Note that auto margins work consistently in both dimensions, so a simple markup like this
1.138
1.139 <pre>
1.140 -div { display:flexbox;
1.141 - width:4em; height:4em; background:silver;
1.142 +div {
1.143 + display: flex;
1.144 + width: 4em;
1.145 + height: 4em;
1.146 + background:silver;
1.147 }
1.148 p { margin:auto; }
1.149 <div><p>OK</p></div></pre>
1.150 @@ -958,10 +961,13 @@
1.151 <p>And this
1.152
1.153 <pre>
1.154 -div { display:flexbox;
1.155 - width:calc(100% - 4em); height:calc(100% - 4em);
1.156 - border: 1em solid blue; border-radius:50%;
1.157 - margin:auto;
1.158 +div {
1.159 + display: flex;
1.160 + width: calc(100% - 4em);
1.161 + height:calc(100% - 4em);
1.162 + border: 1em solid blue;
1.163 + border-radius:50%;
1.164 + margin: auto;
1.165 }
1.166 div#demo { width:9em; height:9em; }
1.167
1.168 @@ -1211,7 +1217,7 @@
1.169 </div>
1.170 <style>
1.171 div {
1.172 - display: flexbox;
1.173 + display: flex;
1.174 flex-flow: column;
1.175 flex-align: center;
1.176 width: 200px;
