- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 06 Feb 2012 21:18:24 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv739
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial tweaks suggested by elika.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.142
retrieving revision 1.143
diff -u -d -r1.142 -r1.143
--- Overview.html 31 Jan 2012 01:53:41 -0000 1.142
+++ Overview.html 6 Feb 2012 21:18:21 -0000 1.143
@@ -29,11 +29,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 31 January 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 6 February 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120131/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120131/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120206/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120206/</a>-->
<dd><a
@@ -280,13 +280,13 @@
<p>CSS 2.1 defined four layout modes — algorithms which determine the
size and position of boxes based on their relationships with their sibling
- and ancestor boxes: block layout, designed for laying out documents and
- simple applications; inline layout, designed for laying out text; table
- layout, designed for laying out information in a tabular format; and
- positioned layout, designed for very explicit positioning without much
- regard for other elements in the document. This module introduces a new
- layout mode, flexbox layout, which is designed for laying out more complex
- applications and webpages.
+ and ancestor boxes: block layout, designed for laying out documents;
+ inline layout, designed for laying out text; table layout, designed for
+ laying out information in a tabular format; and positioned layout,
+ designed for very explicit positioning without much regard for other
+ elements in the document. This module introduces a new layout mode,
+ flexbox layout, which is designed for laying out more complex applications
+ and webpages.
<p>Flexbox layout is superficially similar to block layout. It lacks many
of the more complex text or document-formatting properties that can be
@@ -304,6 +304,33 @@
dimensions, wrapping into separate lines in a fashion similar to how text
is wrapped into multiple lines.
+ <div class=example>
+ <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>
+<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>
+
+ <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=placement><span class=secno>1.1. </span> Module interactions</h3>
<p>This module extends the definition of the ‘<code
@@ -327,22 +354,17 @@
<p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the <a
- href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
- keyword as their property value. For readability it has not been repeated
- explicitly.
+ href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">‘<code
+ class=css>inherit</code>’</a> keyword as their property value. For
+ readability it has not been repeated explicitly.
<h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
<p>An element with ‘<code class=css>display:flexbox</code>’ or
‘<code class=css>display:inline-flexbox</code>’ is a <dfn
- id=flexbox>flexbox</dfn>. Block-level children of a flexbox, and some
- other types of children, are called <dfn id=flexbox-item
- title="flexbox item|flexbox items|flexbox item's">flexbox items</dfn> and
- are laid out using the flexbox box model. <span class=note>(See the <a
- href="#flex-items">Flexbox Items</a> chapter, below, for specifics on
- which children are <a href="#flexbox-item"><i>flexbox items</i></a>
- directly and which children are instead wrapped in anonymous boxes which
- are then <a href="#flexbox-item"><i>flexbox items</i></a>)</span>
+ id=flexbox>flexbox</dfn>. Children of a flexbox are called <dfn
+ id=flexbox-item title="flexbox item|flexbox items|flexbox item's">flexbox
+ items</dfn> and are laid out using the flexbox box model.
<p>Unlike block layout, which is normally biased towards laying things out
vertically, and inline layout, which is normally biased toward laying
@@ -413,33 +435,6 @@
the flexbox with the ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property.
- <div class=example>
- <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>
-<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>
-
- <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
‘<code class=property>display</code>’ property</h3>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.140
retrieving revision 1.141
diff -u -d -r1.140 -r1.141
--- Overview.src.html 31 Jan 2012 01:53:41 -0000 1.140
+++ Overview.src.html 6 Feb 2012 21:18:21 -0000 1.141
@@ -82,12 +82,33 @@
<p><em>This section is not normative.</em>
- <p>CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents and simple applications; inline layout, designed for laying out text; table layout, designed for laying out information in a tabular format; and positioned layout, designed for very explicit positioning without much regard for other elements in the document. This module introduces a new layout mode, flexbox layout, which is designed for laying out more complex applications and webpages.</p>
+ <p>CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents; inline layout, designed for laying out text; table layout, designed for laying out information in a tabular format; and positioned layout, designed for very explicit positioning without much regard for other elements in the document. This module introduces a new layout mode, flexbox layout, which is designed for laying out more complex applications and webpages.</p>
<p>Flexbox layout is superficially similar to block layout. It lacks many of the more complex text or document-formatting properties that can be used in block layout, such as 'float' and 'columns', but in return it gains more simple and powerful tools for aligning its contents in ways that webapps and complex web pages often need. </p>
<p>The contents of a flexbox can be laid out in any direction (left, right, down, or even up!), can have their order swapped around dynamically (i.e., display order is independent of source order), and can "flex" their sizes and positions to respond to the available space. If a flexbox is <i>multi-line</i>, the flexbox items flow in two dimensions, wrapping into separate lines in a fashion similar to how text is wrapped into multiple lines.</p>
+ <div class="example">
+ <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>
+<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>
+
+ <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>
+
<h3 id="placement">
Module interactions</h3>
@@ -98,12 +119,12 @@
<p>This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. Value types not defined in this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS modules may expand the definitions of these value types: for example [[CSS3COLOR]], when combined with this module, expands the definition of the <color> value type as used in this specification.</p>
- <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their property value. For readability it has not been repeated explicitly.
+ <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">''inherit''</a> keyword as their property value. For readability it has not been repeated explicitly.
<h2 id='box-model'>
The Flexbox Box Model</h2>
- <p>An element with ''display:flexbox'' or ''display:inline-flexbox'' is a <dfn>flexbox</dfn>. Block-level children of a flexbox, and some other types of children, are called <dfn title="flexbox item|flexbox items|flexbox item's" id="flexbox-item">flexbox items</dfn> and are laid out using the flexbox box model. <span class='note'>(See the <a href="#flex-items">Flexbox Items</a> chapter, below, for specifics on which children are <i>flexbox items</i> directly and which children are instead wrapped in anonymous boxes which are then <i>flexbox items</i>)</span></p>
+ <p>An element with ''display:flexbox'' or ''display:inline-flexbox'' is a <dfn>flexbox</dfn>. Children of a flexbox are called <dfn title="flexbox item|flexbox items|flexbox item's" id="flexbox-item">flexbox items</dfn> and are laid out using the flexbox box model.</p>
<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.</p>
@@ -120,27 +141,6 @@
<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 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>
-<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>
-
- <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>
-
<h3 id='display-flexbox'>
New values for 'display' property</h3>
Received on Monday, 6 February 2012 21:18:37 UTC