Draft of flexbox as of 2007-10-05, from Neil Deakin.

Author: dbaron

css3-flexbox/Overview.html

@@ -56,7 +56,7 @@ <h2 class="no-num no-toc" id="table"><a name="contents">Table of
 
    </li><li><a href="#multiple"><span class="secno">7. </span>Multiple lines</a>
 
-   </li><li><a href="#inlinesAndBlocks"><span class="secno">8. </span>Inlines and
+   </li><li><a href="#inlinesAndBlocks"><span class="secno">8. </span>Relationship to Inlines and
     blocks</a>
 
    </li><li><a href="#acknowledgments">Acknowledgments</a>
@@ -136,7 +136,8 @@ <h2 id="overview"><span class="secno">1. </span>Overview</h2>
   The <span class="property">'float'</span> and
   <span class="property">'clear'</span> properties do not apply to
   children of box elements, so the used value for these properties
-  is 'none'.
+  is 'none'. These properties do apply to the box itself if it is
+  not a child of another box.
   </p><p>
 
   For example:
@@ -180,7 +181,7 @@ <h2 id="orientation"><span class="secno">2. </span>Orientation</h2>
 </span>
 <dd>
 <table class="propinfo" cellspacing=0 cellpadding=0>
-<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>horizontal | vertical | inline-axis | block-axis
+<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>horizontal | vertical | inline-axis | block-axis | <span class="default">inherit</span>
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>inline-axis
 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
@@ -216,9 +217,9 @@ <h2 id="orientation"><span class="secno">2. </span>Orientation</h2>
   <p>
    The inline and block axes are the writing-mode dependent keywords which,
    in English, map to horizontal and vertical respectively.
-   The orientation within nested boxes is inherited by default. If the orientation
-   is omitted on the outermost box in a box group, it is assumed to have a value
-   of 'inline-axis'.
+   When the orientation is omitted and the box is directly contained within another
+   box, the default orientation is inherited from the parent. If the box is not
+   contained within another box, the orientation is 'inline-axis'.
   </p>
 
   <h2 id="displayorder"><span class="secno">3. </span>Display order</h2>
@@ -238,7 +239,7 @@ <h2 id="displayorder"><span class="secno">3. </span>Display order</h2>
 </span>
 <dd>
 <table class="propinfo" cellspacing=0 cellpadding=0>
-<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | reverse
+<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | reverse | <span class="default">inherit</span>
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>normal
 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
@@ -266,9 +267,9 @@ <h2 id="displayorder"><span class="secno">3. </span>Display order</h2>
     its children from bottom to top.
   </dd></dl>
 
-  </p><p>The direction within nested boxes is inherited by default. If the direction
-   is omitted on the outermost box in a box group, it is assumed to have normal
-   direction.
+  </p><p>When the direction is omitted and the box is directly contained within another
+   box, the default direction is inherited from the parent. If the box is not
+   contained within another box, the direction is 'normal'.
 
   </p><p>
    If the computed value for the box's 'direction' property is 'normal', a
@@ -432,7 +433,7 @@ <h2 id="boxsizing"><span class="secno">4. </span>Box sizing</h2>
 </span>
 <dd>
 <table class="propinfo" cellspacing=0 cellpadding=0>
-<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>start | end | center | baseline | stretch
+<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>start | end | center | baseline | <span class="default">stretch</span>
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>stretch
 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
@@ -585,7 +586,7 @@ <h2 id="boxsizing"><span class="secno">4. </span>Box sizing</h2>
 <table class="propinfo" cellspacing=0 cellpadding=0>
 <tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>&lt;number&gt;
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>0.0
-<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>children of box elements
+<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>in-flow children of box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 <tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>no
 <tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td>visual</a>
@@ -603,7 +604,7 @@ <h2 id="boxsizing"><span class="secno">4. </span>Box sizing</h2>
 <table class="propinfo" cellspacing=0 cellpadding=0>
 <tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>&lt;integer&gt;
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>1
-<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>children of box elements
+<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>in-flow children of box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 <tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>no
 <tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td>visual</a>
@@ -638,6 +639,13 @@ <h2 id="boxsizing"><span class="secno">4. </span>Box sizing</h2>
     containing block, then the flexible children shrink as much as necessary to prevent
     overflow.
 
+  </p><p>
+    Flexibility only applies to elements in normal flow. As absolute and fixed positioned
+    elements are not in flow, any flexibility or flexgroup specified on them is ignored.
+    In addition, as the <span class="property">'float'</span> property does not apply to
+    children of flexible boxes, they are considered part of normal flow and flexibility
+    does apply.
+
   </p><p>
     When dividing up extra space, first take all elements within the first flex group.
     Each element within that group should be given extra width based on the ratio of
@@ -800,7 +808,7 @@ <h2 id="packing"><span class="secno">6. </span>Packing along the box axis</h2>
 </span>
 <dd>
 <table class="propinfo" cellspacing=0 cellpadding=0>
-<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>start | end | center | justify
+<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><span class="default">start</span> | end | center | justify
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>start
 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
