- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 27 Aug 2011 01:44:39 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv2887
Modified Files:
Overview.html Overview.src.html
Log Message:
Rewrote the introduction and example in Multiline
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.52
retrieving revision 1.53
diff -u -d -r1.52 -r1.53
--- Overview.html 27 Aug 2011 01:25:08 -0000 1.52
+++ Overview.html 27 Aug 2011 01:44:37 -0000 1.53
@@ -240,12 +240,12 @@
<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.
+ positions to respond to the available space. If a flexbox is <a
+ href="#multi-line"><i>multi-line</i></a>, the flexbox items flow in two
+ dimensions, wrapping into separate lines in a fashion similar to how text
+ is wrapped into multiple lines. The direction that these lines are stacked
+ in can also be controlled explicitly, relative either to the current
+ writing mode (logical directions) or explicit physical directions.
<h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
@@ -317,10 +317,10 @@
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
+ property. If a flexbox is <a href="#multi-line"><i>multi-line</i></a>, 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="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property.
<p>Similar to other layout modes such as table layout, a flexbox acts like
@@ -519,15 +519,15 @@
in-flow children at all), the static position in the <a
href="#main-axis"><i>main axis</i></a> is based on the value of ‘<a
href="#flex-pack0"><code class=property>flex-pack</code></a>’: if
- the value is ‘<a href="#flex-pack-start"><code
+ the value is ‘<a href="#flex-line-pack-start"><code
class=css>start</code></a>’ or ‘<a
href="#flex-line-pack-distribute"><code
class=css>distribute</code></a>’, it's flush with the <a
href="#main-start"><i>main-start</i></a> edge of the flexbox's content
- box; if the value is ‘<a href="#flex-pack-end"><code
+ box; if the value is ‘<a href="#flex-line-pack-end"><code
class=css>end</code></a>’, it's flush with the <a
href="#main-end"><i>main-end</i></a> edge of the flexbox's content box; if
- the value is ‘<a href="#flex-pack-center"><code
+ the value is ‘<a href="#flex-line-pack-center"><code
class=css>center</code></a>’, it's centered within the flexbox's
content box.
@@ -732,7 +732,7 @@
<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
+ aligned by the ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property.
<p>If the second keyword is omitted, the flexbox is single-line, the <a
@@ -962,9 +962,9 @@
The <a href="#main-size"><i>main size</i></a> of the flexbox's content box
is the <i>available space</i>.
- <p>Second, if the flexbox is <i>multi-line</i>, break the contents across
- multiple lines, as described by the <a href=multiline>Multiline</a>
- chapter.
+ <p>Second, if the flexbox is <a href="#multi-line"><i>multi-line</i></a>,
+ break the contents across multiple lines, as described by the <a
+ href=multiline>Multiline</a> chapter.
<p>Then, for each line in the flexbox, do the following:
@@ -1046,7 +1046,7 @@
been resolved, the ‘<a href="#flex-pack0"><code
class=property>flex-pack</code></a>’, ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’, and
- ‘<a href="#propdef-flex-line-pack"><code
+ ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ properties align the <a
href="#flexbox-item"><i>flexbox items</i></a> and the flexbox's lines
within the flexbox.
@@ -1109,9 +1109,9 @@
class=property>flex-pack</code></a>’ property aligns <a
href="#flexbox-item"><i>flexbox items</i></a> in the <a
href="#main-axis"><i>main axis</i></a> of the current line of the flexbox.
- This is done <a href="#flex-line-pack-after"><em>after</em></a> any
- flexible lengths have been resolved. Typically it helps distribute extra
- free space leftover when either all the <a href="#flexbox-item"><i>flexbox
+ This is done <a href="#flex-align-after"><em>after</em></a> any flexible
+ lengths have been resolved. Typically it helps distribute extra free space
+ leftover when either all the <a href="#flexbox-item"><i>flexbox
items</i></a> on a line are inflexible, or are flexible but have reach
their maximum size, but it also exerts some control over the alignment of
items when they overflow the line.
@@ -1139,7 +1139,7 @@
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
center of the line. If the leftover free-space is negative, this value is
- identical to ‘<a href="#flex-pack-start"><code
+ identical to ‘<a href="#flex-line-pack-start"><code
class=css>start</code></a>’. Otherwise, the <a
href="#flexbox-item"><i>flexbox items</i></a> on the line are placed
flush with each other and aligned in the center of the line, with equal
@@ -1153,17 +1153,17 @@
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are evenly
distributed in the line. If the leftover free-space is negative or there
is only a single <a href="#flexbox-item"><i>flexbox item</i></a> on the
- line, this value is identical to ‘<a href="#flex-pack-start"><code
- class=css>start</code></a>’. Otherwise, the <a
- href="#main-start"><i>main-start</i></a> margin edge of the first <a
- href="#flexbox-item"><i>flexbox item</i></a> on the line is placed flush
- with the <a href="#main-start"><i>main-start</i></a> edge of the line,
- the <a href="#main-end"><i>main-end</i></a> margin edge of the last <a
- href="#flexbox-item"><i>flexbox item</i></a> on the line is placed flush
- with the <a href="#main-end"><i>main-end</i></a> edge of the line, and
- the remaining <a href="#flexbox-item"><i>flexbox items</i></a> on the
- line are distributed so that the empty space between any two adjacent
- items is the same.
+ line, this value is identical to ‘<a
+ href="#flex-line-pack-start"><code class=css>start</code></a>’.
+ Otherwise, the <a href="#main-start"><i>main-start</i></a> margin edge of
+ the first <a href="#flexbox-item"><i>flexbox item</i></a> on the line is
+ placed flush with the <a href="#main-start"><i>main-start</i></a> edge of
+ the line, the <a href="#main-end"><i>main-end</i></a> margin edge of the
+ last <a href="#flexbox-item"><i>flexbox item</i></a> on the line is
+ placed flush with the <a href="#main-end"><i>main-end</i></a> edge of the
+ line, and the remaining <a href="#flexbox-item"><i>flexbox items</i></a>
+ on the line are distributed so that the empty space between any two
+ adjacent items is the same.
</dl>
<div class=example>
@@ -1248,7 +1248,7 @@
<dd>
<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
+ value is identical to ‘<a href="#flex-line-pack-start"><code
class=css>start</code></a>’.</p>
<p>Otherwise, all <a href="#flexbox-item"><i>flexbox items</i></a> on the
@@ -1265,7 +1265,7 @@
<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
+ to ‘<a href="#flex-line-pack-start"><code
class=css>start</code></a>’.</p>
<p>Otherwise, this value causes the <a
@@ -1306,41 +1306,29 @@
<h2 id=multiline><span class=secno>6. </span> Multi-line flexbox</h2>
- <p>If no ‘<code class=property>wrap-</code>’ keyword is
- 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-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
- fit its items on as few lines as possible by shrinking all items down to
- their minimum widths or heights if necessary.
-
- <p>If the items still do not fit on a line after being reduced to their
- minimum widths or heights, then items are moved one by one onto a new
- line, until the items remaining on the previous line fit. This process can
- 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-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
- in that line. No additional space appears between the lines apart from the
- margins on the largest items in each line. For calculating the cross-axis
- size of a line, margins with a computed value of auto should be treated as
- having a value of 0.
+ <p>A flexbox can be either single-line or multi-line, depending on the
+ ‘<a href="#flex-flow0"><code
+ class=property>flex-flow</code></a>’ property. A <dfn
+ id=single-line>single-line</dfn> flexbox lays out all of its children in a
+ single line, even if that would cause the flexbox to overflow its bounds.
+ A <dfn id=multi-line>multi-line</dfn> flexbox breaks its <a
+ href="#flexbox-item"><i>flexbox items</i></a> across multiple lines to
+ avoid overflowing, similar to how text is broken onto a new line when it
+ gets too wide to fit on the existing line. Every line contains at least
+ one <a href="#flexbox-item"><i>flexbox item</i></a>, unless the flexbox
+ itself is completely empty.
- <p>Once the number of lines has been determined, items with non-zero
- flexibility stretch as necessary in an attempt to fill the remaining space
- on the lines. Each line computes flexes independently, so only elements on
- that line are considered when evaluating flex. The packing of elements in
- a line, as specified by the flex-pack property, is also computed
- independently for each line.
+ <p>When additional lines are created, they are stacked in the flexbox in
+ the <a href="#cross-axis"><i>cross axis</i></a>. Each line is completely
+ independent; flexible lengths and the ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ and ‘<a
+ href="#flex-align0"><code class=property>flex-align</code></a>’
+ properties only pay attention to the items on a single line at a time. The
+ size of a line depends on the contents of the lines and the value of the
+ ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’ property. The lines are
+ aligned within a flexbox with the ‘<a href="#flex-line-pack0"><code
+ class=property>flex-line-pack</code></a>’ property.
<div class=example>
<p>This example shows four buttons that do not fit horizontally.</p>
@@ -1348,11 +1336,11 @@
<pre><style>
#div1 {
display: flexbox;
- flex-flow: wrap;
+ flex-flow: row wrap;
width: 300px;
}
button {
- width: flex(80px 1.0);
+ width: flex(80px 1);
}
<style>
@@ -1363,64 +1351,73 @@
<button id="button4">Wildebeest</button>
</div></pre>
- <p>The buttons are shrunk to their minimum widths, in this case 80 pixels.
- This will allow the first three buttons to fit in 240 pixels with 60
- pixels left over of remaining space. Because the box-lines property has a
- specified value of multiple, the fourth button may be moved onto a second
- line.</p>
+ <p>The buttons are first set to their preferred widths, in this case 80
+ pixels. This will allow the first three buttons to fit in 240 pixels with
+ 60 pixels left over of remaining space. Because the ‘<a
+ href="#flex-flow0"><code class=property>flex-flow</code></a>’
+ property specifies a multiline flexbox (due to the ‘<a
+ href="#flex-flow-wrap"><code class=css>wrap</code></a>’ keyword
+ appearing in its value), the flexbox will create an additional line to
+ contain the last button.</p>
<p>Flexibility is applied to each element, separately for each line. The
- first line has 60 pixels of remaining space, so each of the three buttons
- on that line will receive 20 pixels of extra width. The remaining button
- on a line of its own will stretch to the entire width of the containing
- box, or 300 pixels.</p>
+ first line has 60 pixels of remaining space and all of the buttons have
+ the same flexibility, so each of the three buttons on that line will
+ receive 20 pixels of extra width, ending up 100px wide. The remaining
+ button is on a line of its own and will stretch to the entire width of
+ the line, or 300 pixels.</p>
- <div style="width:300px; border:medium solid green">
- <button style="width:100px">Elephant</button>
+ <div style="width:300px; border:medium solid green; overflow: hidden;">
+ <button style="width:100px; float: left;">Elephant</button>
- <button style="width:100px">Tiger</button>
+ <button style="width:100px; float: left;">Tiger</button>
- <button style="width:100px">Antelope</button>
+ <button style="width:100px; float: left;">Antelope</button>
- <button style="width:300px">Wildebeest</button>
+ <button style="width:300px; float: left;">Wildebeest</button>
</div>
<p>If the box was resized, the buttons may rearrange onto different lines
- as necessary. If the style rules in the example above were changed to the
- following:</p>
+ as necessary.</p>
+
+ <p>If the style rules in the example above were changed to the following:</p>
<pre>
#div1 {
display: flexbox;
- flex-flow: wrap;
+ flex-flow: row wrap;
flex-pack: center;
width: 300px;
}
button {
- width: flex(80px 1.0);
+ width: flex(80px 1);
max-width: 90px;
}</pre>
- <p>Now, each of the buttons will only stretch to include an additional 10
- pixels of width, as the maximum width of 90 pixels is only 10 pixels
- larger than the minimum intrinsic width of the buttons. The remaining 30
- pixels of space left over is divided up and placed inside the box outside
- of the buttons, as the value of box-pack is center. The fourth button
- will also appear at 90 pixels wide, centered within the box.</p>
+ <p>Similar to the previous example, the first three buttons will fit on
+ the first line, and the last button will wrap onto a new line. However,
+ when the buttons attempt to flex they can only grow to 90px each, due to
+ their ‘<code class=property>max-width</code>’ property. This
+ leaves 30px of free space on the first line and 210px of free space on
+ the second line. Because ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ is set to ‘<a
+ href="#flex-line-pack-center"><code class=css>center</code></a>’,
+ the buttons will be centered on each line, with the free space split
+ equally on either side.</p>
<div style="width:300px; border:medium solid green; text-align:center;">
- <button style="width:90px">Elephant</button>
+ <button style="width:90px; float: left; margin-left: 15px;">Elephant</button>
- <button style="width:90px">Tiger</button>
+ <button style="width:90px; float: left;">Tiger</button>
- <button style="width:90px">Antelope</button>
+ <button style="width:90px; float: left;">Antelope</button>
<button style="width:90px">Wildebeest</button>
</div>
</div>
<h3 id=flex-line-pack><span class=secno>6.1. </span> ‘<a
- href="#propdef-flex-line-pack"><code
+ href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ property</h3>
<table class=propdef>
@@ -1428,12 +1425,12 @@
<tr>
<th>Name:
- <td><dfn id=propdef-flex-line-pack>flex-line-pack</dfn>
+ <td><dfn id=flex-line-pack0>flex-line-pack</dfn>
<tr>
<th>Value:
- <td>before | after | middle | distribute
+ <td>start | end | center | distribute
<tr>
<th>Initial:
@@ -1466,24 +1463,23 @@
following meanings:
<dl>
- <dt><dfn id=flex-line-pack-before>before</dfn>
+ <dt><dfn id=flex-line-pack-start>start</dfn>
<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"><i>cross axis</i></a>),
- and additional lines are placed afterward with no extra spacing between
- them.
+ href="#flex-align-before"><code class=property>before</code></a>’
+ edge of the content box (as 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>
+ <dt><dfn id=flex-line-pack-end>end</dfn>
<dd>Lines of child boxes are placed with no extra spacing between and
- ‘<a href="#flex-line-pack-after"><code
+ ‘<a href="#flex-align-after"><code
class=property>after</code></a>’ edge of the last line is aligned
- with ‘<a href="#flex-line-pack-after"><code
+ with ‘<a href="#flex-align-after"><code
class=property>after</code></a>’ edge of the content box.
- <dt><dfn id=flex-line-pack-middle>middle</dfn>
+ <dt><dfn id=flex-line-pack-center>center</dfn>
<dd>Lines of child boxes are placed with no space between them and equal
amount of extra space left before first line and after last line.
@@ -1491,13 +1487,13 @@
<dt><dfn id=flex-line-pack-distribute>distribute</dfn>
<dd>The first line of child boxes is aligned with ‘<a
- href="#flex-line-pack-before"><code
- class=property>before</code></a>’ edge of containing box. Lines of
- child boxes are spread with equal amout of empty spaces between each two
- lines, and so that ‘<a href="#flex-line-pack-after"><code
- class=property>after</code></a>’ edge of last line of child boxes
- is aligned with ‘<a href="#flex-line-pack-after"><code
- class=property>after</code></a>’ edge of conaining box.
+ href="#flex-align-before"><code class=property>before</code></a>’
+ edge of containing box. Lines of child boxes are spread with equal amout
+ of empty spaces between each two lines, and so that ‘<a
+ href="#flex-align-after"><code class=property>after</code></a>’
+ edge of last line of child boxes is aligned with ‘<a
+ href="#flex-align-after"><code class=property>after</code></a>’
+ edge of conaining box.
</dl>
<p class=issue>TODO: examples
@@ -1546,7 +1542,7 @@
<li>Align in the cross axis, per ‘<a href="#flex-align0"><code
class=property>flex-align</code></a>’.
- <li>Align the lines, per ‘<a href="#propdef-flex-line-pack"><code
+ <li>Align the lines, per ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’.
</ol>
@@ -1697,9 +1693,8 @@
flexbox.
<li>Added definition for where is ‘<a
- href="#flex-line-pack-before"><code
- class=property>before</code></a>’ and where is ‘<a
- href="#flex-line-pack-after"><code
+ href="#flex-align-before"><code class=property>before</code></a>’
+ and where is ‘<a href="#flex-align-after"><code
class=property>after</code></a>’
<li>Open issue 14 for before/after to validate the definition.
@@ -1721,7 +1716,7 @@
fit into the current draft
</ul>
- <li>‘<a href="#propdef-flex-line-pack"><code
+ <li>‘<a href="#flex-line-pack0"><code
class=property>Flex-line-pack</code></a>’ property
<li>Other
@@ -1821,9 +1816,9 @@
<td>visual
<tr>
- <th><a class=property href="#propdef-flex-line-pack">flex-line-pack</a>
+ <th><a class=property href="#flex-line-pack0">flex-line-pack</a>
- <td>before | after | middle | distribute
+ <td>start | end | center | distribute
<td>before
@@ -1872,17 +1867,16 @@
<ul class=indexlist>
<li>after, <a href="#flex-align-after"
- title=after><strong>5.2.</strong></a>, <a href="#flex-line-pack-after"
- title=after><strong>6.1.</strong></a>
+ title=after><strong>5.2.</strong></a>
<li>baseline, <a href="#flex-align-baseline"
title=baseline><strong>5.2.</strong></a>
<li>before, <a href="#flex-align-before"
- title=before><strong>5.2.</strong></a>, <a href="#flex-line-pack-before"
- title=before><strong>6.1.</strong></a>
+ title=before><strong>5.2.</strong></a>
- <li>center, <a href="#flex-pack-center"
+ <li>center, <a href="#flex-line-pack-center"
+ title=center><strong>6.1.</strong></a>, <a href="#flex-pack-center"
title=center><strong>5.1.</strong></a>
<li>column, <a href="#flex-flow-column"
@@ -1910,7 +1904,9 @@
title=distribute><strong>6.1.</strong></a>, <a
href="#flex-pack-distribute" title=distribute><strong>5.1.</strong></a>
- <li>end, <a href="#flex-pack-end" title=end><strong>5.1.</strong></a>
+ <li>end, <a href="#flex-line-pack-end"
+ title=end><strong>6.1.</strong></a>, <a href="#flex-pack-end"
+ title=end><strong>5.1.</strong></a>
<li>flex-align, <a href="#flex-align0"
title=flex-align><strong>5.2.</strong></a>
@@ -1939,7 +1935,7 @@
<li>flexible length's, <a href="#flexible-length0" title="flexible
length's"><strong>4.1.</strong></a>
- <li>flex-line-pack, <a href="#propdef-flex-line-pack"
+ <li>flex-line-pack, <a href="#flex-line-pack0"
title=flex-line-pack><strong>6.1.</strong></a>
<li>flex-order, <a href="#flex-order0"
@@ -1981,8 +1977,10 @@
title=main-start><strong>2.</strong></a>
<li>middle, <a href="#flex-align-middle"
- title=middle><strong>5.2.</strong></a>, <a href="#flex-line-pack-middle"
- title=middle><strong>6.1.</strong></a>
+ title=middle><strong>5.2.</strong></a>
+
+ <li>multi-line, <a href="#multi-line"
+ title=multi-line><strong>6.</strong></a>
<li>negative flexibility, <a href="#negative-flexibility" title="negative
flexibility"><strong>4.1.</strong></a>
@@ -1998,7 +1996,11 @@
<li>row-reverse, <a href="#flex-flow-row-reverse"
title=row-reverse><strong>3.1.</strong></a>
- <li>start, <a href="#flex-pack-start"
+ <li>single-line, <a href="#single-line"
+ title=single-line><strong>6.</strong></a>
+
+ <li>start, <a href="#flex-line-pack-start"
+ title=start><strong>6.1.</strong></a>, <a href="#flex-pack-start"
title=start><strong>5.1.</strong></a>
<li>stretch, <a href="#flex-align-stretch"
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.51
retrieving revision 1.52
diff -u -d -r1.51 -r1.52
--- Overview.src.html 27 Aug 2011 01:25:08 -0000 1.51
+++ Overview.src.html 27 Aug 2011 01:44:37 -0000 1.52
@@ -604,15 +604,9 @@
<h2 id='multiline'>
Multi-line flexbox</h2>
- <p>If no 'wrap-' keyword is included in 'flex-flow', flexbox lays out its items in a single row or column; any items that don't fit will simply be considered overflow.</p>
-
- <p>Adding any of the 'wrap-' keywords to 'flex-flow' 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 fit its items on as few lines as possible by shrinking all items down to their minimum widths or heights if necessary.</p>
-
- <p>If the items still do not fit on a line after being reduced to their minimum widths or heights, then items are moved one by one onto a new line, until the items remaining on the previous line fit. This process can 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 'flex-flow'.</p>
-
- <p>The cross-axis size of a line is the cross-axis size of the largest item in that line. No additional space appears between the lines apart from the margins on the largest items in each line. For calculating the cross-axis size of a line, margins with a computed value of auto should be treated as having a value of 0.</p>
+ <p>A flexbox can be either single-line or multi-line, depending on the 'flex-flow' property. A <dfn>single-line</dfn> flexbox lays out all of its children in a single line, even if that would cause the flexbox to overflow its bounds. A <dfn>multi-line</dfn> flexbox breaks its <i>flexbox items</i> across multiple lines to avoid overflowing, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. Every line contains at least one <i>flexbox item</i>, unless the flexbox itself is completely empty.</p>
- <p>Once the number of lines has been determined, items with non-zero flexibility stretch as necessary in an attempt to fill the remaining space on the lines. Each line computes flexes independently, so only elements on that line are considered when evaluating flex. The packing of elements in a line, as specified by the flex-pack property, is also computed independently for each line.</p>
+ <p>When additional lines are created, they are stacked in the flexbox in the <i>cross axis</i>. Each line is completely independent; flexible lengths and the 'flex-pack' and 'flex-align' properties only pay attention to the items on a single line at a time. The size of a line depends on the contents of the lines and the value of the 'flex-align' property. The lines are aligned within a flexbox with the 'flex-line-pack' property.</p>
<div class=example>
<p>This example shows four buttons that do not fit horizontally.</p>
@@ -620,11 +614,11 @@
<pre><style>
#div1 {
display: flexbox;
- flex-flow: wrap;
+ flex-flow: row wrap;
width: 300px;
}
button {
- width: flex(80px 1.0);
+ width: flex(80px 1);
}
<style>
@@ -635,37 +629,40 @@
<button id="button4">Wildebeest</button>
</div></pre>
- <p>The buttons are shrunk to their minimum widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the box-lines property has a specified value of multiple, the fourth button may be moved onto a second line.</p>
+ <p>The buttons are first set to their preferred widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the 'flex-flow' property specifies a multiline flexbox (due to the ''wrap'' keyword appearing in its value), the flexbox will create an additional line to contain the last button.</p>
- <p>Flexibility is applied to each element, separately for each line. The first line has 60 pixels of remaining space, so each of the three buttons on that line will receive 20 pixels of extra width. The remaining button on a line of its own will stretch to the entire width of the containing box, or 300 pixels.</p>
+ <p>Flexibility is applied to each element, separately for each line. The first line has 60 pixels of remaining space and all of the buttons have the same flexibility, so each of the three buttons on that line will receive 20 pixels of extra width, ending up 100px wide. The remaining button is on a line of its own and will stretch to the entire width of the line, or 300 pixels.</p>
- <div style="width:300px; border:medium solid green">
- <button style="width:100px">Elephant</button
- ><button style="width:100px">Tiger</button
- ><button style="width:100px">Antelope</button
- ><button style="width:300px">Wildebeest</button>
+ <div style="width:300px; border:medium solid green; overflow: hidden;">
+ <button style="width:100px; float: left;">Elephant</button>
+ <button style="width:100px; float: left;">Tiger</button>
+ <button style="width:100px; float: left;">Antelope</button>
+ <button style="width:300px; float: left;">Wildebeest</button>
</div>
- <p>If the box was resized, the buttons may rearrange onto different lines as necessary. If the style rules in the example above were changed to the following:</p>
+ <p>If the box was resized, the buttons may rearrange onto different lines as necessary.</p>
+
+ <p>If the style rules in the example above were changed to the following:</p>
<pre>
#div1 {
display: flexbox;
- flex-flow: wrap;
+ flex-flow: row wrap;
flex-pack: center;
width: 300px;
}
button {
- width: flex(80px 1.0);
+ width: flex(80px 1);
max-width: 90px;
}</pre>
- <p>Now, each of the buttons will only stretch to include an additional 10 pixels of width, as the maximum width of 90 pixels is only 10 pixels larger than the minimum intrinsic width of the buttons. The remaining 30 pixels of space left over is divided up and placed inside the box outside of the buttons, as the value of box-pack is center. The fourth button will also appear at 90 pixels wide, centered within the box.</p>
+
+ <p>Similar to the previous example, the first three buttons will fit on the first line, and the last button will wrap onto a new line. However, when the buttons attempt to flex they can only grow to 90px each, due to their 'max-width' property. This leaves 30px of free space on the first line and 210px of free space on the second line. Because 'flex-pack' is set to ''center'', the buttons will be centered on each line, with the free space split equally on either side.</p>
<div style="width:300px; border:medium solid green; text-align:center;">
- <button style="width:90px">Elephant</button
- ><button style="width:90px">Tiger</button
- ><button style="width:90px">Antelope</button
- ><button style="width:90px">Wildebeest</button>
+ <button style="width:90px; float: left; margin-left: 15px;">Elephant</button>
+ <button style="width:90px; float: left;">Tiger</button>
+ <button style="width:90px; float: left;">Antelope</button>
+ <button style="width:90px">Wildebeest</button>
</div>
</div>
@@ -676,10 +673,10 @@
<table class=propdef>
<tr>
<th>Name:
- <td><dfn id="propdef-flex-line-pack">flex-line-pack</dfn>
+ <td><dfn>flex-line-pack</dfn>
<tr>
<th>Value:
- <td>before | after | middle | distribute
+ <td>start | end | center | distribute
<tr>
<th>Initial:
<td>before
@@ -700,13 +697,13 @@
<p>The flex-line-pack property may be used to control the alignment of lines in multi-line flexboxes. The values of this property have the following meanings:</p>
<dl>
- <dt><dfn id='flex-line-pack-before'>before</dfn></dt>
+ <dt><dfn id='flex-line-pack-start'>start</dfn></dt>
<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>
+ <dt><dfn id='flex-line-pack-end'>end</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>
- <dt><dfn id='flex-line-pack-middle'>middle</dfn></dt>
+ <dt><dfn id='flex-line-pack-center'>center</dfn></dt>
<dd>Lines of child boxes are placed with no space between them and equal amount of extra space left before first line and after last line.</dd>
<dt><dfn id='flex-line-pack-distribute'>distribute</dfn></dt>
Received on Saturday, 27 August 2011 01:45:21 UTC