- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 20 Aug 2011 00:48:01 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv26251
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial tag cleanup.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.36
retrieving revision 1.37
diff -u -d -r1.36 -r1.37
--- Overview.html 20 Aug 2011 00:29:55 -0000 1.36
+++ Overview.html 20 Aug 2011 00:47:37 -0000 1.37
@@ -239,13 +239,14 @@
complex web pages often need.
<p>Flexbox layout operates exclusively on immediate block-level children,
- which are referred to as<dfn id=flexbox-item> flexbox item</dfn>s. Flexbox
- may directly contain inline children or out of flow content, in which case
- flexbox item fixup is performed, as described below.
+ which are referred to as <dfn id=flexbox-item title="flexbox item|flexbox
+ items">flexbox items</dfn>. Flexbox may directly contain inline children
+ or out of flow content, in which case flexbox item fixup is performed, as
+ described below.
- <p><em>Flexbox items </em>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.
+ <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.
<p>If <dfn id=multiline0>multiline</dfn> option is enabled (by including
one of ‘<code class=property>wrap-</code>’ keywords in
@@ -258,7 +259,7 @@
<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
- item</i></a>s, the direction in which items are added to layout in a
+ 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
@@ -326,7 +327,7 @@
<h2 id=flex-items><span class=secno>3. </span> Flexbox Items</h2>
<p>Flexbox layout algorithm operates on <a href="#flexbox-item"><i>flexbox
- item</i></a>s, which are boxes that satisfy at least one of the following
+ items</i></a>, which are boxes that satisfy at least one of the following
criteria:
<ol>
@@ -474,18 +475,18 @@
</table>
<p>The ‘<code class=property>flexbox-flow</code>’ property
- specifies how <a href="#flexbox-item"><i>flexbox item</i></a>s are placed
+ specifies how <a href="#flexbox-item"><i>flexbox items</i></a> are placed
in the flexbox. The value consists of one or two keywords: the first sets
the orientation and direction of the flexbox's <a
href="#main-axis"><i>main axis</i></a>, while the second, if specified,
marks the flexbox as being multiline and sets the direction in which new
lines are stacked.
- <p>The main directions affect how <i>flexbox items</i> are arranged, and
- how they respond to the ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’ property. They can be set with
- either logical directions (relative to the writing mode) or physical
- directions:
+ <p>The main directions affect how <a href="#flexbox-item"><i>flexbox
+ items</i></a> are arranged, and how they respond to the ‘<a
+ href="#flex-pack0"><code class=property>flex-pack</code></a>’
+ property. They can be set with either logical directions (relative to the
+ writing mode) or physical directions:
<dl>
<dt>Logical Directions
@@ -592,11 +593,11 @@
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 <i>flexbox
- items</i> 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
+ 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
@@ -664,7 +665,7 @@
href="#flex-order0"><code class=property>flex-order</code></a>’
property</h2>
- <p><a href="#flexbox-item"><i>flexbox item</i></a>s are, by default,
+ <p><a href="#flexbox-item"><i>flexbox items</i></a> are, by default,
displayed and laid out in the same order as they appear in the source
document. The ‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’ property may be used to change
@@ -690,7 +691,7 @@
<tr>
<th>Applies to:
- <td><a href="#flexbox-item"><i>flexbox item</i></a>s
+ <td><a href="#flexbox-item"><i>flexbox items</i></a>
<tr>
<th>Inherited:
@@ -710,10 +711,10 @@
<p>The ‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’ property assigns <a
- href="#flexbox-item"><i>flexbox item</i></a>s to ordinal groups.
+ href="#flexbox-item"><i>flexbox items</i></a> to ordinal groups.
<p>Ordinal groups control the order in which <a
- href="#flexbox-item"><i>flexbox item</i></a>s appear. A flexbox will lay
+ href="#flexbox-item"><i>flexbox items</i></a> appear. A flexbox will lay
out its content starting from the lowest numbered ordinal group and going
up. Items with the same ordinal group are laid out in the order they
appear in the source document.
@@ -745,7 +746,7 @@
<h2 id=flexibility><span class=secno>6. </span> Flexibility</h2>
<p>The defining aspect of flexbox layout is the ability to make various
- lengths of the <a href="#flexbox-item"><i>flexbox item</i></a>s flexible.
+ lengths of the <a href="#flexbox-item"><i>flexbox items</i></a> flexible.
The ‘<code class=property>width</code>’, ‘<code
class=property>height</code>’, ‘<code
class=property>padding</code>’, and ‘<code
@@ -768,7 +769,7 @@
share some space. For example, for a horizontal flexbox, the lengths of
the left and right margins, left and right borders, left and right
paddings, and widths of all <a href="#flexbox-item"><i>flexbox
- item</i></a>s share the width of the flexbox itself. Conversely, each <a
+ items</i></a> share the width of the flexbox itself. Conversely, each <a
href="#flexbox-item"><i title="flexbox item">flexbox item's</i></a>
vertical margins, borders, padding, and height individually share the
height of the flexbox.
@@ -909,13 +910,13 @@
<length> is normally allowed to be specified without a unit suffix, in
flex() function it is ambiguous, as it is also an acceptable value for
flexibility. All ambiguous cases are resolved with preference to
- flexibility, thus unitless "0" can only be applied to <em>preferred size
- </em>when three vaues are specified and "0" is the last one.
+ flexibility, thus unitless "0" can only be applied to <i>preferred
+ size</i> when three vaues are specified and "0" is the last one.
<p>User agents that allow non-zero length values without unit suffix in
"quirks mode" may also accept a non-zero positive number as the
- <em>preferred size </em> in pixels when in "quirks mode" and when it is
- the third value in flex() function with three values.
+ <i>preferred size</i> in pixels when in "quirks mode" and when it is the
+ third value in flex() function with three values.
<h3 id=flexible-margins><span class=secno>6.3. </span> Flexible margins and
paddings</h3>
@@ -987,7 +988,7 @@
</table>
<p>Between and around the margins of <a href="#flexbox-item"><i>flexbox
- item</i></a>s there are additional flexible lengths, called <dfn
+ items</i></a> there are additional flexible lengths, called <dfn
id=packing-space>packing space</dfn>. Packing space can absorb leftover
free space in a flexbox if there aren't any other <i>flexible length</i>s,
or if all the <i>flexible length</i>s have reached their maximum size. The
@@ -998,7 +999,7 @@
<dl>
<dt><dfn id=flex-pack-start>start</dfn>
- <dd><a href="#flexbox-item"><i>flexbox item</i></a>s are packed toward the
+ <dd><a href="#flexbox-item"><i>flexbox items</i></a> are packed toward the
start of the flexbox. The last packing space (between the margin of the
last flexbox item and the edge of the flexbox) must absorb all leftover
free space; all other packing spaces must have a length of ‘<code
@@ -1006,7 +1007,7 @@
<dt><dfn id=flex-pack-end>end</dfn>
- <dd><a href="#flexbox-item"><i>flexbox item</i></a>s are packed toward the
+ <dd><a href="#flexbox-item"><i>flexbox items</i></a> are packed toward the
end of the flexbox. The first packing space (between the edge of the
flexbox and the margin of the first flexbox item) must absorb all
leftover free space; all other packing spaces must have a length of
@@ -1014,14 +1015,14 @@
<dt><dfn id=flex-pack-center>center</dfn>
- <dd><a href="#flexbox-item"><i>flexbox item</i></a>s are packed toward the
+ <dd><a href="#flexbox-item"><i>flexbox items</i></a> are packed toward the
center of the flexbox. The first and last packing spaces must equally
split all leftover free space; all other packing spaces must have a
length of ‘<code class=css>0</code>’.
<dt><dfn id=flex-pack-justify>justify</dfn>
- <dd><a href="#flexbox-item"><i>flexbox item</i></a>s are evenly
+ <dd><a href="#flexbox-item"><i>flexbox items</i></a> are evenly
distributed through the flexbox. The first and last packing spaces must
have a length of ‘<code class=css>0</code>’; all other
packing spaces must equally split all leftover free space.
@@ -1040,8 +1041,8 @@
href="#flex-align0"><code class=property>flex-align</code></a>’
property</h2>
- <p>Sizing and positioning of <a href="#flexbox-item"><em>flexbox
- item</em></a>s along the <a href="#cross-axis"><em>cross axis</em></a> of
+ <p>Sizing and positioning of <a href="#flexbox-item"><i>flexbox
+ items</i></a> along the <a href="#cross-axis"><i>cross axis</i></a> of
flexbox is controlled by the ‘<a href="#flex-align0"><code
class=property>flex-align</code></a>’ property.
@@ -1083,12 +1084,12 @@
<td>visual
</table>
- <p>When the size of the containing box along<a href="#cross-axis"><em>
- cross axis </em></a>is larger than the size of a child, extra space will
- be available. The ‘<a href="#flex-align0"><code
+ <p>When the size of the containing box along <a href="#cross-axis"><i>cross
+ axis</i></a> is larger than the size of a child, extra space will be
+ available. The ‘<a href="#flex-align0"><code
class=property>flex-align</code></a>’ property specifies how flexbox
- item is placed along the <a href="#cross-axis"><em>cross axis</em></a>,
- and where the extra space, if any, is positioned.
+ item is placed along the <a href="#cross-axis"><i>cross axis</i></a>, and
+ where the extra space, if any, is positioned.
<p>The values of this property have the following meanings. See text for
more specifics as to how children are positioned.
@@ -1097,33 +1098,33 @@
<dt><dfn id=flex-align-before>before</dfn>
<dd>The ‘<a href="#flex-line-pack-before"><code
- class=property>before</code></a>’ edge of the child box along<a
- href="#cross-axis"><em> cross axis </em></a>is aligned with ‘<a
+ class=property>before</code></a>’ edge of the child box along <a
+ href="#cross-axis"><i>cross axis</i></a>is aligned with ‘<a
href="#flex-line-pack-before"><code
class=property>before</code></a>’ edge of the flexbox content box.
See text for explanation of how direction of <a
- href="#cross-axis"><em>cross axis</em></a> is determined.
+ href="#cross-axis"><i>cross axis</i></a> is determined.
<dt><dfn id=flex-align-after>after</dfn>
<dd>The ‘<a href="#flex-line-pack-after"><code
- class=property>after</code></a>’ edge of the child box along<a
- href="#cross-axis"><em> cross axis </em></a>is aligned with ‘<a
+ class=property>after</code></a>’ edge of the child box along <a
+ href="#cross-axis"><i>cross axis</i></a>is aligned with ‘<a
href="#flex-line-pack-after"><code class=property>after</code></a>’
edge of the flexbox content box. See text for explanation of how
- direction of <a href="#cross-axis"><em>cross axis</em></a> is determined.
+ direction of <a href="#cross-axis"><i>cross axis</i></a> is determined.
<dt><dfn id=flex-align-middle>middle</dfn>
- <dd>Any extra space along the<a href="#cross-axis"><em> cross axis
- </em></a>is divided evenly, with half placed before the child and the
- other half placed after the child.
+ <dd>Any extra space along the <a href="#cross-axis"><i>cross axis</i></a>
+ is divided evenly, with half placed before the child and the other half
+ placed after the child.
<dt><dfn id=flex-align-baseline>baseline</dfn>
<dd>
<p>If this child's inline axis is parallel to <a
- href="#main-axis"><em>main axis</em></a> of the flexbox, the baseline of
+ href="#main-axis"><i>main axis</i></a> of the flexbox, the baseline of
the child box is aligned with baselined of all other child boxes that
meet the same criteria. Baseline of each child box is determined in the
same way as when it is placed inline (as inline-block, inline-table,
@@ -1141,12 +1142,11 @@
‘<a href="#flex-line-pack-after"><code
class=property>after</code></a>’ edge.
- <p>If the child box <em>inline axis </em>is orthognal to flexbox <a
- href="#main-axis"><em>main axis</em></a>, then <span>‘<a
- href="#flex-align-baseline"><code
- class=property>baseline</code></a>’</span> is interpreted as
- <span>‘<a href="#flex-pack-center"><code
- class=property>center</code></a>’</span>.</p>
+ <p>If the child box <i>inline axis</i> is orthogonal to flexbox <a
+ href="#main-axis"><i>main axis</i></a>, then ‘<a
+ href="#flex-align-baseline"><code class=css>baseline</code></a>’
+ acts identically to ‘<a href="#flex-pack-center"><code
+ class=css>center</code></a>’.</p>
<dt><dfn id=flex-align-stretch>stretch</dfn>
@@ -1154,43 +1154,42 @@
However, note the text below.
</dl>
- <p>Direction of the <a href="#cross-axis"><em>cross axis </em></a>is
+ <p>Direction of the <a href="#cross-axis"><i>cross axis</i></a> is
determined as follows:
- <p>In multi-line flexbox, <a href="#cross-axis"><em>cross axis
- </em></a>points in the direction of wrapping (the side where lines are
- added)
+ <p>In multi-line flexbox, <a href="#cross-axis"><i>cross axis</i></a>
+ points in the direction of wrapping (the side where lines are added)
- <p>In single-line flexbox, the direction of <a href="#cross-axis"><em>cross
- axis</em></a> is determined by the computed value of writing mode of the
+ <p>In single-line flexbox, the direction of <a href="#cross-axis"><i>cross
+ axis</i></a> is determined by the computed value of writing mode of the
flexbox element.
<ul>
- <li> If flexbox's <a href="#main-axis"><em>main axis </em></a>is parallel
- to inline axis of the writing mode, <a href="#cross-axis"><em>cross
- axis</em></a> points in the direction of block flow.
+ <li> If flexbox's <a href="#main-axis"><i>main axis</i></a> is parallel to
+ inline axis of the writing mode, <a href="#cross-axis"><i>cross
+ axis</i></a> points in the direction of block flow.
- <li> If flexbox's <a href="#main-axis"><em>main axis </em></a>is parallel
- to block flow axis of the writing mode, <a href="#cross-axis"><em>cross
- axis</em></a> points in the direction of inline flow
+ <li> If flexbox's <a href="#main-axis"><i>main axis</i></a> is parallel to
+ block flow axis of the writing mode, <a href="#cross-axis"><i>cross
+ axis</i></a> points in the direction of inline flow
</ul>
<p>The following rules should be applied when determining the size of child
- boxes along the<a href="#cross-axis"><em> cross axis</em></a>. Exceptions
+ boxes along the <a href="#cross-axis"><i> cross axis</i></a>. Exceptions
to these rules are noted under each of the possible values of ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
below.
- <p>First, the <a href="#cross-axis"><em>cross axis </em></a>size of content
+ <p>First, the <a href="#cross-axis"><i>cross axis</i></a> size of content
box of the flexbox has to be calculated. If computed value of flexbox's
- width or height (whichever is along the<a href="#cross-axis"><em> cross
- axis</em></a>), that value is used. If it is ‘<code
+ width or height (whichever is along the <a href="#cross-axis"><i>cross
+ axis</i></a>), that value is used. If it is ‘<code
class=property>auto</code>’, the size is determined by flexbox
items, as follows:
<ol>
- <li><em>Cross-axis s</em>izes of margin boxes of all children in are
- checked and the biggest is selected.
+ <li><i>Cross-axis</i> sizes of margin boxes of all children in are checked
+ and the biggest is selected.
<li>If there are any children with baseline alignemnt, biggest ascent
(including its margin-before) and biggest descent (including its
@@ -1463,9 +1462,9 @@
<dd>The first line of child boxes is placed along the ‘<a
href="#flex-line-pack-before"><code
class=property>before</code></a>’ edge of the content box (as
- determined by direction of <a href="#cross-axis"><em>cross
- axis</em></a>), and additional lines are placed afterward with no extra
- spacing between them.
+ determined by direction of <a href="#cross-axis"><i>cross axis</i></a>),
+ and additional lines are placed afterward with no extra spacing between
+ them.
<dt><dfn id=flex-line-pack-after>after</dfn>
@@ -1504,7 +1503,7 @@
<p>The following algorithms detail precisely how to determine the
dimensions and positions of a flexbox and its contents, and how to resolve
- flexible lengths used on <a href="#flexbox-item"><i>flexbox item</i></a>s
+ flexible lengths used on <a href="#flexbox-item"><i>flexbox items</i></a>
into definite lengths.
<p>The algorithm described here is designed to be clear, but not
@@ -1530,7 +1529,7 @@
<dd>The inner width or height of the flexbox (depending on the
distribution round), which will be used to calculate the sizes of the <a
- href="#flexbox-item"><i>flexbox item</i></a>s.
+ href="#flexbox-item"><i>flexbox items</i></a>.
<dt><dfn id=available-free-space>available free space</dfn>
@@ -1573,7 +1572,7 @@
<li>
<p>Resolve all <a href="#relevant-length"><i>relevant length</i></a>s on
- the flexbox and its <a href="#flexbox-item"><i>flexbox item</i></a>s
+ the flexbox and its <a href="#flexbox-item"><i>flexbox items</i></a>
into <dfn id=flex-tuples>flex tuples</dfn> of [minimum size, maximum
size, preferred size, positive flex, negative flex].</p>
@@ -2278,6 +2277,9 @@
<li>flexbox item, <a href="#flexbox-item" title="flexbox
item"><strong>1.</strong></a>
+ <li>flexbox items, <a href="#flexbox-item" title="flexbox
+ items"><strong>1.</strong></a>
+
<li>flex-flow, <a href="#flex-flow"
title=flex-flow><strong>4.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.35
retrieving revision 1.36
diff -u -d -r1.35 -r1.36
--- Overview.src.html 20 Aug 2011 00:29:55 -0000 1.35
+++ Overview.src.html 20 Aug 2011 00:47:50 -0000 1.36
@@ -58,13 +58,13 @@
<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> flexbox item</dfn>s. Flexbox may directly contain inline children or out of flow content, in which case flexbox item fixup is performed, as described below.</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>. Flexbox may directly contain inline children or out of flow content, in which case flexbox item fixup is performed, as described below.</p>
- <p><em>Flexbox items </em>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.</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.</p>
<p>If <dfn>multiline</dfn> option is enabled (by including one of 'wrap-' keywords in 'flex-flow' property), flexbox items flow in two dimensions, wrapping lines of items similarly to wrapping lines of text. The two-dimensional flow can have any combination of directions, matching current writing mode (logical), independent of writing mode (physical) or mixed. </p>
- <p>In flexbox, the term <dfn>main axis</dfn> refers to the primary direction of flow of <i>flexbox item</i>s, 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>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>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>
@@ -107,7 +107,7 @@
<h2 id='flex-items'>
Flexbox Items</h2>
- <p>Flexbox layout algorithm operates on <i>flexbox item</i>s, which are boxes that satisfy at least one of the following criteria:</p>
+ <p>Flexbox layout algorithm operates on <i>flexbox items</i>, which are boxes that satisfy at least one of the following criteria:</p>
<ol>
<li>Immediate block-level children of flexbox</li>
@@ -219,7 +219,7 @@
</tbody>
</table>
- <p>The 'flexbox-flow' property specifies how <i>flexbox item</i>s are placed in the flexbox. The value consists of one or two keywords: the first sets the orientation and direction of the flexbox's <i>main axis</i>, while the second, if specified, marks the flexbox as being multiline and sets the direction in which new lines are stacked.</p>
+ <p>The 'flexbox-flow' property specifies how <i>flexbox items</i> are placed in the flexbox. The value consists of one or two keywords: the first sets the orientation and direction of the flexbox's <i>main axis</i>, while the second, if specified, marks the flexbox as being multiline and sets the direction in which new lines are stacked.</p>
<p>The main directions affect how <i>flexbox items</i> are arranged, and how they respond to the 'flex-pack' property. They can be set with either logical directions (relative to the writing mode) or physical directions:</p>
@@ -317,7 +317,7 @@
<h2 id='flex-order'>
Display Order: the 'flex-order' property</h2>
- <p><i>flexbox item</i>s are, by default, displayed and laid out in the same order as they appear in the source document. The 'flex-order' property may be used to change this ordering.</p>
+ <p><i>flexbox items</i> are, by default, displayed and laid out in the same order as they appear in the source document. The 'flex-order' property may be used to change this ordering.</p>
<table class=propdef>
<tr>
@@ -331,7 +331,7 @@
<td>1
<tr>
<th>Applies to:
- <td><i>flexbox item</i>s</td>
+ <td><i>flexbox items</i></td>
<tr>
<th>Inherited:
<td>no
@@ -343,9 +343,9 @@
<td>visual
</table>
- <p>The 'flex-order' property assigns <i>flexbox item</i>s to ordinal groups.</p>
+ <p>The 'flex-order' property assigns <i>flexbox items</i> to ordinal groups.</p>
- <p>Ordinal groups control the order in which <i>flexbox item</i>s appear. A flexbox will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document.
+ <p>Ordinal groups control the order in which <i>flexbox items</i> appear. A flexbox will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document.
<div class=example>
<p>This example shows how ordinal groups might be used.</p>
@@ -370,7 +370,7 @@
<h2 id='flexibility'>
Flexibility</h2>
- <p>The defining aspect of flexbox layout is the ability to make various lengths of the <i>flexbox item</i>s flexible. The 'width', 'height', 'padding', and 'margin' properties of a <i>flexbox item</i> can all be made flexible. Paddings and margins are made flexible by setting their value to ''auto'', while the width and height of a box can be controlled more precisely with the ''flex()'' function, defined below.</p>
+ <p>The defining aspect of flexbox layout is the ability to make various lengths of the <i>flexbox items</i> flexible. The 'width', 'height', 'padding', and 'margin' properties of a <i>flexbox item</i> can all be made flexible. Paddings and margins are made flexible by setting their value to ''auto'', while the width and height of a box can be controlled more precisely with the ''flex()'' function, defined below.</p>
<div class=example>
<p class=issue>TODO: Examples!</p>
@@ -380,7 +380,7 @@
<h3 id='resolving-flexible-lengths'>
Resolving Flexible Lengths</h3>
- <p>Flexbox layout resolves a <i>flexible length</i> into a definite length by first collecting all the lengths, flexible or inflexible, that will share some space. For example, for a horizontal flexbox, the lengths of the left and right margins, left and right borders, left and right paddings, and widths of all <i>flexbox item</i>s share the width of the flexbox itself. Conversely, each <i title="flexbox item">flexbox item's</i> vertical margins, borders, padding, and height individually share the height of the flexbox.</p>
+ <p>Flexbox layout resolves a <i>flexible length</i> into a definite length by first collecting all the lengths, flexible or inflexible, that will share some space. For example, for a horizontal flexbox, the lengths of the left and right margins, left and right borders, left and right paddings, and widths of all <i>flexbox items</i> share the width of the flexbox itself. Conversely, each <i title="flexbox item">flexbox item's</i> vertical margins, borders, padding, and height individually share the height of the flexbox.</p>
<div class=figure>
<p class="caption issue">TODO: Diagram showing the relevant lengths in each axis.</p>
@@ -444,9 +444,9 @@
<p class="issue">Note change from previous draft: default/unspecified are the initial values: still 'auto' for width/height, 0 if it is ever applied to margins and padding; 0 for positive flexibility (was 1 in previous draft).</p>
- <p class='note'>Note that, while ''0'' <length> is normally allowed to be specified without a unit suffix, in flex() function it is ambiguous, as it is also an acceptable value for flexibility. All ambiguous cases are resolved with preference to flexibility, thus unitless "0" can only be applied to <em>preferred size </em>when three vaues are specified and "0" is the last one.</p>
+ <p class='note'>Note that, while ''0'' <length> is normally allowed to be specified without a unit suffix, in flex() function it is ambiguous, as it is also an acceptable value for flexibility. All ambiguous cases are resolved with preference to flexibility, thus unitless "0" can only be applied to <i>preferred size</i> when three vaues are specified and "0" is the last one.</p>
- <p>User agents that allow non-zero length values without unit suffix in "quirks mode" may also accept a non-zero positive number as the <em>preferred size </em> in pixels when in "quirks mode" and when it is the third value in flex() function with three values.</p>
+ <p>User agents that allow non-zero length values without unit suffix in "quirks mode" may also accept a non-zero positive number as the <i>preferred size</i> in pixels when in "quirks mode" and when it is the third value in flex() function with three values.</p>
<h3 id="flexible-margins">
@@ -490,7 +490,7 @@
<td>visual
</table>
- <p>Between and around the margins of <i>flexbox item</i>s there are additional
+ <p>Between and around the margins of <i>flexbox items</i> there are additional
flexible lengths, called <dfn>packing space</dfn>. Packing space can absorb
leftover free space in a flexbox if there aren't any other <i>flexible length</i>s,
or if all the <i>flexible length</i>s have reached their maximum size. The
@@ -498,16 +498,16 @@
<dl>
<dt><dfn id='flex-pack-start'>start</dfn></dt>
- <dd><i>flexbox item</i>s are packed toward the start of the flexbox. The last packing space (between the margin of the last flexbox item and the edge of the flexbox) must absorb all leftover free space; all other packing spaces must have a length of ''0''.</dd>
+ <dd><i>flexbox items</i> are packed toward the start of the flexbox. The last packing space (between the margin of the last flexbox item and the edge of the flexbox) must absorb all leftover free space; all other packing spaces must have a length of ''0''.</dd>
<dt><dfn id='flex-pack-end'>end</dfn></dt>
- <dd><i>flexbox item</i>s are packed toward the end of the flexbox. The first packing space (between the edge of the flexbox and the margin of the first flexbox item) must absorb all leftover free space; all other packing spaces must have a length of ''0''.</dd>
+ <dd><i>flexbox items</i> are packed toward the end of the flexbox. The first packing space (between the edge of the flexbox and the margin of the first flexbox item) must absorb all leftover free space; all other packing spaces must have a length of ''0''.</dd>
<dt><dfn id='flex-pack-center'>center</dfn></dt>
- <dd><i>flexbox item</i>s are packed toward the center of the flexbox. The first and last packing spaces must equally split all leftover free space; all other packing spaces must have a length of ''0''.</dd>
+ <dd><i>flexbox items</i> are packed toward the center of the flexbox. The first and last packing spaces must equally split all leftover free space; all other packing spaces must have a length of ''0''.</dd>
<dt><dfn id='flex-pack-justify'>justify</dfn></dt>
- <dd><i>flexbox item</i>s are evenly distributed through the flexbox. The first and last packing spaces must have a length of ''0''; all other packing spaces must equally split all leftover free space.</dd>
+ <dd><i>flexbox items</i> are evenly distributed through the flexbox. The first and last packing spaces must have a length of ''0''; all other packing spaces must equally split all leftover free space.</dd>
</dl>
<div class=figure>
@@ -523,7 +523,7 @@
<h2 id='flex-align'>
The 'flex-align' property</h2>
- <p>Sizing and positioning of <em>flexbox item</em>s along the <em>cross axis</em> of flexbox is controlled by the 'flex-align' property.</p>
+ <p>Sizing and positioning of <i>flexbox items</i> along the <i>cross axis</i> of flexbox is controlled by the 'flex-align' property.</p>
<table class=propdef>
<tr>
@@ -549,51 +549,51 @@
<td>visual
</table>
- <p>When the size of the containing box along<em> cross axis </em>is larger than the size of a child, extra space will be available. The 'flex-align' property specifies how flexbox item is placed along the <em>cross axis</em>, and where the extra space, if any, is positioned. </p>
+ <p>When the size of the containing box along <i>cross axis</i> is larger than the size of a child, extra space will be available. The 'flex-align' property specifies how flexbox item is placed along the <i>cross axis</i>, and where the extra space, if any, is positioned. </p>
<p>The values of this property have the following meanings. See text for more specifics as to how children are positioned. </p>
<dl>
<dt><dfn id="flex-align-before">before</dfn></dt>
- <dd>The 'before' edge of the child box along<em> cross axis </em>is aligned with 'before' edge of the flexbox content box. See text for explanation of how direction of <em>cross axis</em> is determined.</dd>
+ <dd>The 'before' edge of the child box along <i>cross axis</i >is aligned with 'before' edge of the flexbox content box. See text for explanation of how direction of <i>cross axis</i> is determined.</dd>
<dt><dfn id="flex-align-after">after</dfn></dt>
- <dd>The 'after' edge of the child box along<em> cross axis </em>is aligned with 'after' edge of the flexbox content box. See text for explanation of how direction of <em>cross axis</em> is determined.</dd>
+ <dd>The 'after' edge of the child box along <i>cross axis</i>is aligned with 'after' edge of the flexbox content box. See text for explanation of how direction of <i>cross axis</i> is determined.</dd>
<dt><dfn id="flex-align-middle">middle</dfn></dt>
- <dd>Any extra space along the<em> cross axis </em>is divided evenly, with half placed before the child and the other half placed after the child.</dd>
+ <dd>Any extra space along the <i>cross axis</i> is divided evenly, with half placed before the child and the other half placed after the child.</dd>
<dt><dfn id="flex-align-baseline">baseline</dfn></dt>
<dd>
- <p>If this child's inline axis is parallel to <em>main axis</em> of the flexbox, the baseline of the child box is aligned with baselined of all other child boxes that meet the same criteria. Baseline of each child box is determined in the same way as when it is placed inline (as inline-block, inline-table, etc.).</p>
+ <p>If this child's inline axis is parallel to <i>main axis</i> of the flexbox, the baseline of the child box is aligned with baselined of all other child boxes that meet the same criteria. Baseline of each child box is determined in the same way as when it is placed inline (as inline-block, inline-table, etc.).</p>
<p>The children participating in baseline alignment, once aligned on their baselines, should then be placed into the box so that the child with the earliest extent margin has its 'before' margin edge flush with the 'before' edge of flexbox's content area. If the flexbox does not have an ''auto'' height, overflow will always be on the 'after' edge.
- <p>If the child box <em>inline axis </em>is orthognal to flexbox <em>main axis</em>, then <span >'baseline'</span> is interpreted as <span >'center'</span>.</p>
+ <p>If the child box <i>inline axis</i> is orthogonal to flexbox <i>main axis</i>, then ''baseline'' acts identically to ''center''.</p>
</dd>
<dt><dfn id="flex-align-stretch">stretch</dfn></dt>
<dd>The height of each child is adjusted to that of the containing block. However, note the text below.
</dl>
- <p>Direction of the <em>cross axis </em>is determined as follows:</p>
+ <p>Direction of the <i>cross axis</i> is determined as follows:</p>
- <p>In multi-line flexbox, <em>cross axis </em>points in the direction of wrapping (the side where lines are added)</p>
+ <p>In multi-line flexbox, <i>cross axis</i> points in the direction of wrapping (the side where lines are added)</p>
- <p>In single-line flexbox, the direction of <em>cross axis</em> is determined by the computed value of writing mode of the flexbox element.</p>
+ <p>In single-line flexbox, the direction of <i>cross axis</i> is determined by the computed value of writing mode of the flexbox element.</p>
<ul>
- <li> If flexbox's <em>main axis </em>is parallel to inline axis of the writing mode, <em>cross axis</em> points in the direction of block flow.</li>
+ <li> If flexbox's <i>main axis</i> is parallel to inline axis of the writing mode, <i>cross axis</i> points in the direction of block flow.</li>
- <li> If flexbox's <em>main axis </em>is parallel to block flow axis of the writing mode, <em>cross axis</em> points in the direction of inline flow</li>
+ <li> If flexbox's <i>main axis</i> is parallel to block flow axis of the writing mode, <i>cross axis</i> points in the direction of inline flow</li>
</ul>
- <p>The following rules should be applied when determining the size of child boxes along the<em> cross axis</em>. Exceptions to these rules are noted under each of the possible values of 'flex-align' below.</p>
+ <p>The following rules should be applied when determining the size of child boxes along the <i> cross axis</i>. Exceptions to these rules are noted under each of the possible values of 'flex-align' below.</p>
- <p>First, the <em>cross axis </em>size of content box of the flexbox has to be calculated. If computed value of flexbox's width or height (whichever is along the<em> cross axis</em>), that value is used. If it is 'auto', the size is determined by flexbox items, as follows:</p>
+ <p>First, the <i>cross axis</i> size of content box of the flexbox has to be calculated. If computed value of flexbox's width or height (whichever is along the <i>cross axis</i>), that value is used. If it is 'auto', the size is determined by flexbox items, as follows:</p>
<ol>
- <li><em>Cross-axis s</em>izes of margin boxes of all children in are checked and the biggest is selected.</li>
+ <li><i>Cross-axis</i> sizes of margin boxes of all children in are checked and the biggest is selected.</li>
<li>If there are any children with baseline alignemnt, biggest ascent (including its margin-before) and biggest descent (including its margin-after) are found.</li>
@@ -745,7 +745,7 @@
<dl>
<dt><dfn id='flex-line-pack-before'>before</dfn></dt>
- <dd>The first line of child boxes is placed along the 'before' edge of the content box (as determined by direction of <em>cross axis</em>), and additional lines are placed afterward with no extra spacing between them.</dd>
+ <dd>The first line of child boxes is placed along the 'before' edge of the content box (as determined by direction of <i>cross axis</i>), and additional lines are placed afterward with no extra spacing between them.</dd>
<dt><dfn id='flex-line-pack-after'>after</dfn></dt>
<dd>Lines of child boxes are placed with no extra spacing between and 'after' edge of the last line is aligned with 'after' edge of the content box.</dd>
@@ -765,7 +765,7 @@
<p class="issue">IS THIS SECTION NECESSARY? It may be useful for implementors as guidance, but it is not normative. The spec describes the result, this describes the process - one should be enough, and the description of the result is not specific enough, it needs to be fixed.</p>
- <p>The following algorithms detail precisely how to determine the dimensions and positions of a flexbox and its contents, and how to resolve flexible lengths used on <i>flexbox item</i>s into definite lengths.</p>
+ <p>The following algorithms detail precisely how to determine the dimensions and positions of a flexbox and its contents, and how to resolve flexible lengths used on <i>flexbox items</i> into definite lengths.</p>
<p>The algorithm described here is designed to be clear, but not necessarily efficient. Implementations may use different algorithms, but they must generate the same results as this algorithm.</p>
@@ -779,7 +779,7 @@
<dd>A 5-tuple of information about a flexible length, containing a minimum size, a maximum size, a preferred size, a positive flexibility, and a negative flexibility.</dd>
<dt><dfn>total free space</dfn></dt>
- <dd>The inner width or height of the flexbox (depending on the distribution round), which will be used to calculate the sizes of the <i>flexbox item</i>s.</dd>
+ <dd>The inner width or height of the flexbox (depending on the distribution round), which will be used to calculate the sizes of the <i>flexbox items</i>.</dd>
<dt><dfn>available free space</dfn></dt>
<dd>The <i>total free space</i> minus the sum of the preferred sizes of all the relevant lengths, which is used to resolve <i>flex tuple</i>s into inflexible lengths.</dd>
@@ -803,7 +803,7 @@
<li>Determine the measure of the flexbox. Flexboxes are sized like shrinkwrapped blocks (if ''display:flexbox'' is used) or inline-blocks (if ''display:inline-flexbox'' is used). A horizontal flexbox's measure is its width, while a vertical flexbox's measure is its height. <span class=issue>This is wrong. In vertical flexbox with auto sizing, height can't be calculated before width (assuming horizontal flow). Calculation has to be width-then-height, not measure-then-length.</span></li>
<li>
- <p>Resolve all <i>relevant length</i>s on the flexbox and its <i>flexbox item</i>s into <dfn>flex tuples</dfn> of [minimum size, maximum size, preferred size, positive flex, negative flex].</p>
+ <p>Resolve all <i>relevant length</i>s on the flexbox and its <i>flexbox items</i> into <dfn>flex tuples</dfn> of [minimum size, maximum size, preferred size, positive flex, negative flex].</p>
<dl>
<dt>For margins and padding:</dt>
Received on Saturday, 20 August 2011 00:48:08 UTC