- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 23 Aug 2011 01:00:24 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv7540
Modified Files:
Overview.html Overview.src.html
Log Message:
Further rewrite of the Intro and Box Model chapters.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.38
retrieving revision 1.39
diff -u -d -r1.38 -r1.39
--- Overview.html 20 Aug 2011 01:28:35 -0000 1.38
+++ Overview.html 23 Aug 2011 01:00:22 -0000 1.39
@@ -16,12 +16,12 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 20 August 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 23 August 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110820/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110820/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110823/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110823/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -142,9 +142,9 @@
Items</a>
</ul>
- <li><a href="#flexbox-flow-direction-the-flex-flow-pro"><span
- class=secno>3. </span> Flexbox Flow Direction: the ‘<code
- class=property>flex-flow</code>’ property</a>
+ <li><a href="#flex-flow"><span class=secno>3. </span> Flexbox Flow
+ Direction: the ‘<code class=property>flex-flow</code>’
+ property</a>
<li><a href="#flex-order"><span class=secno>4. </span> Display Order: the
‘<code class=property>flex-order</code>’ property</a>
@@ -243,66 +243,117 @@
and powerful tools for aligning its contents in ways that webapps and
complex web pages often need.
- <p>Flexbox layout operates exclusively on immediate block-level children,
- which are referred to as <dfn id=flexbox-item title="flexbox item|flexbox
- items">flexbox items</dfn>. If a flexbox's direct child is an inline
- element or text, it is wrapped in an anonymous block, as described below,
- which then functions as the <a href="#flexbox-item"><i>flexbox
- item</i></a> instead.
-
- <p><a href="#flexbox-item"><i>Flexbox items</i></a> 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
+ <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.
<h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
- <p>In flexbox, the term <dfn id=main-axis>main axis</dfn> refers to the
- primary direction of flow of <a href="#flexbox-item"><i>flexbox
- items</i></a>, the direction in which items are added to layout in a
- single line flexbox, or in one line of multiline flexbox. Main axis
- direction determines logical ‘<a href="#flex-pack-start"><code
- class=property>start</code></a>’ and ‘<a
- href="#flex-pack-end"><code class=property>end</code></a>’.
+ <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>
- <p>The term <dfn id=cross-axis>cross axis</dfn> refers to the direction
- orthogonal to main axis. Direction of defines logical ‘<a
- href="#flex-line-pack-before"><code
- class=property>before</code></a>’ and ‘<a
- href="#flex-line-pack-after"><code class=property>after</code></a>’
- for alignment and direction of wrapping when wrapping is enabled.
+ <p>The flexbox layout algorithm works 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 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>. 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.
+
+ <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
+ id=cross-start>cross-start</dfn> and <dfn id=cross-end>cross-end</dfn>
+ 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>. 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.
+
+ <p>The contents of a flexbox can be easily and powerfully manipulated with
+ a handful of properties. Most significantly, <a
+ href="#flexbox-item"><i>flexbox items</i></a> can "flex" their <a
+ href="#main-size"><i>main size</i></a> by using the ‘<code
+ class=css>flex()</code>’ function in the ‘<code
+ class=property>width</code>’ or ‘<code
+ class=property>height</code>’ 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 <a
+ href="#flexbox-item"><i>flexbox items</i></a> have finished flexing, the
+ items can be aligned, centered, or distributed with the ‘<a
+ href="#flex-pack0"><code class=property>flex-pack</code></a>’
+ property. <a href="#flexbox-item"><i>Flexbox items</i></a> can also be
+ completely rearranged within the flexbox with the ‘<a
+ href="#flex-order0"><code class=property>flex-order</code></a>’
+ property.
+
+ <p>In the <a href="#cross-axis"><i>cross axis</i></a>, <a
+ href="#flexbox-item"><i>flexbox items</i></a> can either "flex" to fill
+ the available space or be aligned within the space with the ‘<a
+ href="#flex-align0"><code class=property>flex-align</code></a>’
+ property. If a flexbox is <i>multi-line</i>, new lines are added in the <a
+ href="#cross-end"><i>cross-end</i></a> direction, and can similarly be
+ aligned, centered, or distributed within the flexbox with the ‘<a
+ href="#propdef-flex-line-pack"><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 other layout modes. Inline flexboxes can also be
- declared, which act like inline-blocks.
+ a block when placed into elements using other layout modes. Inline
+ flexboxes act like inline-blocks. <span class=issue>Figure out the right
+ terms to use here.</span>
<div class=example>
- <p>For example:</p>
+ <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: 400px; display: flexbox;">
- <button style="width: 200px;">Child 1</button>
+<p style="width: 500px; padding: 5px; display: flexbox; flex-pack: distribute; flex-align: middle;">
+ <button style="width: 200px;">Child 1<br>Another Line</button>
<button style="width: 100px;">Child 2</button>
-</p>
-</pre>
+ <button style="width: 100px;">Child 3</button>
+</p></pre>
- <p>In this example, the first button is 200 pixels wide and the second
- button is 100 pixels wide. As the flexbox is 400 pixels wide, there is
- extra space left over which is placed after the two buttons but inside
- the flexbox. The placement of this extra space may be modified using the
- various flex properties described in the next sections. Neither the
- height of the buttons nor the height of the flexbox are specified, so the
- height is computed intrinsically from the content. In this case, the
- buttons will be the height needed to display the label and button border,
- and the flexbox will also be this height plus any margins around the
- buttons.</p>
- </div>
+ <p>This will render approximately like the following:</p>
- <p class=issue>this needs a picture
+ <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>
<h3 id=display-flexbox><span class=secno>2.1. </span> New values for
‘<code class=property>display</code>’ property</h3>
@@ -323,8 +374,8 @@
<p>You can declare that an element is a flexbox, and thus should use
flexbox layout, by setting the ‘<code
class=property>display</code>’ property on the element to the value
- ‘<code class=property>flexbox</code>’ or ‘<code
- class=property>inline-flexbox</code>’.
+ ‘<a href="#flexbox"><code class=property>flexbox</code></a>’
+ or ‘<code class=property>inline-flexbox</code>’.
<p>Flexbox establishes a new block formatting context for its content.
@@ -428,8 +479,8 @@
‘<code class=property>height</code>’ properties are
‘<code class=css>auto</code>’), similar to tables or floats.
- <h2 id=flexbox-flow-direction-the-flex-flow-pro><span class=secno>3.
- </span> Flexbox Flow Direction: the ‘<a href="#flex-flow"><code
+ <h2 id=flex-flow><span class=secno>3. </span> Flexbox Flow Direction: the
+ ‘<a href="#flex-flow0"><code
class=property>flex-flow</code></a>’ property</h2>
<table class=propdef>
@@ -437,7 +488,7 @@
<tr>
<th>Name:
- <td><dfn id=flex-flow>flex-flow</dfn>
+ <td><dfn id=flex-flow0>flex-flow</dfn>
<tr>
<th>Values:
@@ -501,27 +552,33 @@
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
orientation as the inline axis of the current writing mode (the
- direction that text is laid out in). The <i>main-start</i> and
- <i>main-end</i> directions are equivalent to the "start" and "end"
- directions, respectively, of the current writing mode.
+ direction that text is laid out in). The <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are equivalent to the
+ "start" and "end" directions, respectively, of the current writing
+ mode.
<dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
- <dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the
- <i>main-start</i> and <i>main-end</i> directions are swapped.
+ <dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are swapped.
<dt><dfn id=flex-flow-column>column</dfn>
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
orientation as the block axis of the current writing mode (the
- direction that blocks are laid out in). The <i>main-start</i> and
- <i>main-end</i> directions are equivalent to the "before" and "after"
- directions, respectively, of the current writing mode.
+ direction that blocks are laid out in). The <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are equivalent to the
+ "before" and "after" directions, respectively, of the current writing
+ mode.
<dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
- <dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the
- <i>main-start</i> and <i>main-end</i> directions are swapped.
+ <dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
+ href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are swapped.
</dl>
<dt>Physical Directions
@@ -531,53 +588,58 @@
<dt><dfn id=flex-flow-horizontal>horizontal</dfn>
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> is
- horizontal. The <i>main-start</i> direction is equivalent to either the
- "start" or "before" direction of the current writing mode, whichever is
- vertical, and the <i>main-end</i> direction is the opposite direction
- of <i>main-start</i>.
+ horizontal. The <a href="#main-start"><i>main-start</i></a> direction
+ is equivalent to either the "start" or "before" direction of the
+ current writing mode, whichever is vertical, and the <a
+ href="#main-end"><i>main-end</i></a> direction is the opposite
+ direction of <a href="#main-start"><i>main-start</i></a>.
<dt><dfn id=flex-flow-horizontal-reverse>horizontal-reverse</dfn>
<dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
- except the <i>main-start</i> and <i>main-end</i> directions are
- swapped.
+ except the <a href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are swapped.
<dt><dfn id=flex-flow-horizontal-ltr>horizontal-ltr</dfn>
<dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
- except the <i>main-start</i> direction is to the left and the
- <i>main-end</i> direction is to the right.
+ except the <a href="#main-start"><i>main-start</i></a> direction is to
+ the left and the <a href="#main-end"><i>main-end</i></a> direction is
+ to the right.
<dt><dfn id=flex-flow-horizontal-rtl>horizontal-rtl</dfn>
<dd>Same as <a href="#flex-flow-horizontal"><i>horizontal</i></a>,
- except the <i>main-start</i> direction is to the right and the
- <i>main-end</i> direction is to the left.
+ except the <a href="#main-start"><i>main-start</i></a> direction is to
+ the right and the <a href="#main-end"><i>main-end</i></a> direction is
+ to the left.
<dt><dfn id=flex-flow-vertical>vertical</dfn>
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> is vertical.
- The <i>main-start</i> direction is equivalent to either the "start" or
- "before" direction of the current writing mode, whichever is
- horizontal, and the <i>main-end</i> direction is the opposite direction
- of <i>main-start</i>.
+ The <a href="#main-start"><i>main-start</i></a> direction is equivalent
+ to either the "start" or "before" direction of the current writing
+ mode, whichever is horizontal, and the <a
+ href="#main-end"><i>main-end</i></a> direction is the opposite
+ direction of <a href="#main-start"><i>main-start</i></a>.
<dt><dfn id=flex-flow-vertical-reverse>vertical-reverse</dfn>
<dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
- the <i>main-start</i> and <i>main-end</i> directions are swapped.
+ the <a href="#main-start"><i>main-start</i></a> and <a
+ href="#main-end"><i>main-end</i></a> directions are swapped.
<dt><dfn id=flex-flow-vertical-ttb>vertical-ttb</dfn>
<dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
- the <i>main-start</i> direction is upwards and the <i>main-end</i>
- direction is downwards.
+ the <a href="#main-start"><i>main-start</i></a> direction is upwards
+ and the <a href="#main-end"><i>main-end</i></a> direction is downwards.
<dt><dfn id=flex-flow-row-vertical-btt>vertical-btt</dfn>
<dd>Same as <a href="#flex-flow-vertical"><i>vertical</i></a>, except
- the <i>main-start</i> direction is downwards and the <i>main-end</i>
- direction is upwards.
+ the <a href="#main-start"><i>main-start</i></a> direction is downwards
+ and the <a href="#main-end"><i>main-end</i></a> direction is upwards.
</dl>
</dl>
@@ -595,57 +657,65 @@
<p>The <a href="#cross-axis"><i>cross axis</i></a> is always perpendicular
to the <a href="#main-axis"><i>main axis</i></a>. The second keyword, or
- the lack of it, sets the cross directions (<i>cross-start</i> and
- <i>cross-end</i>), and dictates whether the flexbox is single-line or
- multi-line. The cross directions affect how individual <a
- href="#flexbox-item"><i>flexbox items</i></a> respond to the ‘<a
+ the lack of it, sets the cross directions (<a
+ href="#cross-start"><i>cross-start</i></a> and <a
+ href="#cross-end"><i>cross-end</i></a>), and dictates whether the flexbox
+ is single-line or multi-line. The cross directions affect how individual
+ <a href="#flexbox-item"><i>flexbox items</i></a> respond to the ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
property, and the direction in which multiple lines are stacked and
aligned by the ‘<a href="#propdef-flex-line-pack"><code
class=property>flex-line-pack</code></a>’ property.
- <p>If the second keyword is omitted, the flexbox is single-line, the
- <i>cross-start</i> direction is equivalent to either the "start" or
- "before" direction of the current writing mode, whichever is in the
- <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite
- direction of <i>cross-start</i>.
+ <p>If the second keyword is omitted, the flexbox is single-line, the <a
+ href="#cross-start"><i>cross-start</i></a> direction is equivalent to
+ either the "start" or "before" direction of the current writing mode,
+ whichever is in the <i>cross-axis</i>, and the <a
+ href="#cross-end"><i>cross-end</i></a> direction is the opposite direction
+ of <a href="#cross-start"><i>cross-start</i></a>.
<p>If the second keyword is provided, the flexbox is <a
- href="#multiline">multi-line</a>. The <i>cross-start</i> and
- <i>cross-end</i> directions are set as follows:
+ href="#multiline">multi-line</a>. The <a
+ href="#cross-start"><i>cross-start</i></a> and <a
+ href="#cross-end"><i>cross-end</i></a> directions are set as follows:
<dl>
<dt><dfn id=flex-flow-wrap>wrap</dfn>
- <dd>The <i>cross-start</i> direction is equivalent to either the "start"
- or "before" direction of the current writing mode, whichever is in the
- <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite
- direction of <i>cross-start</i>.
+ <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is
+ equivalent to either the "start" or "before" direction of the current
+ writing mode, whichever is in the <i>cross-axis</i>, and the <a
+ href="#cross-end"><i>cross-end</i></a> direction is the opposite
+ direction of <a href="#cross-start"><i>cross-start</i></a>.
<dt><dfn id=flex-flow-wrap-reverse>wrap-reverse</dfn>
- <dd>Same as <a href="#flex-flow-wrap"><i>wrap</i></a>, except the
- <i>cross-start</i> and <i>cross-end</i> directions are swapped.
+ <dd>Same as <a href="#flex-flow-wrap"><i>wrap</i></a>, except the <a
+ href="#cross-start"><i>cross-start</i></a> and <a
+ href="#cross-end"><i>cross-end</i></a> directions are swapped.
<dt><dfn id=flex-flow-wrap-up>wrap-up</dfn>
- <dd>The <i>cross-start</i> direction is downwards and the <i>cross-end</i>
- direction is upwards.
+ <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is
+ downwards and the <a href="#cross-end"><i>cross-end</i></a> direction is
+ upwards.
<dt><dfn id=flex-flow-wrap-right>wrap-right</dfn>
- <dd>The <i>cross-start</i> direction is to the left and the
- <i>cross-end</i> direction is to the right.
+ <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is to the
+ left and the <a href="#cross-end"><i>cross-end</i></a> direction is to
+ the right.
<dt><dfn id=flex-flow-wrap-down>wrap-down</dfn>
- <dd>The <i>cross-start</i> direction is upwards and the <i>cross-end</i>
- direction is downwards.
+ <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is upwards
+ and the <a href="#cross-end"><i>cross-end</i></a> direction is downwards.
<dt><dfn id=flex-flow-wrap-left>wrap-left</dfn>
- <dd>The <i>cross-start</i> direction is to the right and the
- <i>cross-end</i> direction is to the left.
+ <dd>The <a href="#cross-start"><i>cross-start</i></a> direction is to the
+ right and the <a href="#cross-end"><i>cross-end</i></a> direction is to
+ the left.
</dl>
<p class=note>Note that not all combinations of first and second keyword
@@ -1302,13 +1372,13 @@
<h2 id=multiline><span class=secno>8. </span> Multi-line flexbox</h2>
<p>If no ‘<code class=property>wrap-</code>’ keyword is
- included in ‘<a href="#flex-flow"><code
+ included in ‘<a href="#flex-flow0"><code
class=property>flex-flow</code></a>’, flexbox lays out its items in
a single row or column; any items that don't fit will simply be considered
overflow.
<p>Adding any of the ‘<code class=property>wrap-</code>’
- keywords to ‘<a href="#flex-flow"><code
+ keywords to ‘<a href="#flex-flow0"><code
class=property>flex-flow</code></a>’ enables multi-line mode. Then
flexbox is allowed to expand to multiple lines (that is, multiple rows or
columns) in order to accommodate all of its items. Flexbox must attempt to
@@ -1321,7 +1391,7 @@
repeat to an arbitrary number of lines. If a line contains only a single
item that doesn't fit, then the item should stay on that line and overflow
out of the box. The later lines are placed according to wrap direction
- specified in ‘<a href="#flex-flow"><code
+ specified in ‘<a href="#flex-flow0"><code
class=property>flex-flow</code></a>’.
<p>The cross-axis size of a line is the cross-axis size of the largest item
@@ -2010,7 +2080,7 @@
class=property>vertical-align</code>’
</ul>
- <li>‘<a href="#flex-flow"><code
+ <li>‘<a href="#flex-flow0"><code
class=property>flex-flow</code></a>’ property
<ul>
<li>Renamed (was ‘<code
@@ -2175,7 +2245,7 @@
<td>visual
<tr>
- <th><a class=property href="#flex-flow">flex-flow</a>
+ <th><a class=property href="#flex-flow0">flex-flow</a>
<td>[ row | row-reverse | column | column-reverse ] [ wrap |
wrap-reverse ]? | [ horizontal | horizontal-reverse | horizontal-ltr |
@@ -2270,6 +2340,15 @@
<li>cross axis, <a href="#cross-axis" title="cross
axis"><strong>2.</strong></a>
+ <li>cross-end, <a href="#cross-end"
+ title=cross-end><strong>2.</strong></a>
+
+ <li>cross size, <a href="#cross-size" title="cross
+ size"><strong>2.</strong></a>
+
+ <li>cross-start, <a href="#cross-start"
+ title=cross-start><strong>2.</strong></a>
+
<li>distribute, <a href="#flex-line-pack-distribute"
title=distribute><strong>8.1.</strong></a>
@@ -2278,13 +2357,18 @@
<li>flex-align, <a href="#flex-align0"
title=flex-align><strong>7.</strong></a>
+ <li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
+
<li>flexbox item, <a href="#flexbox-item" title="flexbox
- item"><strong>1.</strong></a>
+ item"><strong>2.</strong></a>
<li>flexbox items, <a href="#flexbox-item" title="flexbox
- items"><strong>1.</strong></a>
+ items"><strong>2.</strong></a>
- <li>flex-flow, <a href="#flex-flow"
+ <li>flexbox item's, <a href="#flexbox-item" title="flexbox
+ item's"><strong>2.</strong></a>
+
+ <li>flex-flow, <a href="#flex-flow0"
title=flex-flow><strong>3.</strong></a>
<li>flex-line-pack, <a href="#propdef-flex-line-pack"
@@ -2326,6 +2410,14 @@
<li>main axis, <a href="#main-axis" title="main
axis"><strong>2.</strong></a>
+ <li>main-end, <a href="#main-end" title=main-end><strong>2.</strong></a>
+
+ <li>main size, <a href="#main-size" title="main
+ size"><strong>2.</strong></a>
+
+ <li>main-start, <a href="#main-start"
+ title=main-start><strong>2.</strong></a>
+
<li>middle, <a href="#flex-align-middle"
title=middle><strong>7.</strong></a>, <a href="#flex-line-pack-middle"
title=middle><strong>8.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.37
retrieving revision 1.38
diff -u -d -r1.37 -r1.38
--- Overview.src.html 20 Aug 2011 01:28:35 -0000 1.37
+++ Overview.src.html 23 Aug 2011 01:00:22 -0000 1.38
@@ -57,34 +57,42 @@
<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>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>Flexbox layout operates exclusively on immediate block-level children, which are referred to as <dfn title="flexbox item|flexbox items" id="flexbox-item">flexbox items</dfn>. If a flexbox's direct child is an inline element or text, it is wrapped in an anonymous block, as described below, which then functions as the <i>flexbox item</i> instead.</p>
- <p><i>Flexbox items</i> 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, 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>
<h2 id='box-model'>
The Flexbox Box Model</h2>
- <p>In flexbox, the term <dfn>main axis</dfn> refers to the primary direction of flow of <i>flexbox items</i>, the direction in which items are added to layout in a single line flexbox, or in one line of multiline flexbox. Main axis direction determines logical 'start' and 'end'.</p>
+ <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 term <dfn>cross axis</dfn> refers to the direction orthogonal to main axis. Direction of defines logical 'before' and 'after' for alignment and direction of wrapping when wrapping is enabled.</p>
+ <p>The flexbox layout algorithm works 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>. These terms are mapped to physical directions based on the first keyword in the 'flex-flow' property.</p>
- <p>Similar to other layout modes such as table layout, a flexbox acts like a block when placed into other layout modes. Inline flexboxes can also be declared, which act like inline-blocks.</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>. 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>
+
+ <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. <span class=issue>Figure out the right terms to use here.</span></p>
<div class="example">
- <p>For example:</p>
+ <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: 400px; display: flexbox;">
- <button style="width: 200px;">Child 1</button>
+<p style="width: 500px; padding: 5px; display: flexbox; flex-pack: distribute; flex-align: middle;">
+ <button style="width: 200px;">Child 1<br>Another Line</button>
<button style="width: 100px;">Child 2</button>
-</p>
-</pre>
+ <button style="width: 100px;">Child 3</button>
+</p></pre>
- <p>In this example, the first button is 200 pixels wide and the second button is 100 pixels wide. As the flexbox is 400 pixels wide, there is extra space left over which is placed after the two buttons but inside the flexbox. The placement of this extra space may be modified using the various flex properties described in the next sections. Neither the height of the buttons nor the height of the flexbox are specified, so the height is computed intrinsically from the content. In this case, the buttons will be the height needed to display the label and button border, and the flexbox will also be this height plus any margins around the buttons.</p>
+ <p>This will render approximately like the following:</p>
+
+ <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>
-
- <p class="issue">this needs a picture</p>
<h3 id='display-flexbox'>
@@ -179,7 +187,7 @@
<p>A flexbox item creates a new BFC. The margins of a flexbox item do not collapse with any other margin. Flexboxes "shrinkwrap" their contents by default (when their 'width' or 'height' properties are ''auto''), similar to tables or floats.</p>
-<h2>
+<h2 id='flex-flow'>
Flexbox Flow Direction: the 'flex-flow' property</h2>
<table class=propdef>
Received on Tuesday, 23 August 2011 01:00:26 UTC