- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 02 Sep 2011 22:08:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv29695
Modified Files:
Overview.html Overview.src.html
Log Message:
Huh, I never fixed the flex-order value back to <number> and 0. Also, tweaked the example's text.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.55
retrieving revision 1.56
diff -u -d -r1.55 -r1.56
--- Overview.html 2 Sep 2011 20:40:17 -0000 1.55
+++ Overview.html 2 Sep 2011 22:08:21 -0000 1.56
@@ -823,12 +823,12 @@
<tr>
<th>Value:
- <td><integer>
+ <td><number>
<tr>
<th>Initial:
- <td>1
+ <td>0
<tr>
<th>Applies to:
@@ -864,25 +864,34 @@
<div class=example>
<p>This example shows how ordinal groups might be used.</p>
- <pre><code> div { display: flexbox; }
-#item1 { flex-order: 2; }
-#item3 { flex-order: 2; }
-#item4 { flex-order: 1; }
+ <pre>
+div { display: flexbox; }
+#item1, #item3 { flex-order: 1; }
+#item4 { flex-order: 0; }
<div>
- <div id="item1">item1</div>
- <div id="item2">item2</div>
- <div id="item3">item3</div>
- <div id="item4">item4</div>
-</div></code></pre>
+ <button id="item1">One</button>
+ <button id="item2">Two</button>
+ <button id="item3">Three</button>
+ <button id="item4">Four</button>
+</div></pre>
- <p>The first ordinal group, 1, contains item2 and item4. As item2 does not
- specify an ordinal group, it will default to 1. The elements will be
- displayed in document order, so item2 will be displayed before item4. The
- second ordinal group, 2, contains the remaining two items. The resulting
- display order will be:</p>
+ <p>Items 2 and 4 are both in ordinal group 0 (item 2 defaults to
+ ‘<code class=css>0</code>’ because it doesn't specify one
+ explicitly). This is the lowest ordinal group, so they'll be displayed
+ first, and in document order, with Item 2 displayed before Item 4. The
+ remaining items are both in ordinal group 1, so the resulting display
+ order will be:</p>
- <pre><code>item2 item4 item1 item3</code></pre>
+ <div style="border: medium solid green; display: inline-block;">
+ <button>Two</button>
+
+ <button>Four</button>
+
+ <button>One</button>
+
+ <button>Three</button>
+ </div>
</div>
<p class=issue>Add a realistic example of tab reordering.
@@ -1790,9 +1799,9 @@
<tr>
<th><a class=property href="#flex-order0">flex-order</a>
- <td><integer>
+ <td><number>
- <td>1
+ <td>0
<td>flexbox items
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.54
retrieving revision 1.55
diff -u -d -r1.54 -r1.55
--- Overview.src.html 2 Sep 2011 20:40:17 -0000 1.54
+++ Overview.src.html 2 Sep 2011 22:08:21 -0000 1.55
@@ -347,10 +347,10 @@
<td><dfn>flex-order</dfn>
<tr>
<th>Value:
- <td><integer>
+ <td><number>
<tr>
<th>Initial:
- <td>1
+ <td>0
<tr>
<th>Applies to:
<td><i>flexbox items</i></td>
@@ -371,21 +371,27 @@
<div class=example>
<p>This example shows how ordinal groups might be used.</p>
- <pre><code> div { display: flexbox; }
-#item1 { flex-order: 2; }
-#item3 { flex-order: 2; }
-#item4 { flex-order: 1; }
+
+ <pre>
+div { display: flexbox; }
+#item1, #item3 { flex-order: 1; }
+#item4 { flex-order: 0; }
<div>
- <div id="item1">item1</div>
- <div id="item2">item2</div>
- <div id="item3">item3</div>
- <div id="item4">item4</div>
-</div></code></pre>
+ <button id="item1">One</button>
+ <button id="item2">Two</button>
+ <button id="item3">Three</button>
+ <button id="item4">Four</button>
+</div></pre>
- <p>The first ordinal group, 1, contains item2 and item4. As item2 does not specify an ordinal group, it will default to 1. The elements will be displayed in document order, so item2 will be displayed before item4. The second ordinal group, 2, contains the remaining two items. The resulting display order will be:</p>
+ <p>Items 2 and 4 are both in ordinal group 0 (item 2 defaults to ''0'' because it doesn't specify one explicitly). This is the lowest ordinal group, so they'll be displayed first, and in document order, with Item 2 displayed before Item 4. The remaining items are both in ordinal group 1, so the resulting display order will be:</p>
- <pre><code>item2 item4 item1 item3</code></pre>
+ <div style="border: medium solid green; display: inline-block;">
+ <button>Two</button>
+ <button>Four</button>
+ <button>One</button>
+ <button>Three</button>
+ </div>
</div>
<p class='issue'>Add a realistic example of tab reordering.</p>
Received on Friday, 2 September 2011 22:08:24 UTC