- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 02 Sep 2011 20:40:20 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv22079
Modified Files:
Overview.html Overview.src.html
Log Message:
Simplified the 'Flexibility' section, since I did end up needing an explicit algorithm.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.54
retrieving revision 1.55
diff -u -d -r1.54 -r1.55
--- Overview.html 31 Aug 2011 23:57:51 -0000 1.54
+++ Overview.html 2 Sep 2011 20:40:17 -0000 1.55
@@ -16,12 +16,12 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 31 August 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 2 September 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110831/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110831/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110902/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110902/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -897,21 +897,6 @@
id=flexible-length>flexible length</dfn> with the ‘<code
class=css>flex()</code>’ function, defined below.
- <p>Flexible lengths are composed of a (non-flexible) preferred size and a
- positive and negative flexibility. If there's free space left over in the
- flexbox after subtracting the preferred sizes of all the <a
- href="#flexbox-item"><i>flexbox items</i></a>, it is divided up among the
- <a href="#flexbox-item"><i>flexbox items</i></a> proportionally to their
- positive flexibility, making their width larger so they fill the space.
- Conversely, if the flexbox's size is <em>less</em> than the sum of the
- preferred sizes, so that the items would overflow normally, the <a
- href="#flexbox-item"><i>flexbox items</i></a> are shrunk proportionally to
- their negative flexibility, again so they exactly fit in the space.
-
- <div class=example>
- <p class=issue>TODO: Examples!</p>
- </div>
-
<h3 id=flex-function><span class=secno>4.1. </span> The ‘<code
class=css>flex()</code>’ function</h3>
@@ -950,106 +935,48 @@
<h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
Flexible Lengths</h3>
+ <p class=note>Note: This section is non-normative.
+
<p><a href="#flexible-length0"><i>Flexible lengths</i></a> are resolved
into normal, inflexible lengths by figuring out how large all of the <a
href="#flexible-length0"><i>flexible lengths</i></a> in the flexbox
- <em>want</em> to be, then either adding or subtracting space from that
- preferred size. The following algorithm normatively describes how to do
- this conversion:
-
- <p>First, determine the width and height of the flexbox itself, as
- described by the <a href="#layout-interface">Box Properties</a> chapter.
- The <a href="#main-size"><i>main size</i></a> of the flexbox's content box
- is the <i>available space</i>.
-
- <p>Second, if the flexbox is <a href="#multi-line"><i>multi-line</i></a>,
- break the contents across multiple lines, as described by the <a
- href=multiline>Multiline</a> chapter.
+ <em>want</em> to be, then either growing or shrinking that <a
+ href="#preferred-size"><i>preferred size</i></a> so that the <a
+ href="#flexbox-item"><i>flexbox items</i></a> exactly fill the flexbox,
+ neither overflowing nor leaving extra unfilled space.
- <p>Then, for each line in the flexbox, do the following:
+ <p><a href="#flexible-length0"><i>Flexible lengths</i></a> are resolved
+ into normal inflexible lengths based on their <a
+ href="#preferred-size"><i>preferred size</i></a>, their flexibility, and
+ the amount of free space in the flexbox. The exact algorithm is described
+ in <a href="#layout-algorithm">a later section of this spec</a>, but in
+ general, it works like this:
<ol>
- <li>Subtract the sum of the <i>pre-flex sizes</i> of the <a
- href="#flexbox-item"><i>flexbox items</i></a> on the line from the
- <i>available space</i>. This is the <dfn id=free-space>free space</dfn>.
- This number may be negative, if the flexbox is single-line or a single <a
- href="#flexbox-item"><i>flexbox item</i></a> is larger than the entire
- flexbox.
-
- <li>
- <dl>
- <dt>If the <a href="#free-space"><i>free space</i></a> is zero:
-
- <dd>All <a href="#flexible-length0"><i>flexible lengths</i></a> resolve
- to their <a href="#preferred-size"><i>preferred size</i></a>.
-
- <dt>If the <a href="#free-space"><i>free space</i></a> is positive:
-
- <dd>
- <p>Sum the <a href="#positive-flexibility"><i>positive
- flexibility</i></a> of every <a href="#flexible-length0"><i>flexible
- length</i></a> on the line. This is the <dfn
- id=total-positive-flexibility>total positive flexibility</dfn>.</p>
-
- <p>For each <a href="#flexible-length0"><i>flexible length</i></a>,
- increment its <a href="#preferred-size"><i>preferred size</i></a> by
- <code><a href="#free-space"><i>free space</i></a> * <pos-flex> / <a
- href="#total-positive-flexibility"><i>total positive
- flexibility</i></a></code>.</p>
-
- <dt>If the <a href="#free-space"><i>free space</i></a> is negative:
-
- <dd>
- <p>Sum the <a href="#negative-flexibility"><i>negative
- flexibility</i></a> of every <a href="#flexible-length0"><i>flexible
- length</i></a> on the line. This is the <dfn
- id=total-negative-flexibility>total negative flexibility</dfn>.</p>
-
- <p>For each <a href="#flexible-length0"><i>flexible length</i></a>,
- increment its <a href="#preferred-size"><i>preferred size</i></a> by
- <code><a href="#free-space"><i>free space</i></a> * <neg-flex> / <a
- href="#total-negative-flexibility"><i>total negative
- flexibility</i></a></code>. <span class=note>Note: since the free
- space is negative, incrementing the preferred size by this number
- makes the preferred size smaller.</span></p>
- </dl>
+ <li>First, set all the <a href="#flexible-length0"><i>flexible
+ lengths</i></a> to their <a href="#preferred-size"><i>preferred
+ size</i></a>.
- <li>
- <p>Verify that min/max constraints aren't violated: for each <a
- href="#flexbox-item"><i>flexbox item</i></a> on the line with
- ‘<code class=property>width</code>’/‘<code
- class=property>height</code>’ specified as a <a
- href="#flexible-length0"><i>flexible length</i></a>, if instead
- specifying the ‘<code
- class=property>width</code>’/‘<code
- class=property>height</code>’ as the <a
- href="#preferred-size"><i>preferred size</i></a> would cause the item to
- be in violation of its ‘<code
- class=css>min/max-width/height</code>’ properties, resolve the <a
- href="#flexible-length0"><i>flexible length</i></a> to the
- smallest/largest length that would make it no longer in violation of
- those properties, as defined by <a
- href="http://www.w3.org/TR/CSS2/visudet.html#propdef-min-width">the
- algorithm in CSS2.1</a>.</p>
+ <li>Then, lay out the flexbox, and see if there is free space left, or if
+ the flexbox is overflowing.
- <p>If any <a href="#flexbox-item"><i>flexbox item</i></a> was found to be
- in violation by this step and resolved into an inflexible length, reset
- the <a href="#preferred-size"><i>preferred size</i></a> of any remaining
- <a href="#flexible-length0"><i>flexible lengths</i></a> to their
- original values and restart this sub-algorithm.</p>
+ <li>If there's free space, distribute it among the <a
+ href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
+ their <a href="#positive-flexibility"><i>positive flexibility</i></a>. If
+ the flexbox is overflowing, shrink the <a
+ href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
+ their <a href="#negative-flexibility"><i>negative flexibility</i></a>.
- <li>Any remaining <a href="#flexible-length0"><i>flexible lengths</i></a>
- resolve to their <a href="#preferred-size"><i>preferred size</i></a>.
+ <li>If any <a href="#flexible-length0"><i>flexible length</i></a> is
+ violating a min or max width or height constraint, change it into an
+ inflexible length that's not violating the constraint, then go back to
+ the previous step. Keep repeating this until either there are no <a
+ href="#flexible-length0"><i>flexible lengths</i></a> left, or every <a
+ href="#flexible-length0"><i>flexible length</i></a> has successfully
+ resolved without violating any constraints.
</ol>
- <p>Once all <a href="#flexible-length0"><i>flexible lengths</i></a> have
- been resolved, the ‘<a href="#flex-pack0"><code
- class=property>flex-pack</code></a>’, ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’, and
- ‘<a href="#flex-line-pack0"><code
- class=property>flex-line-pack</code></a>’ properties align the <a
- href="#flexbox-item"><i>flexbox items</i></a> and the flexbox's lines
- within the flexbox.
+ <p class=issue>Examples!
<h2 id=alignment><span class=secno>5. </span> Alignment</h2>
@@ -1974,9 +1901,6 @@
<li>flex-pack, <a href="#flex-pack0"
title=flex-pack><strong>5.1.</strong></a>
- <li>free space, <a href="#free-space" title="free
- space"><strong>4.2.</strong></a>
-
<li>horizontal, <a href="#flex-flow-horizontal"
title=horizontal><strong>3.1.</strong></a>
@@ -2036,12 +1960,6 @@
<li>stretch, <a href="#flex-align-stretch"
title=stretch><strong>5.2.</strong></a>
- <li>total negative flexibility, <a href="#total-negative-flexibility"
- title="total negative flexibility"><strong>4.2.</strong></a>
-
- <li>total positive flexibility, <a href="#total-positive-flexibility"
- title="total positive flexibility"><strong>4.2.</strong></a>
-
<li>vertical, <a href="#flex-flow-vertical"
title=vertical><strong>3.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.53
retrieving revision 1.54
diff -u -d -r1.53 -r1.54
--- Overview.src.html 31 Aug 2011 23:57:51 -0000 1.53
+++ Overview.src.html 2 Sep 2011 20:40:17 -0000 1.54
@@ -398,12 +398,6 @@
<p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", altering their width or height to fill the available space. This is done by declaring a <dfn>flexible length</dfn> with the ''flex()'' function, defined below.</p>
- <p>Flexible lengths are composed of a (non-flexible) preferred size and a positive and negative flexibility. If there's free space left over in the flexbox after subtracting the preferred sizes of all the <i>flexbox items</i>, it is divided up among the <i>flexbox items</i> proportionally to their positive flexibility, making their width larger so they fill the space. Conversely, if the flexbox's size is <em>less</em> than the sum of the preferred sizes, so that the items would overflow normally, the <i>flexbox items</i> are shrunk proportionally to their negative flexibility, again so they exactly fit in the space.</p>
-
- <div class=example>
- <p class=issue>TODO: Examples!</p>
- </div>
-
<h3 id='flex-function'>
The ''flex()'' function</h3>
@@ -422,48 +416,23 @@
<h3 id='resolving-flexible-lengths'>
Resolving Flexible Lengths</h3>
- <p><i>Flexible lengths</i> are resolved into normal, inflexible lengths by figuring out how large all of the <i>flexible lengths</i> in the flexbox <em>want</em> to be, then either adding or subtracting space from that preferred size. The following algorithm normatively describes how to do this conversion:</p>
-
- <p>First, determine the width and height of the flexbox itself, as described by the <a href="#layout-interface">Box Properties</a> chapter. The <i>main size</i> of the flexbox's content box is the <i>available space</i>.</p>
-
- <p>Second, if the flexbox is <i>multi-line</i>, break the contents across multiple lines, as described by the <a href="multiline">Multiline</a> chapter.</p>
+ <p class='note'>Note: This section is non-normative.</p>
- <p>Then, for each line in the flexbox, do the following:</p>
+ <p><i>Flexible lengths</i> are resolved into normal, inflexible lengths by figuring out how large all of the <i>flexible lengths</i> in the flexbox <em>want</em> to be, then either growing or shrinking that <i>preferred size</i> so that the <i>flexbox items</i> exactly fill the flexbox, neither overflowing nor leaving extra unfilled space.</p>
+
+ <p><i>Flexible lengths</i> are resolved into normal inflexible lengths based on their <i>preferred size</i>, their flexibility, and the amount of free space in the flexbox. The exact algorithm is described in <a href="#layout-algorithm">a later section of this spec</a>, but in general, it works like this:</p>
<ol>
- <li>Subtract the sum of the <i>pre-flex sizes</i> of the <i>flexbox items</i> on the line from the <i>available space</i>. This is the <dfn>free space</dfn>. This number may be negative, if the flexbox is single-line or a single <i>flexbox item</i> is larger than the entire flexbox.</li>
-
- <li>
- <dl>
- <dt>If the <i>free space</i> is zero:</dt>
- <dd>All <i>flexible lengths</i> resolve to their <i>preferred size</i>.</dd>
-
- <dt>If the <i>free space</i> is positive:</dt>
- <dd>
- <p>Sum the <i>positive flexibility</i> of every <i>flexible length</i> on the line. This is the <dfn>total positive flexibility</dfn>.</p>
-
- <p>For each <i>flexible length</i>, increment its <i>preferred size</i> by <code><i>free space</i> * <pos-flex> / <i>total positive flexibility</i></code>.</p>
- </dd>
-
- <dt>If the <i>free space</i> is negative:</dt>
- <dd>
- <p>Sum the <i>negative flexibility</i> of every <i>flexible length</i> on the line. This is the <dfn>total negative flexibility</dfn>.</p>
-
- <p>For each <i>flexible length</i>, increment its <i>preferred size</i> by <code><i>free space</i> * <neg-flex> / <i>total negative flexibility</i></code>. <span class='note'>Note: since the free space is negative, incrementing the preferred size by this number makes the preferred size smaller.</span></p>
- </dd>
- </dl>
- </li>
+ <li>First, set all the <i>flexible lengths</i> to their <i>preferred size</i>.</li>
- <li>
- <p>Verify that min/max constraints aren't violated: for each <i>flexbox item</i> on the line with 'width'/'height' specified as a <i>flexible length</i>, if instead specifying the 'width'/'height' as the <i>preferred size</i> would cause the item to be in violation of its 'min/max-width/height' properties, resolve the <i>flexible length</i> to the smallest/largest length that would make it no longer in violation of those properties, as defined by <a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-min-width">the algorithm in CSS2.1</a>.</p>
+ <li>Then, lay out the flexbox, and see if there is free space left, or if the flexbox is overflowing.</li>
- <p>If any <i>flexbox item</i> was found to be in violation by this step and resolved into an inflexible length, reset the <i>preferred size</i> of any remaining <i>flexible lengths</i> to their original values and restart this sub-algorithm.</p>
- </li>
+ <li>If there's free space, distribute it among the <i>flexible lengths</i> in proportion to their <i>positive flexibility</i>. If the flexbox is overflowing, shrink the <i>flexible lengths</i> in proportion to their <i>negative flexibility</i>.</li>
- <li>Any remaining <i>flexible lengths</i> resolve to their <i>preferred size</i>.</li>
+ <li>If any <i>flexible length</i> is violating a min or max width or height constraint, change it into an inflexible length that's not violating the constraint, then go back to the previous step. Keep repeating this until either there are no <i>flexible lengths</i> left, or every <i>flexible length</i> has successfully resolved without violating any constraints.</li>
</ol>
- <p>Once all <i>flexible lengths</i> have been resolved, the 'flex-pack', 'flex-align', and 'flex-line-pack' properties align the <i>flexbox items</i> and the flexbox's lines within the flexbox.</p>
+ <p class='issue'>Examples!</p>
<h2 id='alignment'>
Received on Friday, 2 September 2011 20:40:22 UTC