- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 24 Jan 2012 22:43:43 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv27503
Modified Files:
Overview.html Overview.src.html
Log Message:
Replace the intro example with a better-looking one.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.102
retrieving revision 1.103
diff -u -d -r1.102 -r1.103
--- Overview.html 24 Jan 2012 01:11:50 -0000 1.102
+++ Overview.html 24 Jan 2012 22:43:41 -0000 1.103
@@ -423,33 +423,30 @@
class=property>flex-line-pack</code></a>’ property.
<div class=example>
- <p>For example, the following HTML snippet declares a flexbox with a few
- children. The flexbox is horizontal, and the children's widths don't fill
- the flexbox's width, so the additional space is distributed between the
- children. The flexbox's height isn't explicitly specified, so it shrinks
- to the height of its tallest child and centers the other children within
- it:</p>
+ <p>For example, the following HTML snippet uses flexbox to create a
+ toolbar with icons. The flexbox is horizontal, and the children's widths
+ don't fill the flexbox's width, so the additional space is distributed
+ around and between the children. As the flexbox grows (perhaps because
+ the user is viewing the page on a wider screen), the children spread out
+ evenly and automatically:</p>
<pre>
-<p style="width: 500px; padding: 5px;
- display: flexbox; flex-pack: justify; flex-align: center;">
- <button style="width: 200px;">Child 1<br>Another Line</button>
- <button style="width: 100px;">Child 2</button>
- <button style="width: 100px;">Child 3</button>
-</p></pre>
-
- <p>This will render approximately like the following:</p>
+<ul>
+ <li><button><img src='new.svg' alt="New"></button></li>
+ <li><button><img src='upload.svg' alt="Upload"></button></li>
+ <li><button><img src='save.svg' alt="Save"></button></li>
+ <li><button><img src='trash.svg' alt="trash"></button></li>
+</ul>
+<style>
+ul { display: flexbox; flex-pack: distribute; }
+/* Irrelevant styling for this example removed. */
+</style></pre>
- <p
- style="border: thin solid black; background: white; width: 500px; padding: 5px; overflow: hidden;">
- <button
- style="float: left; width: 200px; height: 40px; margin-right: 50px;">Child
- 1<br>
- Another Line</button> <button
- style="float: left; width: 100px; height: 22px; margin-top: 9px;">Child
- 2</button> <button
- style="float: right; width: 100px; height: 22px; margin-top: 9px;">Child
- 3</button></p>
+ <div class=figure> <img height=140 src="images/toolbar-example.svg"
+ width=400>
+ <p class=caption>Example rendering of the above code snippet, at two
+ different flexbox widths.</p>
+ </div>
</div>
<h3 id=display-flexbox><span class=secno>2.1. </span> New values for
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.102
retrieving revision 1.103
diff -u -d -r1.102 -r1.103
--- Overview.src.html 24 Jan 2012 01:11:50 -0000 1.102
+++ Overview.src.html 24 Jan 2012 22:43:41 -0000 1.103
@@ -121,23 +121,24 @@
<p>In the <i>cross axis</i>, <i>flexbox items</i> can either "flex" to fill the available space or be aligned within the space with the 'flex-align' property. If a flexbox is <i>multi-line</i>, new lines are added in the <i>cross-end</i> direction, and can similarly be aligned, centered, or distributed within the flexbox with the 'flex-line-pack' property.</p>
<div class="example">
- <p>For example, the following HTML snippet declares a flexbox with a few children. The flexbox is horizontal, and the children's widths don't fill the flexbox's width, so the additional space is distributed between the children. The flexbox's height isn't explicitly specified, so it shrinks to the height of its tallest child and centers the other children within it:</p>
+ <p>For example, the following HTML snippet uses flexbox to create a toolbar with icons. The flexbox is horizontal, and the children's widths don't fill the flexbox's width, so the additional space is distributed around and between the children. As the flexbox grows (perhaps because the user is viewing the page on a wider screen), the children spread out evenly and automatically:</p>
<pre>
-<p style="width: 500px; padding: 5px;
- display: flexbox; flex-pack: justify; flex-align: center;">
- <button style="width: 200px;">Child 1<br>Another Line</button>
- <button style="width: 100px;">Child 2</button>
- <button style="width: 100px;">Child 3</button>
-</p></pre>
-
- <p>This will render approximately like the following:</p>
+<ul>
+ <li><button><img src='new.svg' alt="New"></button></li>
+ <li><button><img src='upload.svg' alt="Upload"></button></li>
+ <li><button><img src='save.svg' alt="Save"></button></li>
+ <li><button><img src='trash.svg' alt="trash"></button></li>
+</ul>
+<style>
+ul { display: flexbox; flex-pack: distribute; }
+/* Irrelevant styling for this example removed. */
+</style></pre>
- <p style="border: thin solid black; background: white; width: 500px; padding: 5px; overflow: hidden;">
- <button style="float: left; width: 200px; height: 40px; margin-right: 50px;">Child 1<br>Another Line</button>
- <button style="float: left; width: 100px; height: 22px; margin-top: 9px;">Child 2</button>
- <button style="float: right; width: 100px; height: 22px; margin-top: 9px;">Child 3</button>
- </p>
+ <div class='figure'>
+ <img src="images/toolbar-example.svg" width=400 height=140>
+ <p class='caption'>Example rendering of the above code snippet, at two different flexbox widths.</p>
+ </div>
</div>
Received on Tuesday, 24 January 2012 22:43:45 UTC