@@ -870,7 +878,7 @@ <h2 id="packing"><span class="secno">6. </span>Packing along the box axis</h2>
 </span>
 <dd>
 <table class="propinfo" cellspacing=0 cellpadding=0>
-<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>single | multiple
+<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><span class="default">single</span> | multiple
 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>single
 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>box elements
 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
@@ -1019,45 +1027,77 @@ <h2 id="packing"><span class="secno">6. </span>Packing along the box axis</h2>
     within each line are stretched to the size of the largest item in that line.
   </p>
 
-  <h2 id="inlinesAndBlocks"><span class="secno">8. </span>Inlines and blocks</h2>
+  <h2 id="inlinesAndBlocks"><span class="secno">8. </span>Relationship to Inlines and blocks</h2>
 
   <p>
-   A box placed in a block will be positioned and sized as if it had a display of
-   'block' and the width and height of the box is determined in the same manner.
-   Specifically, the following equation applies for calculating the width:
+   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 of box' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+  <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
+     <a href="#propdef-box-align">'box-align'</a></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
+     <a href="#propdef-box-align">'box-align'</a></span> property in a horizontally
+     oriented box, or the flexibiliy in a vertically oriented box.
+  </p><p>
 
-  <p>As with 'block' elements, 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.
+     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 <a href="#propdef-box-align">'box-align'</a></span> property of the
+     box.
+
+  </p>
 
-  </p><p>Boxes size the blocks inside them in much the same way as blocks. In
-   particular, <span class="css">width: auto</span> means that the box will
-   fill the box's containing block. Similarly, 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 class="note">
+    Note: more details are needed here, and the relationship with other CSS constructs is
+    yet to be defined.
   </p>
-  
+
   <!--<h2 id="inlinesAndBlocks"><span class="secno">9. </span>Initial Containing Blocks</h2>
 
   <p>
-  A user agent that supports flexible boxes may have a viewport the size of which is
+  A user agent that supports flexible boxes may have a viewport where the size is
   computed from the content contained within it. Even if the viewport size is not
   known, it may be constrained by other physical constraints, such as the size of the
   screen, which may be used as the size of the viewport instead.
 
   </p><p>
   When the size of the viewport is not known, the size of the initial containing block
   will not be known beforehand. In this situation, this size will be computed from
-  the contents within the block. Any percentage sizes used within a block with no
-  size for its containing block have a value of 0, although this size may
-  grow due to flexibility.
-  </p>
+  the contents within the block. Both the width and height of the initial containing
+  block are considered to be 0 when computing a value that depends on the size of the
+  initial containing block. Specifically, this means that a percentage size of
+  the initial containing block will be calculated as 0.
+
+  </p><p>
+  Once the document has been laid out, the size of the viewport can be determined from
+  the content, and that size may later be used when the document needs to be reflowed.
   -->
 
   <hr title="Separator from footer">

css3-flexbox/flexbox.css

@@ -0,0 +1,74 @@
+body {
+  padding: 2em 1em 2em 70px;
+  margin: 0;
+  font-family: sans-serif;
+  color: black;
+  background: white;
+  background-position: top left;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+}
+:link { color: #00C; background: transparent }
+:visited { color: #609; background: transparent }
+a:active { color: #C00; background: transparent }
+
+a:link img, a:visited img { border-style: none } /* no border on img links */
+
+a img { color: white; }        /* trick to hide the border in Netscape 4 */
+@media all {                   /* hide the next rule from Netscape 4 */
+  a img { color: inherit; }    /* undo the color change above */
+}
+
+th, td { /* ns 4 */
+  font-family: sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 { text-align: left }
+/* background should be transparent, but WebTV has a bug */
+h1, h2, h3 { color: #005A9C; background: white }
+h1 { font: 170% sans-serif }
+h2 { font: 140% sans-serif }
+h3 { font: 120% sans-serif }
+h4 { font: bold 100% sans-serif }
+h5 { font: italic 100% sans-serif }
+h6 { font: small-caps 100% sans-serif }
+
+.hide { display: none }
+
+div.head { margin-bottom: 1em }
+div.head h1 { margin-top: 2em; clear: both }
+div.head table { margin-left: 2em; margin-top: 2em }
+
+p.copyright { font-size: small }
+p.copyright small { font-size: small }
+
+@media screen {  /* hide from IE3 */
+a[href]:hover { background: #ffa }
+}
+
+.default { text-decoration: underline }
+
+pre { margin-left: 2em }
+dt, dd { margin-top: 0; margin-bottom: 0 } /* opera 3.50 */
+dt { font-weight: bold }
+
+pre, code { font-family: monospace } /* navigator 4 requires this */
+
+ul.toc, ol.toc {
+  list-style: disc;		/* Mac NS has problem with 'none' */
+  list-style: none;
+}
+
+.propdef-title {
+  background-color: yellow;
+  color: black;
+}
+
+.example {
+  color: maroon;
+}
+
+.note {
+  color: green;
+}
+