- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 25 Aug 2011 00:13:50 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv738
Modified Files:
Overview.html Overview.src.html
Log Message:
Farm out the sizing and linebreaking part of flex resolution to the respective chapters.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.45
retrieving revision 1.46
diff -u -d -r1.45 -r1.46
--- Overview.html 24 Aug 2011 23:42:00 -0000 1.45
+++ Overview.html 25 Aug 2011 00:13:48 -0000 1.46
@@ -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, 24 August 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 August 2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110824/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110824/</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110825/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110825/</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -205,8 +205,8 @@
<li><a href="#pagination"><span class=secno>8. </span> Page breaks in
flexbox</a>
- <li><a href="#layout-interface"><span class=secno>9. </span> Interface
- With Other Layout Algorithms</a>
+ <li><a href="#layout-interface"><span class=secno>9. </span> Box
+ Properties and Sizing</a>
<li><a href="#changes"><span class=secno>10. </span>Changes</a>
<ul class=toc>
@@ -959,124 +959,89 @@
preferred size. The following algorithm normatively describes how to do
this conversion:
- <ol>
- <li>
- <p>Determine the width and height of the flexbox itself.</p>
-
- <p class=issue>Figure out how to do this for all combinations of flexbox
- direction, writing modes on the flexbox and flexbox items, and values of
- "width" and "height".</p>
-
- <p>The <a href="#main-size"><i>main size</i></a> of the flexbox's content
- box is the <dfn id=available-space>available space</dfn>.</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 <a href="#main-size"><i>main size</i></a> of the flexbox's content box
+ is the <i>available space</i>.
- <li>For each <a href="#flexbox-item"><i>flexbox item</i></a>, its <dfn
- id=pre-flex-size title="pre-flex size|pre-flex sizes">pre-flex size</dfn>
- is the <a href="#main-size"><i>main size</i></a> of the item's margin
- box, honoring the ‘<code
- class=css>min/max-width/height</code>’ properties. If the
- ‘<code class=property>width</code>’ or ‘<code
- class=property>height</code>’ properties are specified with <a
- href="#flexible-length0"><i>flexible lengths</i></a>, do this calculation
- as if they were instead specified with the <a
- href="#flexible-length0"><i>flexible length's</i></a> <a
- href="#preferred-size"><i>preferred size</i></a>.
+ <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.
- <li>
- <p>If the flexbox is <i>multi-line</i>, line-breaking must be performed.</p>
+ <p>Then, for each line in the flexbox, do the following:
- <p>If the current line has more than one <a
- href="#flexbox-item"><i>flexbox item</i></a> and the sum of all the <a
- href="#pre-flex-size"><i>pre-flex sizes</i></a> of its <a
- href="#flexbox-item"><i>flexbox items</i></a> is greater than the <a
- href="#available-space"><i>available space</i></a>, a new line must be
- created. The current line always contains the first <a
- href="#flexbox-item"><i>flexbox item</i></a> within it, and as many
- subsequent <a href="#flexbox-item"><i>flexbox items</i></a> as possible
- while keeping the sum of <a href="#pre-flex-size"><i>pre-flex
- sizes</i></a> less than the <a href="#available-space"><i>available
- space</i></a>. The rest of the <a href="#flexbox-item"><i>flexbox
- items</i></a> move to the next line, where this step is repeated as
- necessary until no new lines are created.</p>
+ <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>
- <p>Within each line, run the following steps:</p>
-
- <ol>
- <li>Subtract the sum of the <a href="#pre-flex-size"><i>pre-flex
- sizes</i></a> of the <a href="#flexbox-item"><i>flexbox items</i></a>
- on the line from the <a href="#available-space"><i>available
- space</i></a>. 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:
+ <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>.
+ <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:
+ <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>
+ <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>
+ <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:
+ <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>
+ <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>
+ <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>
- <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>
+ <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>
- <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>
+ <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>Any remaining <a href="#flexible-length0"><i>flexible
- lengths</i></a> resolve to their <a href="#preferred-size"><i>preferred
- size</i></a>.
- </ol>
+ <li>Any remaining <a href="#flexible-length0"><i>flexible lengths</i></a>
+ resolve to their <a href="#preferred-size"><i>preferred size</i></a>.
</ol>
<p>Once all <a href="#flexible-length0"><i>flexible lengths</i></a> have
@@ -2067,73 +2032,12 @@
<p class=issue>TODO: add more detail: how breaking affect sizing (for
broken boxes and boxes after the break) and alignment
- <h2 id=layout-interface><span class=secno>9. </span> Interface With Other
- Layout Algorithms</h2>
-
- <div class=issue>
- <p>This section seems necessary, but not the precise way it's written. I
- need to identify precisely what data needs to be exposed both by the
- containing measure model (for the flexbox to use) and by the flexbox (for
- the containing measure model to use), and then write that up. Then the
- other measure models we produce can re-use the same template.</p>
-
- <p>Need to define:</p>
-
- <ul>
- <li>The min/max/fit-content widths and heights of flexboxes in block
- contents
-
- <li>Related to the above, ‘<code class=css>auto</code>’
- width/height of flexbox is shrink-to-fit.
-
- <li>Other stuff?
- </ul>
- </div>
- <!--
- <p>
- A box placed in a block is considered a block level element and will be positioned
- and sized according to the rules for CSS 2.1 (section 10.3 for widths). Specifically,
- the following equation applies for calculating the width:
- </p>
- <blockquote>
- <p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = width of containing block
- </p>
- </blockquote>
- <p>All children of 'box' elements are block-level. If inline-level elements are nested
- inside boxes, they get wrapped in an anonymous block which then takes part in the
- box layout.
-
- </p><p>
- If the width of a child of a flexible box is computed as 'auto', then the used value
- is the shrink-to-fit width. This calculation is done similarly to how the width of
- a floating element is determined. Otherwise if the width has a computed value,
- then that value is used as the width.
- </p><p>
-
- In a horizontally oriented box, the flexibility is then applied which may increase
- or decrease the used width. In a vertically oriented box, the position and size
- of the child may be adjusted by the value of the container's
- <span class="property">'flex-align'</span> property.
- </p><p>
-
- The <span class="property">'min-width'</span>, <span class="property">'min-height'</span>,
- <span class="property">'max-width'</span>, and <span class="property">'max-height'</span>
- CSS properties act the same on boxes as on blocks.
- </p><p>
-
- The height of a child of a flexible box is determined in the same manner as specified
- in the CSS specification. The used height may further be adjusted by the container's
- <span class="property">'flex-align'</span> property in a horizontally
- oriented box, or the flexibility in a vertically oriented box.
- </p><p>
+ <h2 id=layout-interface><span class=secno>9. </span> Box Properties and
+ Sizing</h2>
- Note that it is possible for a horizontally oriented box that the height of a
- flexible child containing an inline descendant will change when the flexibility is
- applied. Similarly, in a vertically oriented box, the height of a child may change
- based on the <span class="property">'flex-align'</span> property of the
- box.
- </p>
- -->
+ <p class=issue>Define how flexboxes are sized, paying attention to
+ width/height keywords on both the flexbox and flexbox items, the writing
+ modes of both the flexbox and flexbox items, and the flexbox direction.
<hr title="Separator from footer">
@@ -2406,9 +2310,6 @@
<li>available free space, <a href="#available-free-space" title="available
free space"><strong>7.</strong></a>
- <li>available space, <a href="#available-space" title="available
- space"><strong>4.2.</strong></a>
-
<li>baseline, <a href="#flex-align-baseline"
title=baseline><strong>5.2.</strong></a>
@@ -2538,12 +2439,6 @@
<li>preferred size, <a href="#preferred-size" title="preferred
size"><strong>4.1.</strong></a>
- <li>pre-flex size, <a href="#pre-flex-size" title="pre-flex
- size"><strong>4.2.</strong></a>
-
- <li>pre-flex sizes, <a href="#pre-flex-size" title="pre-flex
- sizes"><strong>4.2.</strong></a>
-
<li>relevant length, <a href="#relevant-length" title="relevant
length"><strong>7.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.44
retrieving revision 1.45
diff -u -d -r1.44 -r1.45
--- Overview.src.html 24 Aug 2011 23:42:00 -0000 1.44
+++ Overview.src.html 25 Aug 2011 00:13:48 -0000 1.45
@@ -422,59 +422,43 @@
<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>
- <ol>
- <li>
- <p>Determine the width and height of the flexbox itself.</p>
-
- <p class='issue'>Figure out how to do this for all combinations of flexbox direction, writing modes on the flexbox and flexbox items, and values of "width" and "height".</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>The <i>main size</i> of the flexbox's content box is the <dfn>available space</dfn>.</p>
- </li>
+ <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>
- <li>For each <i>flexbox item</i>, its <dfn title="pre-flex size|pre-flex sizes">pre-flex size</dfn> is the <i>main size</i> of the item's margin box, honoring the 'min/max-width/height' properties. If the 'width' or 'height' properties are specified with <i>flexible lengths</i>, do this calculation as if they were instead specified with the <i>flexible length's</i> <i>preferred size</i>.</li>
+ <p>Then, for each line in the flexbox, do the following:</p>
- <li>
- <p>If the flexbox is <i>multi-line</i>, line-breaking must be performed.</p>
-
- <p>If the current line has more than one <i>flexbox item</i> and the sum of all the <i>pre-flex sizes</i> of its <i>flexbox items</i> is greater than the <i>available space</i>, a new line must be created. The current line always contains the first <i>flexbox item</i> within it, and as many subsequent <i>flexbox items</i> as possible while keeping the sum of <i>pre-flex sizes</i> less than the <i>available space</i>. The rest of the <i>flexbox items</i> move to the next line, where this step is repeated as necessary until no new lines are created.</p>
- </li>
+ <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>
- <p>Within each line, run the following steps:</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>
+ <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 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>
+ <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>
- <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>
+ <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>
- <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>
+ <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>Any remaining <i>flexible lengths</i> resolve to their <i>preferred size</i>.</li>
- </ol>
+ <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>Any remaining <i>flexible lengths</i> resolve to their <i>preferred size</i>.</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>
@@ -1001,66 +985,10 @@
<h2 id="layout-interface">
-Interface With Other Layout Algorithms</h2>
-
- <div class=issue>
- <p>This section seems necessary, but not the precise way it's written. I need to identify precisely what data needs to be exposed both by the containing measure model (for the flexbox to use) and by the flexbox (for the containing measure model to use), and then write that up. Then the other measure models we produce can re-use the same template.</p>
-
- <p>Need to define:</p>
-
- <ul>
- <li>The min/max/fit-content widths and heights of flexboxes in block contents</li>
-
- <li>Related to the above, ''auto'' width/height of flexbox is shrink-to-fit.</li>
-
- <li>Other stuff?</li>
- </ul>
- </div>
-<!--
- <p>
- A box placed in a block is considered a block level element and will be positioned
- and sized according to the rules for CSS 2.1 (section 10.3 for widths). Specifically,
- the following equation applies for calculating the width:
- </p>
- <blockquote>
- <p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = width of containing block
- </p>
- </blockquote>
- <p>All children of 'box' elements are block-level. If inline-level elements are nested
- inside boxes, they get wrapped in an anonymous block which then takes part in the
- box layout.
-
- </p><p>
- If the width of a child of a flexible box is computed as 'auto', then the used value
- is the shrink-to-fit width. This calculation is done similarly to how the width of
- a floating element is determined. Otherwise if the width has a computed value,
- then that value is used as the width.
- </p><p>
-
- In a horizontally oriented box, the flexibility is then applied which may increase
- or decrease the used width. In a vertically oriented box, the position and size
- of the child may be adjusted by the value of the container's
- <span class="property">'flex-align'</span> property.
- </p><p>
-
- The <span class="property">'min-width'</span>, <span class="property">'min-height'</span>,
- <span class="property">'max-width'</span>, and <span class="property">'max-height'</span>
- CSS properties act the same on boxes as on blocks.
- </p><p>
+Box Properties and Sizing</h2>
- The height of a child of a flexible box is determined in the same manner as specified
- in the CSS specification. The used height may further be adjusted by the container's
- <span class="property">'flex-align'</span> property in a horizontally
- oriented box, or the flexibility in a vertically oriented box.
- </p><p>
+ <p class='issue'>Define how flexboxes are sized, paying attention to width/height keywords on both the flexbox and flexbox items, the writing modes of both the flexbox and flexbox items, and the flexbox direction.</p>
- Note that it is possible for a horizontally oriented box that the height of a
- flexible child containing an inline descendant will change when the flexibility is
- applied. Similarly, in a vertically oriented box, the height of a child may change
- based on the <span class="property">'flex-align'</span> property of the
- box.
- </p>
- -->
<hr title="Separator from footer">
Received on Thursday, 25 August 2011 00:14:00 UTC