- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 27 Aug 2011 00:12:28 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv26002
Modified Files:
Overview.html Overview.src.html
Log Message:
Rewrite of flex-align.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.48
retrieving revision 1.49
diff -u -d -r1.48 -r1.49
--- Overview.html 25 Aug 2011 23:08:45 -0000 1.48
+++ Overview.html 27 Aug 2011 00:12:26 -0000 1.49
@@ -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, 25 August 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 27 August 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110825/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110825/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110827/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110827/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -281,7 +281,12 @@
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
+ 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.
@@ -292,11 +297,15 @@
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.
+ 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.
<p>The contents of a flexbox can be easily and powerfully manipulated with
a handful of properties. Most significantly, <a
@@ -1109,12 +1118,12 @@
<p>Between and around <a href="#flexbox-item"><i>flexbox items</i></a>
there are additional flexible lengths called <dfn id=packing-space
- title="packing space|packing spaces">packing spaces</dfn>. <a
- href="#packing-space"><i>Packing spaces</i></a> can absorb leftover free
- space in a flexbox line if there aren't any other <a
- href="#flexible-length0"><i>flexible lengths</i></a>, or if all the <a
- href="#flexible-length0"><i>flexible lengths</i></a> have reached their
- maximum size. The ‘<a href="#flex-pack0"><code
+ title="packing space|packing spaces">packing spaces</dfn>. After the
+ flexbox items have a chance <a href="#packing-space"><i>Packing
+ spaces</i></a> can absorb leftover free space in a flexbox line if there
+ aren't any other <a href="#flexible-length0"><i>flexible lengths</i></a>,
+ or if all the <a href="#flexible-length0"><i>flexible lengths</i></a> have
+ reached their maximum size. The ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’ property defines the
flexibility of <a href="#packing-space"><i>packing spaces</i></a>:
@@ -1185,7 +1194,7 @@
<tr>
<th>Value:
- <td>before | after | middle | stretch | baseline
+ <td>start | end | center | baseline | stretch
<tr>
<th>Initial:
@@ -1195,7 +1204,7 @@
<tr>
<th>Applies to:
- <td>flexbox items
+ <td><a href="#flexbox-item"><i>flexbox items</i></a>
<tr>
<th>Inherited:
@@ -1213,216 +1222,92 @@
<td>visual
</table>
- <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"><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.
+ <p>The ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’ property aligns <a
+ href="#flexbox-item"><i>flexbox items</i></a> within the current line of
+ the flexbox — essentially the same thing as ‘<a
+ href="#flex-pack0"><code class=property>flex-pack</code></a>’, only
+ in the <a href="#cross-axis"><i>cross axis</i></a>.
<dl>
<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"><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"><i>cross axis</i></a> is determined.
+ <dd>The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
+ <a href="#flexbox-item"><i>flexbox item</i></a> is placed flush with the
+ <a href="#cross-start"><i>cross-start</i></a> edge of the line.
<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"><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"><i>cross axis</i></a> is determined.
+ <dd>The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a
+ href="#flexbox-item"><i>flexbox item</i></a> is placed flush with the <a
+ href="#cross-end"><i>cross-end</i></a> edge of the line.
<dt><dfn id=flex-align-middle>middle</dfn>
- <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.
+ <dd>The <a href="#flexbox-item"><i>flexbox item's</i></a> margin box is
+ centered in the <a href="#cross-axis"><i>cross axis</i></a> within the
+ line.
<dt><dfn id=flex-align-baseline>baseline</dfn>
<dd>
- <p>If this child's inline axis is parallel to <a
- 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,
- 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 ‘<a
- href="#flex-line-pack-before"><code
- class=property>before</code></a>’ margin edge flush with the
- ‘<a href="#flex-line-pack-before"><code
- class=property>before</code></a>’ edge of flexbox's content area.
- If the flexbox does not have an ‘<code
- class=css>auto</code>’ height, overflow will always be on the
- ‘<a href="#flex-line-pack-after"><code
- class=property>after</code></a>’ edge.
+ <p>If the <a href="#flexbox-item"><i>flexbox item's</i></a> inline axis
+ is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this
+ value is identical to ‘<a href="#flex-pack-start"><code
+ class=css>start</code></a>’.</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>
+ <p>Otherwise, all <a href="#flexbox-item"><i>flexbox items</i></a> on the
+ line with ‘<code class=css>flex-align:baseline</code>’ that
+ don't run afoul of the previous paragraph are aligned such that their
+ baselines align, and the item with the largest distance between its
+ baseline and its <a href="#cross-start"><i>cross-start</i></a> margin
+ edge is placed flush against the <a
+ href="#cross-start"><i>cross-start</i></a> edge of the line.</p>
<dt><dfn id=flex-align-stretch>stretch</dfn>
- <dd>The height of each child is adjusted to that of the containing block.
- However, note the text below.
- </dl>
-
- <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"><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"><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"><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"><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"><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"><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"><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><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
- margin-after) are found.
-
- <li>Flexbox's content box size is the size its biggest child or the sum of
- the biggest ascent and biggest descent, whichever is larger.
- </ol>
-
- <p>All normal flow children of boxes will attempt to satisfy the following
- sizing equation when placed inside vertical boxes if and only if at least
- one of the specified values is auto:
-
- <p>‘<code class=property>margin-left</code>’ + ‘<code
- class=property>border-left-width</code>’ + ‘<code
- class=property>padding-left</code>’ + ‘<code
- class=property>width</code>’ + ‘<code
- class=property>padding-right</code>’ + ‘<code
- class=property>border-right-width</code>’ + ‘<code
- class=property>margin-right</code>’ = width of containing box
-
- <p>and a similar equation for height when placed inside horizontal boxes:
-
- <p>‘<code class=property>margin-top</code>’ + ‘<code
- class=property>border-top-width</code>’ + ‘<code
- class=property>padding-top</code>’ + ‘<code
- class=property>height</code>’ + ‘<code
- class=property>padding-bottom</code>’ + ‘<code
- class=property>border-bottom-width</code>’ + ‘<code
- class=property>margin-bottom</code>’ = height of containing box
-
- <p>If all the values in the equation are specified (i.e., if there are no
- auto values), then the equation above does not apply, and the specified
- values should be used. If applying the equation results in a negative
- value for width/height, then that value is set to 0, and those values
- should be used.
-
- <p>If the value of ‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ is ‘<a
- href="#flex-align-stretch"><code class=css>stretch</code></a>’, then
- elements obey the sizing rules specified above. This is the default value.
- If both width/height and one or both margin values are ‘<code
- class=property>auto</code>’, the ‘<code
- class=property>auto</code>’ margins are set to 0 and the equation is
- used to find a value for width/height. Otherwise, if both margins are
- ‘<code class=property>auto</code>’, then the equation is
- solved under the additional constraint that the two margins must get the
- same value. If neither the width/height or either margin is auto, then the
- extra space is positioned as if flex-align was ‘<a
- href="#flex-line-pack-before"><code
- class=property>before</code></a>’.
-
- <p>If the value of ‘<a href="#flex-align0"><code
- class=property>flex-align</code></a>’ is ‘<a
- href="#flex-line-pack-before"><code class=css>before</code></a>’,
- ‘<a href="#flex-line-pack-after"><code
- class=css>after</code></a>’, ‘<a
- href="#flex-line-pack-middle"><code class=css>middle</code></a>’, or
- ‘<a href="#flex-align-baseline"><code
- class=css>baseline</code></a>’, and a value of ‘<code
- class=css>auto</code>’ is specified for width/height, then the
- intrinsic size (or shrink to fit size) of the element should be used. If
- one margin has the value of auto, then the equations above should be used.
- If both margins have a value of auto then the above equations should be
- used, with the space being divided evenly between the two margins. These
- rules are similar to the rules for replaced elements inside blocks.
-
- <p>If the above would cause the width or height to greater than the
- computed maximum width or height, then the width or height is set to the
- maximum width or height, and the auto margins increased by the extra
- amount left over. If both margins are auto, they should both be increased
- by the same amount. If neither margin is auto, the extra space is placed
- as necessary depending on the flex-align value.
+ <dd>
+ <p>If the <a href="#cross-size-property"><i>cross size property</i></a>
+ of the <a href="#flexbox-item"><i>flexbox item</i></a> is anything other
+ than ‘<code class=css>auto</code>’, this value is identical
+ to ‘<a href="#flex-pack-start"><code
+ class=css>start</code></a>’.</p>
- <p>Once the sizes are computed, the margin boxes of the elements should be
- aligned at the before, middle, baseline or after edge of the box.
+ <p>Otherwise, this value causes the <a
+ href="#cross-size-property"><i>cross size property</i></a> of the <a
+ href="#flexbox-item"><i>flexbox item</i></a> to resolve to the length
+ necessary to make the <a href="#cross-size"><i>cross size</i></a> of the
+ item's margin box the same size as the line.</p>
+ </dl>
<div class=example>
- <p>A vertical flexbox can be used to emulate the functionality of HTML's
- <code><center></code> element:</p>
+ <p>By using a vertical flexbox and ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’, we can emulate the
+ functionality of HTML's <code><center></code> element:</p>
<pre><div>
- <span>foo foo foo foo</span>
- <span>bar bar<br>bar bar</span>
- <span>foo foo foo foo foo foo foo foo foo foo foo foo</span>
+ <div>foo foo foo foo</div>
+ <div>bar bar<br>bar bar</div>
+ <div>foo foo foo foo foo foo foo foo foo foo foo foo</div>
</div>
<style>
div {
display: flexbox;
- flex-direction: tb;
+ flex-flow: column;
width: 200px;
}
- span {/* /* */ */
- margin: 0 auto;
+ div > div {
+ flex-align: center;
}
</style></pre>
<p><img alt="" src="images/basic-vertical-flexbox.png"></p>
</div>
- <p class=issue>TODO: examples, with pictures
+ <p class=issue>More examples for the other alignment values!
- <p class=issue>TODO: alignment rules should be compatible with
- css3-grid-layout, if possible
+ <p>The precise effects of this property are articulated in the <a
+ href="#layout-algorithm">Layout Algorithm</a> section.
<h2 id=multiline><span class=secno>6. </span> Multi-line flexbox</h2>
@@ -2229,7 +2114,7 @@
<tr>
<th><a class=property href="#flex-align0">flex-align</a>
- <td>before | after | middle | stretch | baseline
+ <td>start | end | center | baseline | stretch
<td>stretch
@@ -2343,6 +2228,9 @@
<li>cross size, <a href="#cross-size" title="cross
size"><strong>2.</strong></a>
+ <li>cross size property, <a href="#cross-size-property" title="cross size
+ property"><strong>2.</strong></a>
+
<li>cross-start, <a href="#cross-start"
title=cross-start><strong>2.</strong></a>
@@ -2428,6 +2316,9 @@
<li>main size, <a href="#main-size" title="main
size"><strong>2.</strong></a>
+ <li>main size property, <a href="#main-size-property" title="main size
+ property"><strong>2.</strong></a>
+
<li>main-start, <a href="#main-start"
title=main-start><strong>2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.47
retrieving revision 1.48
diff -u -d -r1.47 -r1.48
--- Overview.src.html 25 Aug 2011 23:08:45 -0000 1.47
+++ Overview.src.html 27 Aug 2011 00:12:26 -0000 1.48
@@ -65,9 +65,9 @@
<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 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>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>. 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>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 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>
<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>
@@ -497,7 +497,7 @@
<td>visual
</table>
- <p>Between and around <i>flexbox items</i> there are additional flexible lengths called <dfn id="packing-space" title="packing space|packing spaces">packing spaces</dfn>. <i>Packing spaces</i> can absorb leftover free space in a flexbox line if there aren't any other <i>flexible lengths</i>, or if all the <i>flexible lengths</i> have reached their maximum size. The 'flex-pack' property defines the flexibility of <i>packing spaces</i>:</p>
+ <p>Between and around <i>flexbox items</i> there are additional flexible lengths called <dfn id="packing-space" title="packing space|packing spaces">packing spaces</dfn>. After the flexbox items have a chance <i>Packing spaces</i> can absorb leftover free space in a flexbox line if there aren't any other <i>flexible lengths</i>, or if all the <i>flexible lengths</i> have reached their maximum size. The 'flex-pack' property defines the flexibility of <i>packing spaces</i>:</p>
<dl>
<dt><dfn id='flex-pack-start'>start</dfn></dt>
@@ -529,13 +529,13 @@
<td><dfn>flex-align</dfn>
<tr>
<th>Value:
- <td>before | after | middle | stretch | baseline
+ <td>start | end | center | baseline | stretch
<tr>
<th>Initial:
<td>stretch
<tr>
<th>Applies to:
- <td>flexbox items
+ <td><i>flexbox items</i>
<tr>
<th>Inherited:
<td>no
@@ -547,100 +547,58 @@
<td>visual
</table>
- <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>
+ <p>The 'flex-align' property aligns <i>flexbox items</i> within the current line of the flexbox — essentially the same thing as 'flex-pack', only in the <i>cross axis</i>.</p>
<dl>
<dt><dfn id="flex-align-before">before</dfn></dt>
- <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>
+ <dd>The <i>cross-start</i> margin edge of the <i>flexbox item</i> is placed flush with the <i>cross-start</i> edge of the line.</dd>
<dt><dfn id="flex-align-after">after</dfn></dt>
- <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>
+ <dd>The <i>cross-end</i> margin edge of the <i>flexbox item</i> is placed flush with the <i>cross-end</i> edge of the line.</dd>
<dt><dfn id="flex-align-middle">middle</dfn></dt>
- <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>
+ <dd>The <i>flexbox item's</i> margin box is centered in the <i>cross axis</i> within the line.</dd>
<dt><dfn id="flex-align-baseline">baseline</dfn></dt>
<dd>
- <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 <i>flexbox item's</i> inline axis is the same as the <i>cross axis</i>, this value is identical to ''start''.</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>
+ <p>Otherwise, all <i>flexbox items</i> on the line with ''flex-align:baseline'' that don't run afoul of the previous paragraph are aligned such that their baselines align, and the item with the largest distance between its baseline and its <i>cross-start</i> margin edge is placed flush against the <i>cross-start</i> edge of the line.</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 <i>cross axis</i> is determined as follows:</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 <i>cross axis</i> is determined by the computed value of writing mode of the flexbox element.</p>
-
- <ul>
- <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 <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 <i> cross axis</i>. Exceptions to these rules are noted under each of the possible values of 'flex-align' below.</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><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>
-
- <li>Flexbox's content box size is the size its biggest child or the sum of the biggest ascent and biggest descent, whichever is larger.</li>
- </ol>
-
- <p>All normal flow children of boxes will attempt to satisfy the following sizing equation when placed inside vertical boxes if and only if at least one of the specified values is auto:</p>
-
- <p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing box
-
- <p>and a similar equation for height when placed inside horizontal boxes:
-
- <p>'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing box
-
- <p>If all the values in the equation are specified (i.e., if there are no auto values), then the equation above does not apply, and the specified values should be used. If applying the equation results in a negative value for width/height, then that value is set to 0, and those values should be used.
-
- <p>If the value of 'flex-align' is ''stretch'', then elements obey the sizing rules specified above. This is the default value. If both width/height and one or both margin values are 'auto', the 'auto' margins are set to 0 and the equation is used to find a value for width/height. Otherwise, if both margins are 'auto', then the equation is solved under the additional constraint that the two margins must get the same value. If neither the width/height or either margin is auto, then the extra space is positioned as if flex-align was 'before'.
-
- <p>If the value of 'flex-align' is ''before'', ''after'', ''middle'', or ''baseline'', and a value of ''auto'' is specified for width/height, then the intrinsic size (or shrink to fit size) of the element should be used. If one margin has the value of auto, then the equations above should be used. If both margins have a value of auto then the above equations should be used, with the space being divided evenly between the two margins. These rules are similar to the rules for replaced elements inside blocks.
-
- <p>If the above would cause the width or height to greater than the computed maximum width or height, then the width or height is set to the maximum width or height, and the auto margins increased by the extra amount left over. If both margins are auto, they should both be increased by the same amount. If neither margin is auto, the extra space is placed as necessary depending on the flex-align value.
+ <dd>
+ <p>If the <i>cross size property</i> of the <i>flexbox item</i> is anything other than ''auto'', this value is identical to ''start''.</p>
- <p>Once the sizes are computed, the margin boxes of the elements should be aligned at the before, middle, baseline or after edge of the box.
+ <p>Otherwise, this value causes the <i>cross size property</i> of the <i>flexbox item</i> to resolve to the length necessary to make the <i>cross size</i> of the item's margin box the same size as the line.</p>
+ </dd>
+ </dl>
<div class=example>
- <p>A vertical flexbox can be used to emulate the functionality of HTML's <code><center></code> element:</p>
+ <p>By using a vertical flexbox and 'flex-align', we can emulate the functionality of HTML's <code><center></code> element:</p>
<pre><div>
- <span>foo foo foo foo</span>
- <span>bar bar<br>bar bar</span>
- <span>foo foo foo foo foo foo foo foo foo foo foo foo</span>
+ <div>foo foo foo foo</div>
+ <div>bar bar<br>bar bar</div>
+ <div>foo foo foo foo foo foo foo foo foo foo foo foo</div>
</div>
<style>
div {
display: flexbox;
- flex-direction: tb;
+ flex-flow: column;
width: 200px;
}
- span {/* /* */ */
- margin: 0 auto;
+ div > div {
+ flex-align: center;
}
</style></pre>
<p><img alt="" src="images/basic-vertical-flexbox.png"></p>
</div>
- <p class="issue">TODO: examples, with pictures</p>
+ <p class='issue'>More examples for the other alignment values!</p>
- <p class="issue">TODO: alignment rules should be compatible with css3-grid-layout, if possible</p>
+ <p>The precise effects of this property are articulated in the <a href="#layout-algorithm">Layout Algorithm</a> section.</p>
<h2 id='multiline'>
Received on Saturday, 27 August 2011 00:19:26 UTC