- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 24 Jan 2012 01:11:52 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv26174
Modified Files:
Overview.html Overview.src.html
Log Message:
Tweaking the wording of the abstract and intro. Added a graphic to the intro illustrating the directional terms.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.101
retrieving revision 1.102
diff -u -d -r1.101 -r1.102
--- Overview.html 21 Jan 2012 01:02:41 -0000 1.101
+++ Overview.html 24 Jan 2012 01:11:50 -0000 1.102
@@ -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, 21 January 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 January 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120121/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120121/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120124/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120124/</a>-->
<dd><a
@@ -125,12 +125,12 @@
<h2 class="no-num no-toc" id=abstract> Abstract</h2>
<p>The specification describes a CSS box model optimized for user interface
- design. In flexbox layout model, the children of a box are laid out either
- horizontally or vertically, and unused space can be assigned to a
- particular child or distributed among the children by assignment of "flex"
- to the children that should expand. Nesting of these boxes (horizontal
- inside vertical, or vertical inside horizontal) can be used to build
- layouts in two dimensions.
+ design. In the flexbox layout model, the children of a flexbox can be laid
+ out in any direction, and can "flex" their sizes, either growing to fill
+ unused space or shrinking to avoid overflowing the parent. Both horizontal
+ and vertical alignment of the children can be easily manipulated. Nesting
+ of these boxes (horizontal inside vertical, or vertical inside horizontal)
+ can be used to build layouts in two dimensions.
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
@@ -305,14 +305,13 @@
and powerful tools for aligning its contents in ways that webapps and
complex web pages often need.
- <p>The contents of a flexbox can be laid out in any direction, can have
- their order swapped around dynamically, and can "flex" their sizes and
- positions to respond to the available space. If a flexbox is <a
+ <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 <a
href="#multi-line0"><i>multi-line</i></a>, the flexbox items flow in two
dimensions, wrapping into separate lines in a fashion similar to how text
- is wrapped into multiple lines. The direction that these lines are stacked
- in can also be controlled explicitly, relative either to the current
- writing mode (logical directions) or explicit physical directions.
+ is wrapped into multiple lines.
<h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
@@ -354,25 +353,35 @@
directly and which children are instead wrapped in anonymous boxes which
are then <a href="#flexbox-item"><i>flexbox items</i></a>)</span>
- <p>The flexbox layout algorithm is agnostic as to the physical direction
- the flexbox happens to be laid out in, so we will define several
+ <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. The <dfn id=main-axis>main axis</dfn> of a flexbox is the
- axis on which <a href="#flexbox-item"><i>flexbox items</i></a> are laid
- out along. The <a href="#flexbox-item"><i>flexbox items</i></a> are
- ordered such that they start on the <dfn id=main-start>main-start</dfn>
- side of the flexbox, and go toward the <dfn id=main-end>main-end</dfn>
- side. A <a href="#flexbox-item"><i>flexbox item's</i></a> width or height,
- whichever is in the <a href="#main-axis"><i>main axis</i></a>, is the
- item's <dfn id=main-size>main size</dfn>. The <a
- href="#flexbox-item"><i>flexbox item's</i></a> ‘<code
- class=property>width</code>’ or ‘<code
- class=property>height</code>’ property, specifically, that is in the
- <a href="#main-axis"><i>main axis</i></a> is the item's <dfn
- id=main-size-property>main size property</dfn>. These terms are mapped to
- physical directions based on the first keyword in the ‘<a
- href="#flex-flow0"><code class=property>flex-flow</code></a>’
- property.
+ and understand.
+
+ <div class=figure> <img height=300 src="images/flex-direction-terms.svg"
+ width=510>
+ <p class=caption>An illustration of the various directions and sizing
+ terms used in this specification, respectively for ‘<a
+ href="#flex-flow-row"><code class=css>row</code></a>’ and ‘<a
+ href="#flex-flow-column"><code class=css>column</code></a>’
+ flexboxes.</p>
+ </div>
+
+ <p>The <dfn id=main-axis>main axis</dfn> of a flexbox is the axis on which
+ <a href="#flexbox-item"><i>flexbox items</i></a> are laid out along. The
+ <a href="#flexbox-item"><i>flexbox items</i></a> are ordered such that
+ they start on the <dfn id=main-start>main-start</dfn> side of the flexbox,
+ and go toward the <dfn id=main-end>main-end</dfn> side. A <a
+ href="#flexbox-item"><i>flexbox item's</i></a> width or height, whichever
+ is in the <a href="#main-axis"><i>main axis</i></a>, is the item's <dfn
+ id=main-size>main size</dfn>. The <a href="#flexbox-item"><i>flexbox
+ item's</i></a> <dfn id=main-size-property>main size property</dfn> is
+ either the ‘<code class=property>width</code>’ or ‘<code
+ class=property>height</code>’ property, whichever is in the <a
+ href="#main-axis"><i>main axis</i></a>.
<p>The axis perpendicular to the <a href="#main-axis"><i>main axis</i></a>
is called the <dfn id=cross-axis>cross axis</dfn>, and similarly has <dfn
@@ -380,15 +389,11 @@
directions and sides defined. The width or height of a <a
href="#flexbox-item"><i>flexbox item</i></a>, whichever is in the <a
href="#cross-axis"><i>cross axis</i></a>, is the item's <dfn
- id=cross-size>cross size</dfn>, and similarly the actual ‘<code
- class=property>width</code>’ or ‘<code
- class=property>height</code>’ property, whichever is in the <a
- href="#cross-axis"><i>cross axis</i></a>, is the item's <dfn
- id=cross-size-property>cross size property</dfn>. These terms are mapped
- to physical directions based on the orientation of the <a
- href="#main-axis"><i>main axis</i></a> and the second keyword in the
- ‘<a href="#flex-flow0"><code
- class=property>flex-flow</code></a>’ property.
+ id=cross-size>cross size</dfn>, and similarly the <dfn
+ id=cross-size-property>cross size property</dfn> is whichever of
+ ‘<code class=property>width</code>’ or ‘<code
+ class=property>height</code>’ that is in the <a
+ href="#cross-axis"><i>cross axis</i></a>.
<p>The contents of a flexbox can be easily and powerfully manipulated with
a handful of properties. Most significantly, <a
@@ -417,10 +422,6 @@
the flexbox with the ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property.
- <p>Similar to other layout modes such as table layout, a flexbox acts like
- a block when placed into elements using other layout modes. Inline
- flexboxes act like inline-blocks.
-
<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
@@ -430,7 +431,8 @@
it:</p>
<pre>
-<p style="width: 500px; padding: 5px; display: flexbox; flex-pack: justify; flex-align: center;">
+<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>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.101
retrieving revision 1.102
diff -u -d -r1.101 -r1.102
--- Overview.src.html 21 Jan 2012 01:00:27 -0000 1.101
+++ Overview.src.html 24 Jan 2012 01:11:50 -0000 1.102
@@ -66,7 +66,7 @@
<h2 class="no-num no-toc" id="abstract">
Abstract</h2>
- <p>The specification describes a CSS box model optimized for user interface design. In flexbox layout model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of "flex" to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.</p>
+ <p>The specification describes a CSS box model optimized for user interface design. In the flexbox layout model, the children of a flexbox can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.</p>
<h2 class="no-num no-toc" id="status">Status of this document</h2>
<!--status-->
@@ -86,7 +86,7 @@
<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, can have their order swapped around dynamically, 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. The direction that these lines are stacked in can also be controlled explicitly, relative either to the current writing mode (logical directions) or explicit physical directions.</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>
<h3 id="placement">
Module interactions</h3>
@@ -105,21 +105,27 @@
<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>The flexbox layout algorithm is agnostic as to the physical direction the flexbox happens to be laid out in, so we will define several direction-agnostic terms here to make the rest of the spec easier to read and understand. The <dfn>main axis</dfn> of a flexbox is the axis on which <i>flexbox items</i> are laid out along. The <i>flexbox items</i> are ordered such that they start on the <dfn>main-start</dfn> side of the flexbox, and go toward the <dfn>main-end</dfn> side. A <i>flexbox item's</i> width or height, whichever is in the <i>main axis</i>, is the item's <dfn>main size</dfn>. The <i>flexbox item's</i> 'width' or 'height' property, specifically, that is in the <i>main axis</i> is the item's <dfn>main size property</dfn>. These terms are mapped to physical directions based on the first keyword in the 'flex-flow' property.</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>
- <p>The axis perpendicular to the <i>main axis</i> is called the <dfn>cross axis</dfn>, and similarly has <dfn>cross-start</dfn> and <dfn>cross-end</dfn> directions and sides defined. The width or height of a <i>flexbox item</i>, whichever is in the <i>cross axis</i>, is the item's <dfn>cross size</dfn>, and similarly the actual 'width' or 'height' property, whichever is in the <i>cross axis</i>, is the item's <dfn>cross size property</dfn>. These terms are mapped to physical directions based on the orientation of the <i>main axis</i> and the second keyword in the 'flex-flow' property.</p>
+ <div class='figure'>
+ <img src='images/flex-direction-terms.svg' width=510 height=300>
+ <p class='caption'>An illustration of the various directions and sizing terms used in this specification, respectively for ''row'' and ''column'' flexboxes.</p>
+ </div>
+
+ <p>The <dfn>main axis</dfn> of a flexbox is the axis on which <i>flexbox items</i> are laid out along. The <i>flexbox items</i> are ordered such that they start on the <dfn>main-start</dfn> side of the flexbox, and go toward the <dfn>main-end</dfn> side. A <i>flexbox item's</i> width or height, whichever is in the <i>main axis</i>, is the item's <dfn>main size</dfn>. The <i>flexbox item's</i> <dfn>main size property</dfn> is either the 'width' or 'height' property, whichever is in the <i>main axis</i>.</p>
+
+ <p>The axis perpendicular to the <i>main axis</i> is called the <dfn>cross axis</dfn>, and similarly has <dfn>cross-start</dfn> and <dfn>cross-end</dfn> directions and sides defined. The width or height of a <i>flexbox item</i>, whichever is in the <i>cross axis</i>, is the item's <dfn>cross size</dfn>, and similarly the <dfn>cross size property</dfn> is whichever of 'width' or 'height' that is in the <i>cross axis</i>.</p>
<p>The contents of a flexbox can be easily and powerfully manipulated with a handful of properties. Most significantly, <i>flexbox items</i> can "flex" their <i>main size</i> by using the ''flex()'' function in the 'width' or 'height' property. This "flexing" allows the items to get bigger or smaller based on the available space in the page. If there is leftover space in the flexbox after all of the <i>flexbox items</i> have finished flexing, the items can be aligned, centered, or distributed with the 'flex-pack' property. <i>Flexbox items</i> can also be completely rearranged within the flexbox with the 'flex-order' property.</p>
<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>
- <p>Similar to other layout modes such as table layout, a flexbox acts like a block when placed into elements using other layout modes. Inline flexboxes act like inline-blocks.</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>
<pre>
-<p style="width: 500px; padding: 5px; display: flexbox; flex-pack: justify; flex-align: center;">
+<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>
Received on Tuesday, 24 January 2012 01:11:59 UTC