- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 16 Feb 2012 12:18:42 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv11465
Modified Files:
Overview.html Overview.src.html
Log Message:
updated algorithms for review feedback.
small changes to main layout algorithm (shrink-to-fit definition)
major changes to pagination altorithms (defined forced breaks, defined how vertical multiline should paginate)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.154
retrieving revision 1.155
diff -u -d -r1.154 -r1.155
--- Overview.html 14 Feb 2012 10:27:55 -0000 1.154
+++ Overview.html 16 Feb 2012 12:18:40 -0000 1.155
@@ -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, 14 February 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 16 February 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120214/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120214/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120216/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120216/</a>-->
<dd><a
@@ -70,14 +70,15 @@
<dt>Issues List:
- <dd>
- <p class=issue>Will be a bugzilla URL once I get a component added.</p>
+ <dd><a
+ href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Flexbox&resolution=---">Bugzilla
+ Bugs for CSS regions</a>
<dt>Discussion:
<dd><a
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
- with subject line "<code>[css3-flexbox] �message topic�</code>"
+ with subject line "<code>[css3-flexbox] …message topic…</code>"
<dt>Editors:
@@ -297,10 +298,10 @@
<p>Flexbox layout is superficially similar to block layout. It lacks many
of the more complex text or document-formatting properties that can be
used in block layout, such as ‘<code
- class=property>float</code>’ and ‘<code
- class=property>columns</code>’, but in return it gains more simple
- and powerful tools for aligning its contents in ways that webapps and
- complex web pages often need.
+ class=property>float</code>’ and ‘<a
+ href="#flex-flow-column"><code class=property>columns</code></a>’,
+ but in return it gains more simple and powerful tools for aligning its
+ contents in ways that webapps and complex web pages often need.
<p>The contents of a flexbox can be laid out in any direction (left, right,
down, or even up!), can have their order swapped around dynamically (i.e.,
@@ -351,12 +352,12 @@
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
- this specification are defined in CSS Level 2 Revision 1 <a href="#CSS21"
- rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may expand
- the definitions of these value types: for example <a href="#CSS3COLOR"
- rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, when combined with
- this module, expands the definition of the <color> value type as
- used in this specification.
+ this specification are defined in CSS Level 2 Revision 1 <a
+ href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
+ modules may expand the definitions of these value types: for example <a
+ href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
+ when combined with this module, expands the definition of the
+ <color> value type as used in this specification.
<p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the <a
@@ -1829,20 +1830,39 @@
the flexbox items generate boxes in the box-tree, and how the rest of
this algorithm deals with the items.
- <li>
- <p>Layout the flexbox items using the shrink-to-fit algorithm. If the
- main size of a flexbox item is flexible, treat it as the preferred size
- of that flexible length. <strong>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.</strong></p>
+ <li>Determine the hypothetical main size of items
+ <ol>
+ <li>If item has a definite preferred size, it is the hypothetical main
+ size.
- <p>Each flexbox item now has a hypothetical main size.</p>
+ <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>
+
+ <p class=issue>The above definition of shrink-to-fit is copied from
+ CSS2.1 (section 10.3.5: Floats). CSS3 basic box model currently has
+ same text as well. Any suggestions for a better definition?</p>
+ </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>
<li>
<p>If the flexbox is single-line, collect all the flexbox items into a
single flexbox line.</p>
+ <li>
<p>If the flexbox is multi-line, group the flexbox items into multiple
lines:</p>
@@ -1881,7 +1901,7 @@
</ol>
<li>Find the actual main size of the flexbox. If the flexbox's main size
- doesn't rely on its contents, it's actual main size is calculated per the
+ doesn't rely on its contents, its actual main size is calculated per the
appropriate rules. Otherwise, its main size is the length of its longest
line, calculated by summing the main sizes of the margin boxes of each
flexbox item in the line, constrained by the flexbox's min and max main
@@ -1905,28 +1925,18 @@
single flexbox line's cross size is the cross size of the flexbox's
content box. End this step of the algorithm.
- <li>Collect all the flexbox items with a ‘<a
- href="#flex-item-align"><code
- class=property>flex-item-align</code></a>’ of ‘<a
- href="#flex-line-pack-start"><code class=css>start</code></a>’,
- ‘<a href="#flex-line-pack-end"><code
- class=css>end</code></a>’, ‘<a
- href="#flex-line-pack-center"><code class=css>center</code></a>’,
- or ‘<a href="#flex-line-pack-stretch"><code
- class=css>stretch</code></a>’, or a value of ‘<a
- href="#flex-align-baseline"><code class=css>baseline</code></a>’
- and a cross axis parallel to their inline axis, and find the maximum of
- the cross sizes of their margin boxes.
-
- <li>Collect all the flexbox items with a ‘<a
- href="#flex-item-align"><code
+ <li>If main axis is parallel to inline axis, collect all the flexbox
+ items with a ‘<a href="#flex-item-align"><code
class=property>flex-item-align</code></a>’ of ‘<a
- href="#flex-align-baseline"><code class=css>baseline</code></a>’
- and a cross axis perpendicular to their inline axis. 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
+ href="#flex-align-baseline"><code
+ class=property>baseline</code></a>’. 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>For remaining flexbox items, find the maximum of the cross sizes of
+ their margin boxes.
+
<li>The cross size of the flexbox line is the larger of the numbers
found in the previous two steps.
</ol>
@@ -1941,10 +1951,11 @@
final cross size is its hypothetical cross size.
<li>For each flexbox line, align the flexbox items per ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’.
+ href="#flex-item-align"><code
+ class=property>flex-item-align</code></a>’.
- <li>Align the flexbox lines per ‘<a href="#flex-item-align"><code
- class=property>flex-item-align</code></a>’. The leftover free-space
+ <li>Align the flexbox lines per ‘<a href="#flex-line-pack0"><code
+ class=property>flex-line-pack</code></a>’. The leftover free-space
is calculated by subtracting the sum of the flexbox line's cross sizes
from the cross size of the flexbox's content box.
</ol>
@@ -2109,9 +2120,9 @@
class=property>break-</code>’ properties are supported on flexbox,
on flexbox items and inside flexbox items.
- <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>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>Breaks in and around flexbox are determined as follows:
@@ -2120,157 +2131,225 @@
have effect as normal. If breaks inside flexbox are allowed, break points
are determined using following rules.
- <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>
-
- <ol>
- <li style="list-style:lower-latin">If flexbox starts on that page: the
- distance between start of content box of the flexbox and the end of
- available space
+ <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 style="list-style:lower-latin">If flexbox continues from previous
- page: the size of available space.
- </ol>
+ <li>If flexbox continues from previous page: the size of available
+ space.
+ </ol>
- <p>If as a result of this adjustment block-direction size of flexbox
- becomes negative, it is set to zero.
+ <p>If as a result of this adjustment block-direction size of flexbox
+ becomes negative, it is set to zero.</p>
- <ul>
- <li>When a possible break point needs to be found within an item,
+ <li><dfn id=forced-breaks-on-flexbox-items>Forced breaks on flexbox
+ items</dfn>
<ol>
- <li style="list-style:lower-latin">If the item has �break-inside:avoid�,
- it is pushed to the next page
+ <li>In a row-direction single-line flexbox, breaks before and after
+ items apply to the flexbox
- <li style="list-style:lower-latin">Otherwise, it may be broken,
- according to breaking rules and algorithms applicable to its display
- type. Forced breaks in content are handled normally.
+ <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>Forced break after the last item is applied to the flexbox
+
+ <li>Forced break before or after any other item terminates the set of
+ items to be laid out on this page
+ </ol>
</ol>
- </ul>
- <p>This is referred as �break inside the item is considered� in the
- following steps
+ <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>
- <ul>
- <li>Column-direction flexbox: single-line
+ <li>When necessary, a <dfn
+ id=break-inside-a-flexbox-item-is-considere>break inside a flexbox item
+ is considered</dfn> as follows:
<ol>
- <li style="list-style:lower-latin">Set of items that will fit on current
- page is determined by adding min/max adjusted preferred sizes of items
- while there is positive remaining space
-
- <li style="list-style:lower-latin">Forced breaks between items are
- honored and if applied, terminate the set of items that fit on the
- page.
+ <li>If the item has “break-inside:avoid”, it is pushed to the next
+ page
- <li style="list-style:lower-latin">If border box of an item doesn�t fit
- in current page, a break inside the item is considered
+ <li>Otherwise, it may be broken, according to breaking rules and
+ algorithms applicable to its display type.
- <li style="list-style:lower-latin">Items that fit on a page completely
- or partially are aligned according to �flex-pack� property,
- independently from the rest of flexbox content.
+ <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)
</ol>
- <li>Column-direction flexbox: multi-line
+ <li><b>Column-direction flexbox: single-line</b>
<ol>
- <li style="list-style:lower-latin">Items are collected in lines and laid
- out as usual, but in available space on current page.
+ <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 style="list-style:lower-latin">If border box of an item doesn�t fit
- on main-axis,
- <ol>
- <li style="list-style:lower-roman">If it is the last item of the last
- line, a break inside the item is considered
+ <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 style="list-style:lower-roman">Otherwise the item produces
- overflow. If visible, it is paginated using same rules as visible
- overflow of blocks in normal flow
- </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>If border box of an item doesn’t fit in available space, a break
+ inside the item is considered
+
+ <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.
</ol>
- <p class=issue>How to paginate overflow from vertical lines?</p>
+ <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>Row-direction flexbox
+ <li><b>Column-direction flexbox: multi-line</b>
<ol>
- <li style="list-style:lower-latin">Single-line flexbox is equivalent to
- one line of multiline flexbox
+ <li>Items are collected in lines and laid out as usual, but in available
+ space on current page.
- <li style="list-style:lower-latin">Main-axis space distribution in each
- line is done based on complete content of the line, including any
- content that is already laid out on preceding pages. The hypothetical
- size of items is calculated without space constraints on cross axis and
- without considering any break properties.
+ <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 style="list-style:lower-latin">Main-axis space distribution is
- repeated for every page. Results of the distribution may be different
- on pages of different size.
+ <li>Otherwise
+ <ol>
+ <li>If the flexbox is not at the top of the page, it is moved to the
+ next page.
- <li style="list-style:lower-latin">Lines of items are added one at a
- time while there is positive available space.
+ <li>If the flexbox is already at the top of the page, the item may
+ produce overflow. If ‘<code
+ 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
+ <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>
+ </ol>
+ </ol>
+ </ol>
- <li style="list-style:lower-latin">Within each line, items are sized and
- positioned as usual.
+ <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.
- <li style="list-style:lower-latin">Any items with baseline alignment
- must be aligned before considering breaks inside items.
+ <p>If page size varies and flexbox size depends on page size, this step
+ needs to be repeated on each page
- <li style="list-style:lower-latin">If border box of an item doesn�t fit
- in current page, a break inside the item is considered
+ <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 style="list-style:lower-latin">Break-before and break-after
- properties have no effect on flexbox items in row-direction flexbox.
- <p class=issue>Need a better way to handle forced breaks on items,
- consistent for row and column directions</p>
+ <li>Any items with baseline alignment must be aligned before considering
+ breaks inside items.
- <li style="list-style:lower-latin">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>If border box of an item doesn’t fit in current page, a break
+ inside the item is considered
- <li style="list-style:lower-latin">Items that fit completely or
- partially on current page are aligned on cross-axis
+ <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>Items that fit completely or partially on current page are aligned
+ on cross-axis
<ol>
- <li style="list-style:lower-roman">For the purposes of cross-axis
- alignment, minimum of remaining available space in flexbox and
- available space at current page is used.
+ <li>For the purposes of cross-axis alignment, minimum of remaining
+ available space in flexbox and available space at current page is
+ used.
- <li style="list-style:lower-roman">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>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.
</ol>
</ol>
- <li>Items may overflow flexbox for various reasons, including change of
- spacing due to breaks. If overflow is visible, all of the above breaking
- rules apply to the overflow content with no change
- </ul>
+ <li><b>Row-direction flexbox:multi-line</b>
+ <ol>
+ <li>Collect items into lines and determine line heights
+ <ol>
+ <li>
+ <p>If ‘<a href="#flex-line-pack0"><code
+ class=property>flex-line-pack</code></a>’ is ‘<a
+ href="#flex-line-pack-stretch"><code
+ 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
+
+ <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>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.
+ </ol>
+
+ <li>Lines are added one at a time, until out of available space or a
+ forced break is encountered
+
+ <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>Line packing is done on each page, with content on the page
+ </ol>
+ </ol>
<h2 id=conformance><span class=secno>9. </span> Conformance</h2>
<h3 id=conventions><span class=secno>9.1. </span> Document conventions</h3>
<p>Conformance requirements are expressed with a combination of descriptive
- assertions and RFC 2119 terminology. The key words �MUST�, �MUST NOT�,
- �REQUIRED�, �SHALL�, �SHALL NOT�, �SHOULD�, �SHOULD NOT�, �RECOMMENDED�,
- �MAY�, and �OPTIONAL� in the normative parts of this document are to be
- interpreted as described in RFC 2119. However, for readability, these
- words do not appear in all uppercase letters in this specification.
+ assertions and RFC 2119 terminology. The key words “MUST”, “MUST
+ NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
+ “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
+ normative parts of this document are to be interpreted as described in RFC
+ 2119. However, for readability, these words do not appear in all uppercase
+ letters in this specification.
<p>All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. <a
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
- <p>Examples in this specification are introduced with the words �for
- example� or are set apart from the normative text with
+ <p>Examples in this specification are introduced with the words “for
+ example” or are set apart from the normative text with
<code>class="example"</code>, like this:
<div class=example>
<p>This is an example of an informative example.</p>
</div>
- <p>Informative notes begin with the word �Note� and are set apart from the
- normative text with <code>class="note"</code>, like this:
+ <p>Informative notes begin with the word “Note” and are set apart from
+ the normative text with <code>class="note"</code>, like this:
<p class=note>Note, this is an informative note.
@@ -2409,7 +2488,7 @@
<li>is available to the general public. The implementation may be a
shipping product or other publicly available version (i.e., beta
- version, preview release, or �nightly build�). Non-shipping product
+ version, preview release, or “nightly build”). Non-shipping product
releases must have implemented the feature(s) for a period of at least
one month in order to demonstrate stability.
@@ -2647,6 +2726,11 @@
<li>block flexboxes, <a href="#block-flexbox"
title="block flexboxes"><strong>2.1.</strong></a>
+ <li>break inside a flexbox item is considered, <a
+ href="#break-inside-a-flexbox-item-is-considere"
+ title="break inside a flexbox item is considered"><strong>8.</strong></a>
+
+
<li>center, <a href="#flex-align-center"
title=center><strong>5.2.</strong></a>, <a href="#flex-line-pack-center"
title=center><strong>6.1.</strong></a>, <a href="#flex-pack-center"
@@ -2740,6 +2824,10 @@
<li>flex-wrap, <a href="#flex-wrap0"
title=flex-wrap><strong>3.2.</strong></a>
+ <li>Forced breaks on flexbox items, <a
+ href="#forced-breaks-on-flexbox-items"
+ title="Forced breaks on flexbox items"><strong>8.</strong></a>
+
<li>inline flexbox, <a href="#inline-flexbox"
title="inline flexbox"><strong>2.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.152
retrieving revision 1.153
diff -u -d -r1.152 -r1.153
--- Overview.src.html 14 Feb 2012 10:27:55 -0000 1.152
+++ Overview.src.html 16 Feb 2012 12:18:40 -0000 1.153
@@ -43,7 +43,7 @@
<dd><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a>
<dt>Issues List:</dt>
- <dd><p class=issue>Will be a bugzilla URL once I get a component added.</p>
+ <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Flexbox&resolution=---">Bugzilla Bugs for CSS regions</a></dd>
<dt>Discussion:</dt>
<dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line "<code>[css3-flexbox] …message topic…</code>"
@@ -891,15 +891,41 @@
<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>
- <p>Layout the flexbox items using the shrink-to-fit algorithm. If the main size of a flexbox item is flexible, treat it as the preferred size of that flexible length. <strong>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.</strong></p>
-
- <p>Each flexbox item now has a hypothetical main size.</p>
+ <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>
+
+ <p class="issue">The above definition of shrink-to-fit is
+ copied from CSS2.1 (section 10.3.5: Floats). CSS3 basic box
+ model currently has same text as well. Any suggestions for a
+ 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>
</li>
<li>
<p>If the flexbox is single-line, collect all the flexbox items into a single flexbox line.</p>
+ </li>
+ <li>
<p>If the flexbox is multi-line, group the flexbox items into multiple lines:</p>
<ol>
@@ -921,7 +947,7 @@
</ol>
</li>
- <li>Find the actual main size of the flexbox. If the flexbox's main size doesn't rely on its contents, it's actual main size is calculated per the appropriate rules. Otherwise, its main size is the length of its longest line, calculated by summing the main sizes of the margin boxes of each flexbox item in the line, constrained by the flexbox's min and max main size constraints.</li>
+ <li>Find the actual main size of the flexbox. If the flexbox's main size doesn't rely on its contents, its actual main size is calculated per the appropriate rules. Otherwise, its main size is the length of its longest line, calculated by summing the main sizes of the margin boxes of each flexbox item in the line, constrained by the flexbox's min and max main size constraints.</li>
<li>For each flexbox line, <i>resolve the flexible lengths</i> of the items contained within it. All flexbox items now have a final main size. Update each item's hypothetical cross size based on this main size.</li>
@@ -932,9 +958,14 @@
<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>Collect all the flexbox items with a 'flex-item-align' of ''start'', ''end'', ''center'', or ''stretch'', or a value of ''baseline'' and a cross axis parallel to their inline axis, and find the maximum of the cross sizes of their margin boxes.</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>Collect all the flexbox items with a 'flex-item-align' of ''baseline'' and a cross axis perpendicular to their inline axis. 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.
<li>The cross size of the flexbox line is the larger of the numbers found in the previous two steps.</li>
</ol>
@@ -944,9 +975,9 @@
<li>Determine the final cross size of each flexbox item. For each flexbox item, if it has ''flex-item-align:stretch'', its final cross size is the cross size of its flexbox line. For all other flexbox items, its final cross size is its hypothetical cross size.</li>
- <li>For each flexbox line, align the flexbox items per 'flex-align'.</li>
+ <li>For each flexbox line, align the flexbox items per 'flex-item-align'.</li>
- <li>Align the flexbox lines per 'flex-item-align'. The leftover free-space is calculated by subtracting the sum of the flexbox line's cross sizes from the cross size of the flexbox's content box.</li>
+ <li>Align the flexbox lines per 'flex-line-pack'. The leftover free-space is calculated by subtracting the sum of the flexbox line's cross sizes from the cross size of the flexbox's content box.</li>
</ol>
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
@@ -1058,127 +1089,150 @@
<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>
+consumed in previous pages. Consumed space before page break is
<ol>
-<li style="list-style:lower-latin">If flexbox starts on that
+<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 style="list-style:lower-latin">If flexbox continues from
+<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>When a possible break
-point needs to be found within an item,
+</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
+ <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>
+<li>When necessary, a <dfn>break inside a flexbox item is considered</dfn> as follows:
<ol>
-<li style="list-style:lower-latin">If the item has
-“break-inside:avoid”, it is pushed to the next page</li>
+ <li>If the item has
+ “break-inside:avoid”, it is pushed to the next page</li>
-<li style="list-style:lower-latin">Otherwise, it may be
-broken, according to breaking rules and algorithms applicable to its display
-type. Forced breaks in content are handled normally.</li>
+ <li>Otherwise, it may be
+ broken, according to breaking rules and algorithms applicable to its display
+ type. </li>
+
+ <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>This is
-referred as “break inside the item is considered” in the following steps</p>
-
-<li>Column-direction flexbox:
-single-line
+<li><b>Column-direction flexbox: single-line</b>
<ol>
-<li style="list-style:lower-latin">Set of items that will fit
-on current page is determined by adding min/max adjusted preferred sizes of
-items while there is positive remaining space</li>
+ <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 style="list-style:lower-latin">Forced breaks between
-items are honored and if applied, terminate the set of items that fit on the
-page.</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 style="list-style:lower-latin">If border box of an item
-doesn’t fit in current page, a break inside the item is considered</li>
+ <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>
-<li style="list-style:lower-latin">Items that fit on a page
-completely or partially are aligned according to ‘flex-pack’ property,
-independently from the rest of flexbox content.</li>
+ <li>If border box of an item
+ doesn’t fit in available space, a break inside the item is considered</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>
+
+ <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>Column-direction flexbox: multi-line
+<li><b>Column-direction flexbox: multi-line</b>
<ol>
-<li style="list-style:lower-latin">Items are collected in lines and
+<li>Items are collected in lines and
laid out as usual, but in available space on current page.</li>
-<li style="list-style:lower-latin">If border box of an item
+<li>If border box of an item
doesn’t fit on main-axis,
<ol>
-<li style="list-style:lower-roman">If it is the last item of
+<li>If it is the last item of
the last line, a break inside the item is considered</li>
-<li style="list-style:lower-roman">Otherwise the item
-produces overflow. If visible, it is paginated using same rules as visible
-overflow of blocks in normal flow</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>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
+
+ <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>
-
-<p class=issue>How to paginate overflow from vertical lines?</p>
</ol>
+</ol>
+
</li>
-<li>Row-direction flexbox
+<li><b>Row-direction flexbox: single-line</b>
<ol>
-<li style="list-style:lower-latin">Single-line flexbox is
-equivalent to one line of multiline flexbox</li>
-
-<li style="list-style:lower-latin">Main-axis space
-distribution in each line is done based on complete content of the line,
-including any content that is already laid out on preceding pages. The
-hypothetical size of items is calculated without space constraints on cross
-axis and without considering any break properties.</li>
-<li style="list-style:lower-latin">Main-axis space
-distribution is repeated for every page. Results of the distribution may be
-different on pages of different size.</li>
-
-<li style="list-style:lower-latin">Lines of items are added
-one at a time while there is positive available space.</li>
-
-<li style="list-style:lower-latin">Within each line, items
-are sized and positioned as usual.</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 style="list-style:lower-latin">Any items with baseline
-alignment must be aligned before considering breaks inside items.</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 style="list-style:lower-latin">If border box of an item
-doesn’t fit in current page, a break inside the item is considered</li>
+<li>Any items with baseline alignment must be aligned before considering breaks inside items.</li>
-<li style="list-style:lower-latin">Break-before and
-break-after properties have no effect on flexbox items in row-direction
-flexbox.
-<p class=issue>Need a better way to handle forced breaks on items, consistent for row and column directions</p>
-</li>
+<li>If border box of an item doesn’t fit in current page, a break inside the item is considered</li>
-<li style="list-style:lower-latin">Items that have fit
+<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 style="list-style:lower-latin">Items that fit completely or
-partially on current page are aligned on cross-axis
-
+<li>Items that fit completely or partially on current page are aligned on cross-axis
<ol>
-<li style="list-style:lower-roman">For the purposes of
+
+<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 style="list-style:lower-roman">If an item is broken in
+<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>
@@ -1187,10 +1241,35 @@
</ol>
</li>
-<li>Items may overflow flexbox
-for various reasons, including change of spacing due to breaks. If overflow is
-visible, all of the above breaking rules apply to the overflow content with no change</li>
+<li><b>Row-direction flexbox:multi-line</b>
+
+<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>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>
+ <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>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>Line packing is done on each page, with content on the page</li>
+
+</li>
+</ol>
+</li>
</ol>
<h2 id="conformance">
Received on Thursday, 16 February 2012 12:18:45 UTC