- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 04:31:03 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv16533
Modified Files:
Overview.html Overview.src.html
Log Message:
* issues moved to Bugzilla
* renamed 'flex-wrap' keyword 'none' to 'nowrap'
* moved 'flex-line-pack' property to Alignment section
* promoted 'display' and "flex items" one level up to align with multi-line in TOC
* added auto-margin alignment
* algorithm: updated to handle auto-margin
* algorithm: added a step in line sizing for flex-line-pack:stretch
* page breaking: breaks inside items are not allowed in any multiline flexboxes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.159
retrieving revision 1.160
diff -u -d -r1.159 -r1.160
--- Overview.html 18 Feb 2012 00:08:00 -0000 1.159
+++ Overview.html 28 Feb 2012 04:31:00 -0000 1.160
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
<html lang=en>
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
@@ -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, 18 February 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 28 February 2012</h2>
[...1493 lines suppressed...]
- href="#flex-line-pack-stretch" title=stretch><strong>6.1.</strong></a>
+ title=stretch><strong>8.2.</strong></a>, <a
+ href="#flex-line-pack-stretch" title=stretch><strong>8.4.</strong></a>
<li>style sheet
<ul>
<li>as conformance class, <a href="#style-sheet"
- title="style sheet, as conformance class"><strong>9.2.</strong></a>
+ title="style sheet, as conformance class"><strong>11.2.</strong></a>
</ul>
- <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.2.</strong></a>
+ <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>6.2.</strong></a>
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
- title=wrap-reverse><strong>3.2.</strong></a>
+ title=wrap-reverse><strong>6.2.</strong></a>
</ul>
<!--end-index-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.157
retrieving revision 1.158
diff -u -d -r1.157 -r1.158
--- Overview.src.html 18 Feb 2012 00:08:01 -0000 1.157
+++ Overview.src.html 28 Feb 2012 04:31:01 -0000 1.158
@@ -74,8 +74,6 @@
<h2 class="no-num no-toc" id="table">Table of contents</h2>
<!--toc-->
-<p class=issue>Add "Canonical Order" fields to all the propdef tables, per <a href="http://wiki.csswg.org/spec/format-update">http://wiki.csswg.org/spec/format-update</a>.</p>
-
<h2 id="intro">
Introduction</h2>
@@ -142,8 +140,8 @@
<p>In the <i>cross axis</i>, <i>flexbox items</i> can either "flex" to fill the available space or be aligned within the space with the 'flex-align' property. If a flexbox is <i>multi-line</i>, new lines are added in the <i>cross-end</i> direction, and can similarly be aligned, centered, or distributed within the flexbox with the 'flex-line-pack' property.</p>
-<h3 id='display-flexbox'>
-New values for 'display' property</h3>
+<h2 id='display-flexbox'>
+New values for 'display' property</h2>
<table class="propdef">
<tr>
@@ -171,16 +169,9 @@
<p>If an element's specified value for 'display' is ''inline-flexbox'' and the element is floated or absolutely positioned, the computed value of 'display' must be ''flexbox''.</p>
<p>A flexbox establishes a new <dfn>flexbox formatting context</dfn> for its contents. This is similar to a block formatting context root: floats do not intrude into the flexbox, and the flexbox's margins do not collapse with the margins of its contents. Additionally, each of the <i>flexbox items</i> establish a new formatting context for its contents.</p>
- <p class="issue">Although the term "flexbox formatting context" is defined here,
- it is not used anywhere else. BFC is the commonly used term for what it means here.
- Perhaps this could say that flexbox formatting context *is* a block formatting context,
- with different rules for how blocks are formatted but same protection from external floats etc.
- Then the terms can be used interchangeably, as they will be anyway...</p>
-<h3 id='flex-items'>
-Flexbox Items</h3>
-
- <p class='issue'>Add a ''display:flexbox-item'' value, so I can do flexbox-fixup (wrapping an anonymous flexbox around children that have declared themselves to be items).</p>
+<h2 id='flex-items'>
+Flexbox Items</h2>
<p>Flexbox layout algorithm operates on <i>flexbox items</i>, which are boxes that satisfy at least one of the following criteria:</p>
@@ -246,8 +237,8 @@
<p>Notice that block element "not-an-item6.3" is not a separate flexbox item, because it is contained inside an inline element which is being wrapped into an anonymous flex item. Similarly, the block element "not-an-item1.5" is not a flexbox item, because it's absolutely positioned and thus out of flow.</p>
</div>
-<h4 id='abspos-flexbox-items'>
-Positioning Absolutely Positioned Flexbox Items</h4>
+<h3 id='abspos-flexbox-items'>
+Absolutely Positioned Flexbox Children</h3>
<p>Absolutely positioned children of a flexbox are not <i>flexbox items</i>, but they leave behind "placeholders" in their normal position in the box tree. These placeholders are anonymous inline boxes with a width and height of ''0px'', and they interact normally with the flexbox layout algorithm. In particular, they'll trigger the creation an anonymous flexbox item wrapper boxes, or join neighboring inline elements in <em>their</em> anonymous flexbox item wrapper boxes.</p>
@@ -255,7 +246,73 @@
<p class='note'>Note: In most cases, this means that absolutely positioned items will have no effect on flexbox layout, even if they force the generation of an anonymous flexbox item wrapper, because those wrapper items will also collapse to zero size and have no effect. The only exception is when the flexbox has ''flex-pack:justify'', in which case the anonymous flexbox item will cause there to be two packing spaces where there would otherwise be only one, which will appear as a double-size space between two "real" items.</p>
-<h2 id='ordering-orientation'>
+
+<h2 id='multi-line'>
+Multi-line Flexbox</h2>
+
+ <p>A flexbox can be either <i>single-line</i> or <i>multi-line</i>, depending on the 'flex-wrap' property. A <dfn>single-line</dfn> flexbox lays out all of its children in a single line, even if that would cause the flexbox to overflow its bounds. A <dfn>multi-line</dfn> flexbox breaks its <i>flexbox items</i> across multiple lines to avoid overflowing, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. Every line contains at least one <i>flexbox item</i>, unless the flexbox itself is completely empty.</p>
+
+ <p>When additional lines are created, they are stacked in the flexbox in the <i>cross axis</i>. Each line is completely independent; flexible lengths and the 'flex-pack' and 'flex-align' properties only consider the items on a single line at a time. The <i>main size</i> of a line is the same as the <i>main size</i> of the flexbox's content box. The <i>cross size</i> of a line depends on whether the flexbox is <i>single-line</i> or <i>multi-line</i>: the <i>cross size</i> of the sole line in a <i>single-line</i> flexbox is the same as the <i>cross size</i> of the flexbox's content box, while the <i>cross size</i> of a line in a <i>multi-line</i> flexbox is the minimum size necessary to contain the <i>flexbox items</i> on the line, after aligning them with 'flex-align'. The lines themselves are then aligned within a flexbox with the 'flex-line-pack' property.</p>
+
+ <div class=example>
+ <p>This example shows four buttons that do not fit horizontally.</p>
+
+ <pre><style>
+#div1 {
+ display: flexbox;
+ flex-flow: row wrap;
+ width: 300px;
+}
+button {
+ flex:80px 1;
+}
+<style>
+
+<div id="div1">
+ <button id="button1">Elephant</button>
+ <button id="button2">Tiger</button>
+ <button id="button3">Antelope</button>
+ <button id="button4">Wildebeest</button>
+</div></pre>
+
+ <p>The buttons are first set to their preferred widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the 'flex-flow' property specifies a multi-line flexbox (due to the ''wrap'' keyword appearing in its value), the flexbox will create an additional line to contain the last button.</p>
+
+ <p>Flexibility is applied to each element, separately for each line. The first line has 60 pixels of remaining space and all of the buttons have the same flexibility, so each of the three buttons on that line will receive 20 pixels of extra width, ending up 100px wide. The remaining button is on a line of its own and will stretch to the entire width of the line, or 300 pixels.</p>
+
+ <div style="width:300px; border:medium solid green; overflow: hidden;">
+ <button style="width:100px; float: left;">Elephant</button>
+ <button style="width:100px; float: left;">Tiger</button>
+ <button style="width:100px; float: left;">Antelope</button>
+ <button style="width:300px; float: left;">Wildebeest</button>
+ </div>
+
+ <p>If the box was resized, the buttons may rearrange onto different lines as necessary.</p>
+
+ <p>If the style rules in the example above were changed to the following:</p>
+
+ <pre>
+#div1 {
+ display: flexbox;
+ flex-flow: row wrap;
+ flex-pack: center;
+ width: 300px;
+}
+button {
+ flex:80px 1;
+ max-width: 90px;
+}</pre>
+
+ <p>Similar to the previous example, the first three buttons will fit on the first line, and the last button will wrap onto a new line. However, when the buttons attempt to flex they can only grow to 90px each, due to their 'max-width' property. This leaves 30px of free space on the first line and 210px of free space on the second line. Because 'flex-pack' is set to ''center'', the buttons will be centered on each line, with the free space split equally on either side.</p>
+
+ <div style="width:300px; border:medium solid green; text-align:center;">
+ <button style="width:90px; float: left; margin-left: 15px;">Elephant</button>
+ <button style="width:90px; float: left;">Tiger</button>
+ <button style="width:90px; float: left;">Antelope</button>
+ <button style="width:90px">Wildebeest</button>
+ </div>
+ </div>
+
+<h2>
Ordering and Orientation</h2>
<p>The first level of flexbox functionality is the ability to lay out a flexbox's contents in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as using the 'float' property to lay out a horizontal navigation bar (which then requires further effort with the 'clear' property or others to make the elements interact nicely with the rest of the page). This functionality is exposed through the 'flex-flow' and 'flex-order' properties.</p>
@@ -315,10 +372,10 @@
<td><dfn>flex-wrap</dfn>
<tr>
<th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
- <td>none | wrap | wrap-reverse
+ <td>nowrap | wrap | wrap-reverse
<tr>
<th>Initial:
- <td>none
+ <td>nowrap
<tr>
<th>Applies To:
<td>flexboxes
@@ -339,10 +396,9 @@
<p>The 'flex-wrap' property controls whether the flexbox is <i>single-line</i> or <i>multi-line</i>, and the direction of the <i>cross axis</i>, which affects the direction new lines are stacked in and the meaning of the 'flex-align', 'flex-item-align', and 'flex-line-pack' properties.</p>
<dl>
- <dt><dfn id='flex-flow-none'>none</dfn></dt>
+ <dt>nowrap</dt>
<dd>The flexbox is <i>single-line</i>. The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.
- <p class='issue'>For consistency with 'white-space', we should use ''nowrap''. For consistency with 'text-wrap', we should use ''none''. ''none'' is the less dumb of these. Can we switch both this and 'text-wrap' to ''no-wrap''?</p>
- </dd>
+ </dd>
<dt><dfn id='flex-flow-wrap'>wrap</dfn></dt>
<dd>The flexbox is <i>multi-line</i>. The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</dd>
@@ -537,25 +593,20 @@
<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>
-
<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><number>s</code>. 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 preferred size. It can be set to any value that would be valid in the 'width' or 'height' property,
+ except values that are not applicable to a component value (of values
+ defined in CSS2.1, only 'inherit' is not valid for <code><preferred-size></code>; in the future other values may be introduced that are not applicable as length component).
+If omitted, the preferred size 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> 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><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 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>
- <p class='issue'>Transitioning to/from a <length> (or to/from a <flex> with 0 flexibility) doesn't work well if it's the only flexible item in the flexbox. Rather than smoothly transitioning, it suddenly jumps in size when the flexibility becomes non-zero. Can we fix this, perhaps with a value that represents a percentage of the free space or something?</p>
-
<div class='example'>
<p>Flexibility allows elements to respond directly to the available space, in ways that are difficult or impossible in normal CSS. One common example is a page with one segment intended to stay on screen, and another section which may be long but which shouldn't scroll the page, like a chat room:</p>
@@ -583,16 +634,15 @@
<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>
-
<h2 id='alignment'>
Alignment</h2>
- <p>After a flexbox's contents have finished their flexing, they can be aligned in both the <i>main axis</i> with 'flex-pack' and the <i>cross axis</i> with 'flex-align' and 'flex-item-align'. These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering.</p>
+ <p>After a flexbox's contents have finished their flexing and dimensions of
+ margin boxes of all flexbox items are finalized, they can be aligned in both the <i>main axis</i> with 'flex-pack' and the <i>cross axis</i> with 'flex-align' and 'flex-item-align'. These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering.</p>
<h3 id='flex-pack'>
-Main Axis Alignment: the 'flex-pack' property</h3>
+Axis Alignment: the 'flex-pack' property</h3>
<table class=propdef>
<tr>
@@ -621,7 +671,8 @@
<td>no
</table>
- <p>The 'flex-pack' property aligns <i>flexbox items</i> in the <i>main axis</i> of the current line of the flexbox. This is done <em title=''>after</em> any flexible lengths have been resolved. Typically it helps distribute extra free space leftover when either all the <i>flexbox items</i> on a line are inflexible, or are flexible but have reach their maximum size, but it also exerts some control over the alignment of items when they overflow the line.</p>
+ <p>The 'flex-pack' property aligns <i>flexbox items</i> in the <i>main axis</i> of the current line of the flexbox. This is done <em title=''>after</em> any flexible lengths
+ and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the <i>flexbox items</i> on a line are inflexible, or are flexible but have reach their maximum size, but it also exerts some control over the alignment of items when they overflow the line.</p>
<dl>
<dt><dfn id='flex-pack-start'>start</dfn></dt>
@@ -732,25 +783,6 @@
</dd>
</dl>
- <div class="issue"><p>Finalize and define what happens to auto margin.
- <p>Proposals:
- <ul>
- <li>cross-axis margins (align):
- <ol>
- <li>'auto' is zero
- <li>auto margins applied before alignment, map directly to alignment values (start/end/center)
- <li>auto margins applied before alignment, do safe align (flex-align does 'true center' etc.)
- </ol>
- </li>
- <li>main-axis margins (pack):
- <ol>
- <li>'auto' is zero
- <li>if there is positive extra space after flexing (and before pack), distribute it equally to auto margins.
- </ol>
- </li>
- </p>
- </div>
-
<div class='figure'>
<img src="images/flex-align.svg" width=508 height=377>
<p class='caption'>An illustration of the five 'flex-align' keywords and their effects on a flexbox with four colored items.</p>
@@ -780,71 +812,43 @@
</div>
-<h2 id='multi-line'>
-Multi-line Flexbox</h2>
-
- <p>A flexbox can be either <i>single-line</i> or <i>multi-line</i>, depending on the 'flex-wrap' property. A <dfn>single-line</dfn> flexbox lays out all of its children in a single line, even if that would cause the flexbox to overflow its bounds. A <dfn>multi-line</dfn> flexbox breaks its <i>flexbox items</i> across multiple lines to avoid overflowing, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. Every line contains at least one <i>flexbox item</i>, unless the flexbox itself is completely empty.</p>
-
- <p>When additional lines are created, they are stacked in the flexbox in the <i>cross axis</i>. Each line is completely independent; flexible lengths and the 'flex-pack' and 'flex-align' properties only consider the items on a single line at a time. The <i>main size</i> of a line is the same as the <i>main size</i> of the flexbox's content box. The <i>cross size</i> of a line depends on whether the flexbox is <i>single-line</i> or <i>multi-line</i>: the <i>cross size</i> of the sole line in a <i>single-line</i> flexbox is the same as the <i>cross size</i> of the flexbox's content box, while the <i>cross size</i> of a line in a <i>multi-line</i> flexbox is the minimum size necessary to contain the <i>flexbox items</i> on the line, after aligning them with 'flex-align'. The lines themselves are then aligned within a flexbox with the 'flex-line-pack' property.</p>
-
- <div class=example>
- <p>This example shows four buttons that do not fit horizontally.</p>
-
- <pre><style>
-#div1 {
- display: flexbox;
- flex-flow: row wrap;
- width: 300px;
-}
-button {
- flex:80px 1;
+<h3 id='auto-margins'>
+Resolving 'auto' margins</h3>
+<p>
+Margins on flexbox items can be set to 'auto', with effect very similar to auto
+margins in normal flow. </p>
+<ul>
+ <li>Through calculations of preferred sizes and flexible lenghts, auto
+ margins are considered to be zero.</li>
+ <li> Immediately <em>before</em> pack and align steps, if there are any
+ auto margins on items in the direction of alignment and there is positive
+ free space, the free space is distributed equally to the auto margins. </li>
+ <li>If free space was distributied to auto margins, the following pack or align
+ step has no effect.</li>
+</ul>
+<div class="example">
+<p>Auto margins can be used for simple alignment or for fine control.</p>
+ <p>Note that auto margins work consistently in both dimensions, so a simple
+ markup like this</p>
+ <pre>div { display:-ms-box;
+ width:4em; height:4em; background:silver;
}
-<style>
-
-<div id="div1">
- <button id="button1">Elephant</button>
- <button id="button2">Tiger</button>
- <button id="button3">Antelope</button>
- <button id="button4">Wildebeest</button>
-</div></pre>
-
- <p>The buttons are first set to their preferred widths, in this case 80 pixels. This will allow the first three buttons to fit in 240 pixels with 60 pixels left over of remaining space. Because the 'flex-flow' property specifies a multi-line flexbox (due to the ''wrap'' keyword appearing in its value), the flexbox will create an additional line to contain the last button.</p>
-
- <p>Flexibility is applied to each element, separately for each line. The first line has 60 pixels of remaining space and all of the buttons have the same flexibility, so each of the three buttons on that line will receive 20 pixels of extra width, ending up 100px wide. The remaining button is on a line of its own and will stretch to the entire width of the line, or 300 pixels.</p>
-
- <div style="width:300px; border:medium solid green; overflow: hidden;">
- <button style="width:100px; float: left;">Elephant</button>
- <button style="width:100px; float: left;">Tiger</button>
- <button style="width:100px; float: left;">Antelope</button>
- <button style="width:300px; float: left;">Wildebeest</button>
- </div>
-
- <p>If the box was resized, the buttons may rearrange onto different lines as necessary.</p>
-
- <p>If the style rules in the example above were changed to the following:</p>
+p { margin:auto; }
+<div><p>OK</p></div></pre>
+ <p>will center the single child:
+ <img alt="image of square OK button" height="82" src="images/OK.png" width="82"></p>
+ <p>And this</p>
- <pre>
-#div1 {
- display: flexbox;
- flex-flow: row wrap;
- flex-pack: center;
- width: 300px;
+<pre>div { display:flexbox;
+ width:calc(100% - 4em); height:calc(100% - 4em);
+ border: 1em solid blue; border-radius:50%;
+ margin:auto;
}
-button {
- flex:80px 1;
- max-width: 90px;
-}</pre>
-
- <p>Similar to the previous example, the first three buttons will fit on the first line, and the last button will wrap onto a new line. However, when the buttons attempt to flex they can only grow to 90px each, due to their 'max-width' property. This leaves 30px of free space on the first line and 210px of free space on the second line. Because 'flex-pack' is set to ''center'', the buttons will be centered on each line, with the free space split equally on either side.</p>
-
- <div style="width:300px; border:medium solid green; text-align:center;">
- <button style="width:90px; float: left; margin-left: 15px;">Elephant</button>
- <button style="width:90px; float: left;">Tiger</button>
- <button style="width:90px; float: left;">Antelope</button>
- <button style="width:90px">Wildebeest</button>
- </div>
- </div>
-
+div#demo { width:9em; height:9em; }</pre>
+<pre><div id="demo"><div><div></div></div></div></pre>
+<p>will produce nested centered boxes:
+<img alt="concentric blue circles" height="191" src="images/target.png" width="210"></p>
+</div>
<h3 id='flex-line-pack'>
'flex-line-pack' property</h3>
@@ -958,10 +962,17 @@
<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>
+ <div class="issue"><p>TODO: define shrink-to-fit. It works
+ differently in row/column flexboxes:</p>
+ <ul>
+ <li>In horizontal, STF is max-content. </li>
+ <li>In vertical, cross-axis
+ alignment has to happen first, then main-axis STF size can
+ be calculated. In multi-line vertical (tricky case), auto
+ sizes on cross axis are resolved as if it was
+ single-line.</li>
+ </ul>
+ </div>
</li>
</ol>
@@ -994,14 +1005,32 @@
</ol>
</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>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.
+ If any margins are set to 'auto', consider them to be set to zero until
+ resolved in a separate step.</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>
+ <li>For each flexbox line,
+ <ol>
+ <li><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>
- <li>For each flexbox line, align the flexbox items per 'flex-pack'. The leftover free-space for each line is calculated by subtracting the sum of the main sizes of the flexbox items on the line from the main size of the flexbox's content box.</li>
+ <li>Calculate the leftover free-space by subtracting the sum of the
+ margin-box main sizes of the items on the line from the main size of the flexbox's content box.</li>
+ <li>Resolve 'auto' margins on main axis:<ol>
+ <li>If leftover free-space is positive and any items on this
+ line have at least one main-axis margin set to 'auto',
+ distribute the leftover free-space equally to these margins.</li>
+ <li>If leftover free-space is negative, any main-axis 'auto'
+ margins on items in this line are set to zero.</li>
+ </ol>
+ </li>
+ <li>
+ Align the items along the main axis per 'flex-pack'.
+ </li>
+ </ol>
+ </li>
- <li>Calculate the cross size of each flexbox line. For each flexbox line:
-
+ <li>Calculate the cross size of each flexbox line. For each flexbox
+ line:
<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>
@@ -1010,16 +1039,34 @@
<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>
+ <li>If the flexbox is multi-line, has a definite cross size,
+ 'flex-line-pack' is set to 'stretch' and sum of cross size of
+ all lines is less than cross size of content box, increase cross
+ size of each line by equal amount to exactly match the cross
+ size of content box.</li>
</ol>
-
- <p>If the flexbox doesn't have a definite cross size, the cross size of its content box is the sum of the cross sizes of all of its lines.</p>
</li>
- <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>If the flexbox doesn't have a definite cross size, the cross size of its content box is the sum of the cross sizes of all of its lines.</li>
+
+ <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
+ set so that its margin-box cross size is equal to cross-size of its flexbox line. For all other flexbox items, its final cross size is its hypothetical cross size.
+ If the result conflicts with 'min-width', 'max-width', 'min-height' or
+ 'max-height', correct the result to comply the the restrictions.</li>
+ <p class="issue">'auto' height must only grow, not shrink here</p>
+ <li>Resolve 'auto' margins on cross axis. For each flexbox item, if its
+ margin box cross size is smaller than cross size of its line and it has
+ any margins in cross direction set to 'auto', distribute the difference
+ equaly to the auto margins. </li>
<li>For each flexbox line, align the flexbox items per 'flex-item-align'.</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>
+ <li>Layout all items again in their final size and position.
+ Implementations can determine when this step is needed and how it can be
+ optimized, but for precise results it has to be assumed that this step
+ is performed, because the layout of each item's content may change when
+ ea</li>
</ol>
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
@@ -1081,52 +1128,6 @@
</li>
</ol>
- <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>
-
- <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 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>
-
-
- <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>
-
- <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>
-
- <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>
-
- <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>
-
- <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>
-
<h2 id="pagination">
Page breaks in flexbox</h2>
@@ -1155,6 +1156,7 @@
<ol>
<li>In a row-direction single-line flexbox, breaks before and after items apply to the flexbox</li>
+ <p class="issue">"break-inside:avoid" in single-line horizontal should probably be applied to flexbox too.</p>
<li>In column-directon single-line flexbox and all multi-line flexboxes:
@@ -1168,7 +1170,6 @@
</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:
@@ -1212,22 +1213,20 @@
<ol>
<li>Items are collected in lines and laid out as usual, but in available space on current page.</li>
- <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 and it is
+ the only item in its line:
<ol>
- <li>If it is the last item of the last line, a break inside the item is considered</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 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.
+ <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>
+ <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>
+ <li>Breaks inside items (forced or unforced) are not allowed</li>
</ol>
</li>
@@ -1279,9 +1278,20 @@
<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>Breaks inside items (forced or unforced) are not allowed.</li>
+ <li>If the first flexbox line on a page doesn't fit in
+ cross-axis,
+ <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.</li>
+ </ol>
+ </li>
+
+ <li>If size of flexbox in inline direction is not definite, multi-line layout algorithm is run using the set of items
+ that have fit on the current page.</li>
<li>Line packing is done on each page, with content on the page</li>
+ <p class="issue">TODO: combine breaking algorightms for multiline in both directions. If breaks inside items are not allowed the algorithm is almost same.</p>
</ol>
</li>
</ol>
@@ -1409,10 +1419,6 @@
<h3 id="cr-exit-criteria">
CR exit criteria</h3>
- <p class=issue>[Change or remove the following CR exit criteria if
- the spec is not a module, but, e.g., a Note or a profile. This text was <a
- href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
-
<p>
For this specification to be advanced to Proposed Recommendation,
there must be at least two independent, interoperable implementations
Received on Tuesday, 28 February 2012 04:31:07 UTC