- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 18 Feb 2012 00:08:03 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv8941
Modified Files:
Overview.html Overview.src.html
Log Message:
markup reformat. No content changes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.158
retrieving revision 1.159
diff -u -d -r1.158 -r1.159
--- Overview.html 17 Feb 2012 21:16:23 -0000 1.158
+++ Overview.html 18 Feb 2012 00:08:00 -0000 1.159
@@ -29,11 +29,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 17 February 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 18 February 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120217/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120217/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120218/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120218/</a>-->
<dd><a
@@ -238,7 +238,7 @@
<li><a href="#layout-algorithm"><span class=secno>7. </span> Flexbox
Layout Algorithm</a>
- <li><a href="#pagination"><span class=secno>8. </span>Page breaks in
+ <li><a href="#pagination"><span class=secno>8. </span> Page breaks in
flexbox</a>
<li><a href="#conformance"><span class=secno>9. </span> Conformance</a>
@@ -1915,14 +1915,14 @@
the flexbox items generate boxes in the box-tree, and how the rest of
this algorithm deals with the items.
- <li>Determine the hypothetical main size of items
+ <li> Determine the hypothetical main size of items:
<ol>
<li>If item has a definite preferred size, it is the hypothetical main
size.
<li>
<p>Otherwise layout the flexbox items using the shrink-to-fit
- algorithm.
+ algorithm.</p>
<p>Calculation of the shrink-to-fit width is similar to calculating the
width of a table cell using the automatic table layout algorithm.
@@ -2049,23 +2049,22 @@
lengths</dfn> of the items within a flexbox line:
<ol>
- <li>Determine sign of flexibility
+ <li> Determine sign of flexibility
<ol>
<li>Add sizes of all items, <i>adjusted for min/max</i>.
<li>If sum of preferred sizes is less than available space, use positive
- flexibility, otherwise use negative flexibility
+ flexibility, otherwise use negative flexibility.
</ol>
<p>for the rest of the algorithm use flexibility with the sign determined
- in this step
+ in this step</p>
<li>Reset all flexible sizes to their preferred size
<li>Find free space by subtracting sum of item sizes from available space.
-
- <li>Distribute free space proportional to flex
+ <li> Distribute free space proportional to flex:
<ol>
<li>If the free space is positive, but step 1 chose negative
flexibility, do nothing
@@ -2077,7 +2076,7 @@
item's flexibility
</ol>
- <li>Fix min/max violations
+ <li> Fix min/max violations:
<ol>
<li>Adjust each flexible item for min/max.
@@ -2087,27 +2086,23 @@
violation). Accumulate the difference.
</ol>
- <li>If the sum of all violations is
- <ol>
- <li>Zero: done
+ <li> If the sum of all violations is:
+ <dl>
+ <dt>Zero
- <li>Positive:
- <ol>
- <li>Freeze items with max violations.
+ <dd>Exit the algorithm.
- <li>Go to step 2
- </ol>
+ <dt>Positive
- <li>Negative
- <ol>
- <li>Freeze items with min violations
+ <dd>Freeze items with max violations, and return to step 2.
- <li>Go to step 2
- </ol>
- </ol>
+ <dt>Negative
+
+ <dd>Freeze items with min violations, and return to step 2.
+ </dl>
</ol>
- <div class=note>
+ <div class=issue>
<p>Previous algorithm - compare with above and chose one:</p>
<ol>
@@ -2197,7 +2192,7 @@
</ol>
</div>
- <h2 id=pagination><span class=secno>8. </span>Page breaks in flexbox</h2>
+ <h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
<p>Flexboxes can break across pages between items, between lines of items
(in multi-line mode) and inside items, as long as ‘<code
@@ -2218,7 +2213,7 @@
<li>When flexbox is continued after a break, flexbox’s available space
in block direction is reduced by space consumed in previous pages.
- Consumed space before page break is
+ Consumed space before page break is:
<ol>
<li>If flexbox starts on that page: the distance between start of
content box of the flexbox and the end of available space
@@ -2230,13 +2225,14 @@
<p>If as a result of this adjustment block-direction size of flexbox
becomes negative, it is set to zero.</p>
- <li><dfn id=forced-breaks-on-flexbox-items>Forced breaks on flexbox
+ <li> <dfn id=forced-breaks-on-flexbox-items>Forced breaks on flexbox
items</dfn>
<ol>
<li>In a row-direction single-line flexbox, breaks before and after
items apply to the flexbox
- <li>In column-directon single-line flexbox and all multi-line flexboxes
+ <li>In column-directon single-line flexbox and all multi-line flexboxes:
+
<ol>
<li>Forced break before the first item is applied to the flexbox
@@ -2268,17 +2264,17 @@
sibling from appearing on the same page)
</ol>
- <li><b>Column-direction flexbox: single-line</b>
+ <li> <b>Column-direction flexbox: single-line</b>
<ol>
<li>
<p>If flexbox main-axis size is definite, flexbox algorithm must be run
first, without constraints of available space on page and using all
content of the flexbox. Otherwise items use the preferred size,
- adjusted for min/max.
+ adjusted for min/max.</p>
<p>If page size varies and flexbox size depends on page size, this step
has to be repeated on each page, again with the whole content of the
- flexbox.
+ flexbox.</p>
<li>Set of items that will fit on current page is determined by adding
main-axis sizes of items until total size exceeds avaialble space or a
@@ -2290,10 +2286,10 @@
<li>
<p>Items that fit on a page completely or partially are aligned
according to ‘flex-pack’ property, independently from the rest of
- flexbox content.
+ flexbox content.</p>
<p>Note that flexible lenghts are not recalculated on each page, even
- if there is additional free space.
+ if there is additional free space.</p>
</ol>
<p class=note>It is the intent of this spec that column-direction
@@ -2302,19 +2298,19 @@
should paginate identically to a block with non-floating children with
same content, same used size and same used margins. This rule is
simplified and not normative, but if there is any difference it should
- be noted here.
+ be noted here.</p>
- <li><b>Column-direction flexbox: multi-line</b>
+ <li> <b>Column-direction flexbox: multi-line</b>
<ol>
<li>Items are collected in lines and laid out as usual, but in available
space on current page.
- <li>If border box of an item doesn’t fit on main-axis,
+ <li>If border box of an item doesn’t fit on main-axis:
<ol>
<li>If it is the last item of the last line, a break inside the item
is considered
- <li>Otherwise
+ <li>Otherwise:
<ol>
<li>If the flexbox is not at the top of the page, it is moved to the
next page.
@@ -2324,7 +2320,7 @@
class=property>overflow</code>’ property of the flexbox is
set to ‘<code class=property>visible</code>’, it is
paginated using same rules as visible overflow of blocks in normal
- flow
+ flow.
<p class=note>After the break, continuation of overflow items may
overlap with other items and/or content after the flexbox. It is
undesirable but there is no good resolution for this spacial
@@ -2334,15 +2330,15 @@
</ol>
</ol>
- <li><b>Row-direction flexbox: single-line</b>
+ <li> <b>Row-direction flexbox: single-line</b>
<ol>
<li>
<p>Main-axis space distribution in each line is done based on complete
content of the flexbox and without space constraint in block
- direction.
+ direction.</p>
<p>If page size varies and flexbox size depends on page size, this step
- needs to be repeated on each page
+ needs to be repeated on each page.</p>
<li>Items are sized and positioned as usual, but in block-direction
available space of min(remaining available space in flexbox, remaining
@@ -2359,7 +2355,7 @@
needed.
<li>Items that fit completely or partially on current page are aligned
- on cross-axis
+ on cross-axis:
<ol>
<li>For the purposes of cross-axis alignment, minimum of remaining
available space in flexbox and available space at current page is
@@ -2372,9 +2368,9 @@
</ol>
</ol>
- <li><b>Row-direction flexbox:multi-line</b>
+ <li> <b>Row-direction flexbox:multi-line</b>
<ol>
- <li>Collect items into lines and determine line heights
+ <li>Collect items into lines and determine line heights:
<ol>
<li>
<p>If ‘<a href="#flex-line-pack0"><code
@@ -2383,13 +2379,13 @@
class=property>stretch</code></a>’ and flexbox size in block
direction is definite, layout of the complete flexbox has to be done
first to determine line heights. Layout is done as usual for
- non-paginated case, but accounting for forced breaks
+ non-paginated case, but accounting for forced breaks.</p>
<p>If page size varies, this step may have to be redone, again with
complete content; special consideration should be to be given to
line breaks to ensure that item at the start of current page is also
at the start of a line in this hypothetical layout. This
- specification currently doesn't define how exactly to achieve that.
+ specification currently doesn't define how exactly to achieve that.</p>
<li>Otherwise, items are collected into lines and each line is laid
out as a single-line flexbox to determine block-direction size of
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.156
retrieving revision 1.157
diff -u -d -r1.156 -r1.157
--- Overview.src.html 17 Feb 2012 21:16:23 -0000 1.156
+++ Overview.src.html 18 Feb 2012 00:08:01 -0000 1.157
@@ -508,11 +508,7 @@
<h2 id='flexibility'>
Flexibility: the 'flex' property</h2>
- <p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex",
- altering their width or height to fill the available space.
- This is done by using a 'flex' property.
- A flexbox distributes free space to its items proportional to their positive flexibility,
- or shrinks them to prevent overflow proportional to their negative flexibility.</p>
+ <p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", altering their width or height to fill the available space. This is done by using a 'flex' property. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.</p>
<table class=propdef>
<tr>
@@ -541,41 +537,19 @@
<td>yes
</table>
- <p class="note"><b>Editorial note:</b> in a property, default preferred size of zero is problematic. If flex property is
- not specified, 'width' or 'height' must be used, which corresponds to preferred size of 'auto'.
- But if flex is specified, we want default preferred size of 0px.
- The new keyword 'none' is the way around it.
+ <p class="note"><b>Editorial note:</b> in a property, default preferred size of zero is problematic. If flex property is not specified, 'width' or 'height' must be used, which corresponds to preferred size of 'auto'. But if flex is specified, we want default preferred size of 0px. The new keyword 'none' is the way around it.</p>
- <p>The 'flex' property specifies the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> and <dfn>negative flexibility</dfn>, and the <dfn>preferred size</dfn>.
+ <p>The 'flex' property specifies the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> and <dfn>negative flexibility</dfn>, and the <dfn>preferred size</dfn>.</p>
- <p><code><pos-flex></code> and <code><neg-flex></code> are non-negative <code><numbers>s</code>,
- while <code><preferred-size></code> is any value that would be valid in the
- 'width' or 'height' property.
- If the <code><preferred-size></code> is ''0'', it <strong>must</strong> be specified with a unit
- (like ''0px'') to avoid ambiguity; unitless zero will either be interpreted as as one of the
- flexibilities, or is a syntax error.</p>
+ <p><code><pos-flex></code> and <code><neg-flex></code> are non-negative <code><numbers>s</code>, while <code><preferred-size></code> is any value that would be valid in the 'width' or 'height' property. If the <code><preferred-size></code> is ''0'', it <strong>must</strong> be specified with a unit (like ''0px'') to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.</p>
- <p>The <code><pos-flex></code> component sets the <i>positive flexibility</i>;
- if omitted, the <i>positive flexibility</i> defaults to ''1''.
- The <code><neg-flex></code> component sets the <i>negative flexibility</i>;
- if omitted, it defaults to ''0''. </p>
+ <p>The <code><pos-flex></code> component sets the <i>positive flexibility</i>; if omitted, the <i>positive flexibility</i> defaults to ''1''. The <code><neg-flex></code> component sets the <i>negative flexibility</i>; if omitted, it defaults to ''0''. </p>
- <p>The <code><preferred-size></code> component sets the <i>preferred size</i>;
- if omitted, it defaults to ''0px''. If set to 'auto', the value of 'width' or 'height' (whichever is
- in parallel to main axis) is used as preferred size.
+ <p>The <code><preferred-size></code> component sets the <i>preferred size</i>; if omitted, it defaults to ''0px''. If set to 'auto', the value of 'width' or 'height' (whichever is in parallel to main axis) is used as preferred size.</p>
- <p>The keyword 'none' is equivalent to "0 0 auto".
- </p>
+ <p>The keyword 'none' is equivalent to "0 0 auto". </p>
- <p class="note"><b>Reviewers:</b> editors differ in preference for default value of the preferred size.
- The current choice is default flexibility of "1" and default preferred size of "0px".
- Earlier spec and two partial implementations use defaults of "0" and "auto".
- These still have to be defaults when 'flex' property is not specified.
- <br>
- The current defaults are chosen by consensus, but there has not been much external input in
- support of either option. If you can share an opinion, and/or use cases in support of either
- set of defaults, the editors would appreciate it.
- </p>
+ <p class="note"><b>Reviewers:</b> editors differ in preference for default value of the preferred size. The current choice is default flexibility of "1" and default preferred size of "0px". Earlier spec and two partial implementations use defaults of "0" and "auto". These still have to be defaults when 'flex' property is not specified. <br> The current defaults are chosen by consensus, but there has not been much external input in support of either option. If you can share an opinion, and/or use cases in support of either set of defaults, the editors would appreciate it. </p>
<p>A ''<flex>'' value is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently. ''<flex>'' can also transition to and from a <length>, by treating the length as if it were a flexible length with a positive and negative flexibility of zero and a preferred size of the length.</p>
@@ -609,9 +583,7 @@
<p class='issue'>Illustrate this example.</p>
</div>
-<p class="issue">Currently there are no separate properties for pos-flex, neg-flex or preferred size.
-If it doesn't change, there needs to be at least CSS OM access to the separate values.
-Parsing space-separated list is easier than functional notation, but figuring out the used value for preferred size is still far from trivial.
+ <p class="issue">Currently there are no separate properties for pos-flex, neg-flex or preferred size. If it doesn't change, there needs to be at least CSS OM access to the separate values. Parsing space-separated list is easier than functional notation, but figuring out the used value for preferred size is still far from trivial.</p>
<h2 id='alignment'>
Alignment</h2>
@@ -975,22 +947,16 @@
<li>Re-order the flexbox items according to their 'flex-order'. The items with the lowest (most negative) 'flex-order' values are first in the ordering. If multiple items share a 'flex-order' value, they're ordered by document order. This affects the order in which the flexbox items generate boxes in the box-tree, and how the rest of this algorithm deals with the items.</li>
- <li>Determine the hypothetical main size of items
+ <li>
+ Determine the hypothetical main size of items:
+
<ol>
- <li>If item has a definite preferred size, it is the hypothetical main size.
- </li>
- <li><p>Otherwise layout the flexbox items
- using the shrink-to-fit algorithm.
- <p>Calculation of the shrink-to-fit width is similar to
- calculating the width of a table cell using the automatic
- table layout algorithm. Roughly: calculate the preferred
- width by formatting the content without breaking lines other
- than where explicit line breaks occur, and also calculate
- the preferred minimum width, e.g., by trying all possible
- line breaks. This module doesn't define the exact algorith,
- but it is expected that the shrink-to-fit size is calculated
- the same way as it is for floats, except in this case it is
- not affected by available space.</p>
+ <li>If item has a definite preferred size, it is the hypothetical main size. </li>
+
+ <li>
+ <p>Otherwise layout the flexbox items using the shrink-to-fit algorithm.</p>
+
+ <p>Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. This module doesn't define the exact algorith, but it is expected that the shrink-to-fit size is calculated the same way as it is for floats, except in this case it is not affected by available space.</p>
<p class="issue">The above definition of shrink-to-fit is
copied from CSS2.1 (section 10.3.5: Floats). CSS3 basic box
@@ -998,11 +964,8 @@
better definition?</p>
</li>
</ol>
- <p><em>Do not apply min/max-width/height constraints to the preferred size of
- flexible lengths - those constraints are handled elsewhere in this
- algorithm, and doing so will produce incorrect results.
- </em>
- </p>
+
+ <p><em>Do not apply min/max-width/height constraints to the preferred size of flexible lengths - those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results. </em></p>
</li>
<li>
@@ -1042,12 +1005,7 @@
<ol>
<li>If the flexbox is single-line and has a definite cross size, the single flexbox line's cross size is the cross size of the flexbox's content box. End this step of the algorithm.</li>
- <li>If main axis is parallel to inline axis, collect all the flexbox
- items with a 'flex-item-align' of 'baseline'.
- Find the maximum of the distances
- from their baseline to the cross-start edge of their margin box, and
- the maximum of the distances from their baseline to the cross-end edge
- of their margin box. Sum these two values.
+ <li>If main axis is parallel to inline axis, collect all the flexbox items with a 'flex-item-align' of 'baseline'. Find the maximum of the distances from their baseline to the cross-start edge of their margin box, and the maximum of the distances from their baseline to the cross-end edge of their margin box. Sum these two values.</li>
<li>For remaining flexbox items, find the maximum of the cross sizes of their margin boxes.
@@ -1067,294 +1025,266 @@
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
<ol>
- <li>Determine sign of flexibility
- <ol>
- <li>Add sizes of all items, <i>adjusted for min/max</i>.
- <li>If sum of preferred sizes is less than available space, use positive flexibility, otherwise use negative flexibility
- </ol>
- <p>for the rest of the algorithm use flexibility with the sign determined in this step
- </li>
+ <li>
+ Determine sign of flexibility
+
+ <ol>
+ <li>Add sizes of all items, <i>adjusted for min/max</i>.
+
+ <li>If sum of preferred sizes is less than available space, use positive flexibility, otherwise use negative flexibility.</li>
+ </ol>
- <li>Reset all flexible sizes to their preferred size
- <li>Find free space by subtracting sum of item sizes from available space.
- <li>Distribute free space proportional to flex
- <ol>
- <li>If the free space is positive, but step 1 chose negative flexibility, do nothing
- <li>If the free space is negative, but step 1 chose positive flexibility, do nothing
- <li>Add a portion of free space to each flexible item, proportinal to item's flexibility
- </ol>
- <li>Fix min/max violations
- <ol>
- <li>Adjust each flexible item for min/max.
- <li>If the size has changed, it is a violation.
- <li>The violation may be positive (min violation) or negative (max violation). Accumulate the difference.
- </ol>
- <li>If the sum of all violations is
- <ol>
- <li>Zero: done
- <li>Positive:
+ <p>for the rest of the algorithm use flexibility with the sign determined in this step</p>
+ </li>
+
+ <li>Reset all flexible sizes to their preferred size</li>
+
+ <li>Find free space by subtracting sum of item sizes from available space.</li>
+
+ <li>
+ Distribute free space proportional to flex:
+
<ol>
- <li>Freeze items with max violations.
- <li>Go to step 2
+ <li>If the free space is positive, but step 1 chose negative flexibility, do nothing</li>
+
+ <li>If the free space is negative, but step 1 chose positive flexibility, do nothing</li>
+
+ <li>Add a portion of free space to each flexible item, proportinal to item's flexibility</li>
</ol>
- <li>Negative
+ </li>
+
+ <li>
+ Fix min/max violations:
+
<ol>
- <li>Freeze items with min violations
- <li>Go to step 2
+ <li>Adjust each flexible item for min/max. </li>
+
+ <li>If the size has changed, it is a violation. </li>
+
+ <li>The violation may be positive (min violation) or negative (max violation). Accumulate the difference.</li>
</ol>
- </ol>
+ </li>
+
+ <li>
+ If the sum of all violations is:
+
+ <dl>
+ <dt>Zero</dt>
+ <dd>Exit the algorithm.</dd>
+
+ <dt>Positive</dt>
+ <dd>Freeze items with max violations, and return to step 2.</dd>
+
+ <dt>Negative</dt>
+ <dd>Freeze items with min violations, and return to step 2.</dd>
+ </dl>
+ </li>
</ol>
- <div class='note'>
+ <div class='issue'>
<p>Previous algorithm - compare with above and chose one:</p>
- <ol>
- <li>If this is the first time this step is reached in the current invocation of this algorithm, <i>distribute the free space</i> in the flexbox line, then <i>fix max size violations</i>, then <i>fix min size violations</i>.</li>
+ <ol>
+ <li>If this is the first time this step is reached in the current invocation of this algorithm, <i>distribute the free space</i> in the flexbox line, then <i>fix max size violations</i>, then <i>fix min size violations</i>.</li>
- <li>If the current set of items violating a min size constraint is different from the set in the previous iteration, remove the marks denoting any element as being in violation of a max size constraint, <i>distribute the free space</i>, then <i>fix max size violations</i>.</li>
+ <li>If the current set of items violating a min size constraint is different from the set in the previous iteration, remove the marks denoting any element as being in violation of a max size constraint, <i>distribute the free space</i>, then <i>fix max size violations</i>.</li>
- <li>If the current set of items violating a max size constraint is different from the set in the previous iteration, remove the marks denoting any element as being in violation of a min size constraint, <i>distribute the free space</i>, then <i>fix min size violations</i>.</li>
+ <li>If the current set of items violating a max size constraint is different from the set in the previous iteration, remove the marks denoting any element as being in violation of a min size constraint, <i>distribute the free space</i>, then <i>fix min size violations</i>.</li>
- <li>If either of the previous two steps changed the set of items violating their constraints, restart this algorithm.
+ <li>If either of the previous two steps changed the set of items violating their constraints, restart this algorithm.
- <li>Otherwise, the used value of the main size property of every flexible item is the item's preferred size.</li>
- </ol>
+ <li>Otherwise, the used value of the main size property of every flexible item is the item's preferred size.</li>
+ </ol>
- <p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
+ <p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
- <ol>
- <li>If the preferred size of a flexible length was changed from a previous invocation of this algorithm, reset it to its specified value.</li>
+ <ol>
+ <li>If the preferred size of a flexible length was changed from a previous invocation of this algorithm, reset it to its specified value.</li>
- <li>Find the available free space. Sum the main sizes of the margin boxes of every flexbox item in the line, treating flexible lengths as their preferred size, and then subtract that from the main size of the flexbox's content box. This value is the available free space. It may be zero, positive, or negative.</li>
+ <li>Find the available free space. Sum the main sizes of the margin boxes of every flexbox item in the line, treating flexible lengths as their preferred size, and then subtract that from the main size of the flexbox's content box. This value is the available free space. It may be zero, positive, or negative.</li>
- <li>
- <dt>If the available free space is zero:</dt>
- <dd>Do nothing.</dd>
+ <li>
+ <dt>If the available free space is zero:</dt>
+ <dd>Do nothing.</dd>
- <dt>If the available free space is positive:</dt>
- <dd>Calculate the total flexibility by summing the positive flexibility of every flexible length in the line. For each flexible length, increment its preferred size by a fraction of the available free space equal to its positive flexibility divided by the total flexibility.</dd>
+ <dt>If the available free space is positive:</dt>
+ <dd>Calculate the total flexibility by summing the positive flexibility of every flexible length in the line. For each flexible length, increment its preferred size by a fraction of the available free space equal to its positive flexibility divided by the total flexibility.</dd>
- <dt>If the available free space is negative:</dt>
- <dd>Calculate the total flexibility by summing the negative flexibility of every flexible length in the line. For each flexible length, increment its preferred size by a fraction of the available free space equal to its negative flexibility divided by the total flexibility. <span class='note'>Note: due to the signs involved, incrementing will decrease the preferred size.)</span></dd>
- </li>
- </ol>
+ <dt>If the available free space is negative:</dt>
+ <dd>Calculate the total flexibility by summing the negative flexibility of every flexible length in the line. For each flexible length, increment its preferred size by a fraction of the available free space equal to its negative flexibility divided by the total flexibility. <span class='note'>Note: due to the signs involved, incrementing will decrease the preferred size.)</span></dd>
+ </li>
+ </ol>
- <p>To <dfn title="fix max size violations|fix min size violations">fix size constraint violations</dfn> in a flexbox line:</p>
+ <p>To <dfn title="fix max size violations|fix min size violations">fix size constraint violations</dfn> in a flexbox line:</p>
- <ol>
- <li>If none of the items on the line violate their min or max size constraints (as appropriate), exit this algorithm.</li>
+ <ol>
+ <li>If none of the items on the line violate their min or max size constraints (as appropriate), exit this algorithm.</li>
- <li>Otherwise, for every item in violation of a min or max size constraint (as appropriate), mark them as being in violation of that constraint. While an item is so marked, treat it as if it were inflexible, with its main size property set to its min or max size constraint, as appropriate.</li>
+ <li>Otherwise, for every item in violation of a min or max size constraint (as appropriate), mark them as being in violation of that constraint. While an item is so marked, treat it as if it were inflexible, with its main size property set to its min or max size constraint, as appropriate.</li>
- <li><i>Distribute the free space</i>, then restart this algorithm.</li>
- </ol>
-</div>
+ <li><i>Distribute the free space</i>, then restart this algorithm.</li>
+ </ol>
+ </div>
-<h2 id="pagination">Page breaks in flexbox</h2>
+<h2 id="pagination">
+Page breaks in flexbox</h2>
-<p>Flexboxes can break
-across pages between items, between lines of items (in multi-line mode) and
-inside items, as long as 'break-' property allow that. All 'break-' properties
-are supported on flexbox, on flexbox items and inside flexbox items.</p>
+ <p>Flexboxes can break across pages between items, between lines of items (in multi-line mode) and inside items, as long as 'break-' property allow that. All 'break-' properties are supported on flexbox, on flexbox items and inside flexbox items.</p>
-<p>The following breaking rules refer to fragmentation
-container as “page”. The same rules apply to any other fragmenters. Change
-“page” to the appropriate fragmenter type as needed.</p>
+ <p>The following breaking rules refer to fragmentation container as “page”. The same rules apply to any other fragmenters. Change “page” to the appropriate fragmenter type as needed.</p>
-<p>Breaks in and around
-flexbox are determined as follows:</p>
+ <p>Breaks in and around flexbox are determined as follows:</p>
-<ol>
-<li>
-Break-before, break-after,
-break-inside properties on flexbox itself have effect as normal. If breaks
-inside flexbox are allowed, break points are determined using following rules.</li>
+ <ol>
+ <li> Break-before, break-after, break-inside properties on flexbox itself have effect as normal. If breaks inside flexbox are allowed, break points are determined using following rules.</li>
-<li>When flexbox is continued
-after a break, flexbox’s available space in block direction is reduced by space
-consumed in previous pages. Consumed space before page break is
+ <li>When flexbox is continued after a break, flexbox’s available space in block direction is reduced by space consumed in previous pages. Consumed space before page break is:
-<ol>
-<li>If flexbox starts on that
-page: the distance between start of content box of the flexbox and the end of
-available space</li>
+ <ol>
+ <li>If flexbox starts on that page: the distance between start of content box of the flexbox and the end of available space</li>
-<li>If flexbox continues from
-previous page: the size of available space.</li>
-</ol>
+ <li>If flexbox continues from previous page: the size of available space.</li>
+ </ol>
-<p>If as a result of this adjustment block-direction size of flexbox
-becomes negative, it is set to zero.</p>
-</li>
- <li><dfn>Forced breaks on flexbox items</dfn>
- <ol>
- <li>In a row-direction single-line
- flexbox, breaks before and after items apply to the flexbox</li>
- <li>In column-directon single-line flexbox and all multi-line flexboxes
+ <p>If as a result of this adjustment block-direction size of flexbox becomes negative, it is set to zero.</p>
+ </li>
+
+ <li>
+ <dfn>Forced breaks on flexbox items</dfn>
+
<ol>
- <li>Forced break before the first item is applied to the flexbox</li>
- <li>Forced break after the last item is applied to the flexbox</li>
- <li>Forced break before or after any other item terminates the set of items to be laid out on this page</li>
+ <li>In a row-direction single-line flexbox, breaks before and after items apply to the flexbox</li>
+
+ <li>In column-directon single-line flexbox and all multi-line flexboxes:
+
+ <ol>
+ <li>Forced break before the first item is applied to the flexbox</li>
+
+ <li>Forced break after the last item is applied to the flexbox</li>
+
+ <li>Forced break before or after any other item terminates the set of items to be laid out on this page</li>
+ </ol>
+ </li>
</ol>
+
+ <p class="issue"> There are other options for forced breaks in flexbox. For example, forced breaks on items in row-direction box could be ignored, similar to behavior of inline elements in normal flow. Open for suggestions.</p>
</li>
- </ol>
- <p class="issue">
- There are other options for forced breaks in flexbox. For example,
- forced breaks on items in row-direction box could be ignored, similar to
- behavior of inline elements in normal flow. Open for suggestions.
-</p>
-</li>
-<li>When necessary, a <dfn>break inside a flexbox item is considered</dfn> as follows:
-
-<ol>
- <li>If the item has
- “break-inside:avoid”, it is pushed to the next page</li>
-
- <li>Otherwise, it may be
- broken, according to breaking rules and algorithms applicable to its display
- type. </li>
+
+ <li>When necessary, a <dfn>break inside a flexbox item is considered</dfn> as follows:
- <li>Forced breaks inside flex item content are
- handled normally, but in row-direction flexbox they don't affect layout of sibling flex items (e.g. a
- forced break inside an item doesn't prevent its next
- sibling from appearing on the same page)</li>
-</ol>
-</li>
+ <ol>
+ <li>If the item has “break-inside:avoid”, it is pushed to the next page</li>
-<li><b>Column-direction flexbox: single-line</b>
+ <li>Otherwise, it may be broken, according to breaking rules and algorithms applicable to its display type. </li>
-<ol>
- <li><p>If flexbox main-axis size is definite, flexbox algorithm must be run first,
- without constraints of available space on page and using all content of the flexbox.
- Otherwise items use the preferred size, adjusted for min/max.
+ <li>Forced breaks inside flex item content are handled normally, but in row-direction flexbox they don't affect layout of sibling flex items (e.g. a forced break inside an item doesn't prevent its next sibling from appearing on the same page)</li>
+ </ol>
+ </li>
- <p>If page size varies and flexbox size depends on page size, this step has to be
- repeated on each page, again with the whole content of the flexbox.
+ <li>
+ <b>Column-direction flexbox: single-line</b>
- <li>Set of items that will fit
- on current page is determined by adding main-axis sizes of
- items until total size exceeds avaialble space or a forced break is encountered.</li>
+ <ol>
+ <li>
+ <p>If flexbox main-axis size is definite, flexbox algorithm must be run first, without constraints of available space on page and using all content of the flexbox. Otherwise items use the preferred size, adjusted for min/max.</p>
- <li>If border box of an item
- doesn’t fit in available space, a break inside the item is considered</li>
+ <p>If page size varies and flexbox size depends on page size, this step has to be repeated on each page, again with the whole content of the flexbox.</p>
+ </li>
- <li><p>Items that fit on a page
- completely or partially are aligned according to ‘flex-pack’ property,
- independently from the rest of flexbox content.
- <p>Note that flexible lenghts are not recalculated on each page, even if there is
- additional free space.
- </li>
-</ol>
+ <li>Set of items that will fit on current page is determined by adding main-axis sizes of items until total size exceeds avaialble space or a forced break is encountered.</li>
- <p class="note">It is the intent of this spec that column-direction
- single-line flexbox paginates very simlarly to block
- flow. As a test of the intent, a flexbox with "flex-pack:start" and no flexible items should paginate
- identically to a block with non-floating children
- with same content, same used size and same used margins. This
- rule is simplified and not normative, but if there is any
- difference it should be noted here.
-</li>
+ <li>If border box of an item doesn’t fit in available space, a break inside the item is considered</li>
-<li><b>Column-direction flexbox: multi-line</b>
+ <li>
+ <p>Items that fit on a page completely or partially are aligned according to ‘flex-pack’ property, independently from the rest of flexbox content.</p>
-<ol>
-<li>Items are collected in lines and
-laid out as usual, but in available space on current page.</li>
+ <p>Note that flexible lenghts are not recalculated on each page, even if there is additional free space.</p>
+ </li>
+ </ol>
-<li>If border box of an item
-doesn’t fit on main-axis,
+ <p class="note">It is the intent of this spec that column-direction single-line flexbox paginates very simlarly to block flow. As a test of the intent, a flexbox with "flex-pack:start" and no flexible items should paginate identically to a block with non-floating children with same content, same used size and same used margins. This rule is simplified and not normative, but if there is any difference it should be noted here.</p>
+ </li>
-<ol>
-<li>If it is the last item of
-the last line, a break inside the item is considered</li>
+ <li>
+ <b>Column-direction flexbox: multi-line</b>
-<li>Otherwise
-<ol>
- <li>If the flexbox is not at the top of the page, it is moved to the next page.</li>
- <li>If the flexbox is already at the top of the page, the item may produce overflow.
- If 'overflow' property of the flexbox is set to 'visible', it is paginated using same rules as visible
- overflow of blocks in normal flow
+ <ol>
+ <li>Items are collected in lines and laid out as usual, but in available space on current page.</li>
- <p class="note">After the break, continuation of overflow items may overlap with other items
- and/or content after the flexbox. It is undesirable but there is no good resolution for this
- spacial conflict and this outcome is similar to effect of "overflow:visible" elsewhere.</p>
- </li>
-</ol>
-</li>
-</ol>
-</ol>
+ <li>If border box of an item doesn’t fit on main-axis:
+ <ol>
+ <li>If it is the last item of the last line, a break inside the item is considered</li>
-</li>
+ <li>Otherwise:
+ <ol>
+ <li>If the flexbox is not at the top of the page, it is moved to the next page.</li>
-<li><b>Row-direction flexbox: single-line</b>
+ <li>If the flexbox is already at the top of the page, the item may produce overflow. If 'overflow' property of the flexbox is set to 'visible', it is paginated using same rules as visible overflow of blocks in normal flow.
-<ol>
+ <p class="note">After the break, continuation of overflow items may overlap with other items and/or content after the flexbox. It is undesirable but there is no good resolution for this spacial conflict and this outcome is similar to effect of "overflow:visible" elsewhere.</p>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
-<li><p>Main-axis space
-distribution in each line is done based on complete content of the flexbox and without space constraint
-in block direction.
-<p>If page size varies and flexbox size depends on page size,
-this step needs to be repeated on each page
-</li>
+ <li>
+ <b>Row-direction flexbox: single-line</b>
-<li>Items are sized and positioned as usual, but in block-direction available space of
-min(remaining available space in flexbox, remaining space on the page).</li>
+ <ol>
+ <li>
+ <p>Main-axis space distribution in each line is done based on complete content of the flexbox and without space constraint in block direction.</p>
-<li>Any items with baseline alignment must be aligned before considering breaks inside items.</li>
+ <p>If page size varies and flexbox size depends on page size, this step needs to be repeated on each page.</p>
+ </li>
-<li>If border box of an item doesn’t fit in current page, a break inside the item is considered</li>
+ <li>Items are sized and positioned as usual, but in block-direction available space of min(remaining available space in flexbox, remaining space on the page).</li>
-<li>Items that have fit
-completely on a previous page and items that are pushed to next page don’t have
-any rendering, leaving empty space as needed.</li>
+ <li>Any items with baseline alignment must be aligned before considering breaks inside items.</li>
-<li>Items that fit completely or partially on current page are aligned on cross-axis
-<ol>
+ <li>If border box of an item doesn’t fit in current page, a break inside the item is considered</li>
-<li>For the purposes of
-cross-axis alignment, minimum of remaining available space in flexbox and
-available space at current page is used.</li>
+ <li>Items that have fit completely on a previous page and items that are pushed to next page don’t have any rendering, leaving empty space as needed.</li>
-<li>If an item is broken in
-the previous step and its alignment is not baseline, its cross-axis size is set
-to available space. If item alignment is baseline, its cross-axis size is
-adjusted so that it extends to exactly the end of available space.</li>
-</ol>
-</li>
-</ol>
-</li>
+ <li>Items that fit completely or partially on current page are aligned on cross-axis:
+
+ <ol>
+ <li>For the purposes of cross-axis alignment, minimum of remaining available space in flexbox and available space at current page is used.</li>
-<li><b>Row-direction flexbox:multi-line</b>
+ <li>If an item is broken in the previous step and its alignment is not baseline, its cross-axis size is set to available space. If item alignment is baseline, its cross-axis size is adjusted so that it extends to exactly the end of available space.</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
-<ol>
+ <li>
+ <b>Row-direction flexbox:multi-line</b>
-<li>Collect items into lines and determine line heights
- <ol>
- <li><p>If 'flex-line-pack' is 'stretch' and flexbox size in block direction is definite,
- layout of the complete flexbox has to be done first to determine line heights. Layout
- is done as usual for non-paginated case, but accounting for forced breaks
- <p>If page size varies, this step may have to be redone, again with complete content;
- special consideration should be to be given to line breaks to ensure that item at
- the start of current page is also at the start of a line in this hypothetical layout.
- This specification currently doesn't define how exactly to achieve that.</li>
+ <ol>
+ <li>Collect items into lines and determine line heights:
+
+ <ol>
+ <li>
+ <p>If 'flex-line-pack' is 'stretch' and flexbox size in block direction is definite, layout of the complete flexbox has to be done first to determine line heights. Layout is done as usual for non-paginated case, but accounting for forced breaks.</p>
+
+ <p>If page size varies, this step may have to be redone, again with complete content; special consideration should be to be given to line breaks to ensure that item at the start of current page is also at the start of a line in this hypothetical layout. This specification currently doesn't define how exactly to achieve that.</p>
+ </li>
- <li>Otherwise, items are collected into lines and each line is laid out as a single-line flexbox to determine
- block-direction size of each line.</li>
- </ol>
-</li>
-<li>Lines are added one at a time, until out of available space or a forced break is encountered</li>
+ <li>Otherwise, items are collected into lines and each line is laid out as a single-line flexbox to determine block-direction size of each line.</li>
+ </ol>
+ </li>
-<li>If size of flexbox in inline direction is not definite, multi-line layout algorithm is run
-using the set of itesm that have fit on the current page. Lines that are crossing a page break
-use their complete content for main-axis measurement, but partial content for everything else.</li>
+ <li>Lines are added one at a time, until out of available space or a forced break is encountered</li>
-<li>Line packing is done on each page, with content on the page</li>
+ <li>If size of flexbox in inline direction is not definite, multi-line layout algorithm is run using the set of itesm that have fit on the current page. Lines that are crossing a page break use their complete content for main-axis measurement, but partial content for everything else.</li>
-</li>
-</ol>
-</li>
-</ol>
+ <li>Line packing is done on each page, with content on the page</li>
+ </ol>
+ </li>
+ </ol>
<h2 id="conformance">
Conformance</h2>
Received on Saturday, 18 February 2012 00:08:07 UTC