- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Feb 2012 10:27:57 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv19106
Modified Files:
Overview.html Overview.src.html
Log Message:
added page breaking algorithm
changed algorightm for flexible lengths resolutin
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.153
retrieving revision 1.154
diff -u -d -r1.153 -r1.154
--- Overview.html 7 Feb 2012 10:52:50 -0000 1.153
+++ Overview.html 14 Feb 2012 10:27:55 -0000 1.154
@@ -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, 7 February 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 14 February 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120207/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120207/</a>-->
+ <!--<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
@@ -77,7 +77,7 @@
<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:
@@ -237,7 +237,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>
@@ -351,12 +351,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
@@ -1952,181 +1952,325 @@
<p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
lengths</dfn> of the items within a flexbox line:
- <div class=issue>
- <p>Alex suggests that the following should work more simply:</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>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:
+ <ol>
+ <li>Freeze items with max violations.
+
+ <li>Go to step 2
+ </ol>
+
+ <li>Negative
+ <ol>
+ <li>Freeze items with min violations
+
+ <li>Go to step 2
+ </ol>
+ </ol>
+ </ol>
+
+ <div class=note>
+ <p>Previous algorithm - compare with above and chose one:</p>
<ol>
- <li>distribute space
+ <li>If this is the first time this step is reached in the current
+ invocation of this algorithm, <a
+ href="#distribute-the-free-space"><i>distribute the free space</i></a>
+ in the flexbox line, then <a
+ href="#fix-size-constraint-violations"><i>fix max size
+ violations</i></a>, then <a
+ href="#fix-size-constraint-violations"><i>fix min size
+ violations</i></a>.
- <li>fix max violations
+ <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, <a
+ href="#distribute-the-free-space"><i>distribute the free space</i></a>,
+ then <a href="#fix-size-constraint-violations"><i>fix max size
+ violations</i></a>.
- <li>distribute space
+ <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, <a
+ href="#distribute-the-free-space"><i>distribute the free space</i></a>,
+ then <a href="#fix-size-constraint-violations"><i>fix min size
+ violations</i></a>.
- <li>fix min violations. items with violation lose flexibility.
+ <li>If either of the previous two steps changed the set of items
+ violating their constraints, restart this algorithm.
- <li>repeat until there are no more violations
+ <li>Otherwise, the used value of the main size property of every flexible
+ item is the item's preferred size.
</ol>
- <p>I need to think on this and ensure it won't give suboptimal results in
- some cases.</p>
- </div>
+ <p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
+ a flexbox line:</p>
- <ol>
- <li>If this is the first time this step is reached in the current
- invocation of this algorithm, <a
- href="#distribute-the-free-space"><i>distribute the free space</i></a> in
- the flexbox line, then <a href="#fix-size-constraint-violations"><i>fix
- max size violations</i></a>, then <a
- href="#fix-size-constraint-violations"><i>fix min size
- violations</i></a>.
+ <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>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, <a
- href="#distribute-the-free-space"><i>distribute the free space</i></a>,
- then <a href="#fix-size-constraint-violations"><i>fix max size
- violations</i></a>.
+ <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>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, <a
- href="#distribute-the-free-space"><i>distribute the free space</i></a>,
- then <a href="#fix-size-constraint-violations"><i>fix min size
- violations</i></a>.
+ <li>
+ <dl>
+ <dt>If the available free space is zero:
- <li>If either of the previous two steps changed the set of items violating
- their constraints, restart this algorithm.
+ <dd>Do nothing.
- <li>Otherwise, the used value of the main size property of every flexible
- item is the item's preferred size.
- </ol>
+ <dt>If the available free space is positive:
- <p class=issue>I'm pretty sure the previous algorithm is guaranteed to
- terminate. I'm not absolutely certain, though. Help? (It's clear that in
- practice, it will almost always terminate in one or two iterations.)
+ <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.
- <p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
- a flexbox line:
+ <dt>If the available free space is negative:
- <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.
+ <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>
+ </dl>
+ </ol>
- <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.
+ <p>To <dfn id=fix-size-constraint-violations
+ title="fix max size violations|fix min size violations">fix size
+ constraint violations</dfn> in a flexbox line:</p>
- <li>
- <dl>
- <dt>If the available free space is zero:
+ <ol>
+ <li>If none of the items on the line violate their min or max size
+ constraints (as appropriate), exit this algorithm.
- <dd>Do nothing.
+ <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.
- <dt>If the available free space is positive:
+ <li><a href="#distribute-the-free-space"><i>Distribute the free
+ space</i></a>, then restart this algorithm.
+ </ol>
+ </div>
- <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.
+ <h2 id=pagination><span class=secno>8. </span>Page breaks in flexbox</h2>
- <dt>If the available free space is negative:
+ <p>Flexboxes can break across pages between items, between lines of items
+ (in multi-line mode) and inside items, as long as ‘<code
+ class=property>break-</code>’ property allow that. All ‘<code
+ class=property>break-</code>’ properties are supported on flexbox,
+ on flexbox items and inside flexbox items.
- <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>
- </dl>
- </ol>
+ <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>To <dfn id=fix-size-constraint-violations
- title="fix max size violations|fix min size violations">fix size
- constraint violations</dfn> in a flexbox line:
+ <p>Breaks in and around flexbox are determined as follows:
<ol>
- <li>If none of the items on the line violate their min or max size
- constraints (as appropriate), exit this algorithm.
+ <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>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>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><a href="#distribute-the-free-space"><i>Distribute the free
- space</i></a>, then restart this algorithm.
+ <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 style="list-style:lower-latin">If flexbox continues from previous
+ page: the size of available space.
</ol>
- <h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
+ <p>If as a result of this adjustment block-direction size of flexbox
+ becomes negative, it is set to zero.
- <p class=issue>TODO: define how flexbox should break on pages, columns,
- etc. This may or may not be normative until there is more than one
- implementation.
+ <ul>
+ <li>When a possible break point needs to be found within an item,
+ <ol>
+ <li style="list-style:lower-latin">If the item has �break-inside:avoid�,
+ it is pushed to the next page
- <p>Very roughly:
+ <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.
+ </ol>
+ </ul>
+
+ <p>This is referred as �break inside the item is considered� in the
+ following steps
<ul>
- <li>Flexboxes can beak across pages between items, between rows of items
- (in multi-line mode) and inside items, as long as ‘<code
- class=property>break-</code>’ property allow that. All ‘<code
- class=property>break-</code>’ properties are supported on flexbox,
- on flexbox items and inside flexbox items.
+ <li>Column-direction flexbox: single-line
+ <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>Breaking behavior of a single-line vertical flexbox should be
- identical to a block in normal flow where children have same sizes and
- positions (e.g. explicitly set to match computed values in flexbox), same
- content and same breaking properties. <span class=issue>This is good goal
- or guidance, but not necessarily good normative definition. Get
- specific.</span>
+ <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>Breaking behavior of a horizontal single-line flexbox should be
- similar (not necessarily identical) to that of a single-row table with
- same sizing.
+ <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>In horizontal flexbox, a forced break within an items causes
- subsequent content of that item to go to next container, but it doesn't
- affect sibling items or their content.
+ <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.
+ </ol>
- <li>In horizontal multi-line flexbox, values of ‘<code
- class=property>break-before</code>’ and ‘<code
- class=property>break-after</code>’ for each line are computed from
- combinatoin of properties on children that fit in that line (or would
- have fit, given available width and infinite height)
- </ul>
+ <li>Column-direction flexbox: multi-line
+ <ol>
+ <li style="list-style:lower-latin">Items are collected in lines and laid
+ out as usual, but in available space on current page.
- <p class=issue>TODO: define breaking of vertical multi-line flexbox
+ <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 class=issue>TODO: add more detail: how breaking affect sizing (for
- broken boxes and boxes after the break) and alignment
+ <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>
+ </ol>
+
+ <p class=issue>How to paginate overflow from vertical lines?</p>
+
+ <li>Row-direction flexbox
+ <ol>
+ <li style="list-style:lower-latin">Single-line flexbox is equivalent to
+ one line of multiline flexbox
+
+ <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 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 style="list-style:lower-latin">Lines of items are added one at a
+ time while there is positive available space.
+
+ <li style="list-style:lower-latin">Within each line, items are sized and
+ positioned as usual.
+
+ <li style="list-style:lower-latin">Any items with baseline alignment
+ must be aligned before considering breaks inside items.
+
+ <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 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 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 style="list-style:lower-latin">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 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.
+ </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>
<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.
@@ -2265,7 +2409,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.
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.151
retrieving revision 1.152
diff -u -d -r1.151 -r1.152
--- Overview.src.html 7 Feb 2012 10:52:50 -0000 1.151
+++ Overview.src.html 14 Feb 2012 10:27:55 -0000 1.152
@@ -951,17 +951,47 @@
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
- <div class='issue'>
- <p>Alex suggests that the following should work more simply:</p>
+ <ol>
+ <li>Determine sign of flexibility
<ol>
- <li>distribute space
- <li>fix max violations
- <li>distribute space
- <li>fix min violations. items with violation lose flexibility.
- <li>repeat until there are no more violations
+ <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>I need to think on this and ensure it won't give suboptimal results in some cases.</p>
- </div>
+ <p>for the rest of the algorithm use flexibility with the sign determined in this step
+ </li>
+
+ <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:
+ <ol>
+ <li>Freeze items with max violations.
+ <li>Go to step 2
+ </ol>
+ <li>Negative
+ <ol>
+ <li>Freeze items with min violations
+ <li>Go to step 2
+ </ol>
+ </ol>
+ </ol>
+
+ <div class='note'>
+ <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>
@@ -975,7 +1005,6 @@
<li>Otherwise, the used value of the main size property of every flexible item is the item's preferred size.</li>
</ol>
- <p class='issue'>I'm pretty sure the previous algorithm is guaranteed to terminate. I'm not absolutely certain, though. Help? (It's clear that in practice, it will almost always terminate in one or two iterations.)</p>
<p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
@@ -1005,31 +1034,164 @@
<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 class="issue">TODO: define how flexbox should break on pages, columns, etc. This may or may not be normative until there is more than one implementation.</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>Very roughly:</p>
+<p>Breaks in and around
+flexbox are determined as follows:</p>
- <ul>
- <li>Flexboxes can beak across pages between items, between rows 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.</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>Breaking behavior of a single-line vertical flexbox should be identical to a block in normal flow where children have same sizes and positions (e.g. explicitly set to match computed values in flexbox), same content and same breaking properties. <span class="issue">This is good goal or guidance, but not necessarily good normative definition. Get specific.</span> </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>
- <li>Breaking behavior of a horizontal single-line flexbox should be similar (not necessarily identical) to that of a single-row table with same sizing.</li>
+<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>
- <li>In horizontal flexbox, a forced break within an items causes subsequent content of that item to go to next container, but it doesn't affect sibling items or their content.</li>
+<li style="list-style:lower-latin">If flexbox continues from
+previous page: the size of available space.</li>
+</ol>
- <li>In horizontal multi-line flexbox, values of 'break-before' and 'break-after' for each line are computed from combinatoin of properties on children that fit in that line (or would have fit, given available width and infinite height)</li>
- </ul>
+<p>If as a result of this adjustment block-direction size of flexbox
+becomes negative, it is set to zero.</p>
- <p class="issue">TODO: define breaking of vertical multi-line flexbox</p>
+<li>When a possible break
+point needs to be found within an item,
- <p class="issue">TODO: add more detail: how breaking affect sizing (for broken boxes and boxes after the break) and alignment</p>
+<ol>
+<li style="list-style:lower-latin">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>
+</ol>
+</li>
+
+<p>This is
+referred as “break inside the item is considered” in the following steps</p>
+<li>Column-direction flexbox:
+single-line
+
+<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 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>
+
+<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 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>
+</ol>
+</li>
+
+<li>Column-direction flexbox: multi-line
+
+<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>
+
+<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</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>
+</ol>
+</li>
+
+<p class=issue>How to paginate overflow from vertical lines?</p>
+</ol>
+</li>
+
+<li>Row-direction flexbox
+
+<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 style="list-style:lower-latin">Any items with baseline
+alignment must be aligned before considering breaks inside items.</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 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 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>
+
+<li style="list-style:lower-latin">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>
+
+<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>
+</ol>
+</li>
+</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>
+
+</ol>
<h2 id="conformance">
Conformance</h2>
Received on Tuesday, 14 February 2012 10:28:00 UTC