- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 20 Aug 2011 01:28:37 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv30377
Modified Files:
Overview.html Overview.src.html
Log Message:
Started work on rewriting/reorganizing initial sections.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.37
retrieving revision 1.38
diff -u -d -r1.37 -r1.38
--- Overview.html 20 Aug 2011 00:47:37 -0000 1.37
+++ Overview.html 20 Aug 2011 01:28:35 -0000 1.38
@@ -130,76 +130,81 @@
<!--begin-toc-->
<ul class=toc>
- <li><a href="#overview"><span class=secno>1. </span> Overview</a>
+ <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
- <li><a href="#display-flexbox"><span class=secno>2. </span> New values for
- ‘<code class=property>display</code>’ property</a>
+ <li><a href="#box-model"><span class=secno>2. </span> The Flexbox Box
+ Model</a>
+ <ul class=toc>
+ <li><a href="#display-flexbox"><span class=secno>2.1. </span> New values
+ for ‘<code class=property>display</code>’ property</a>
- <li><a href="#flex-items"><span class=secno>3. </span> Flexbox Items</a>
+ <li><a href="#flex-items"><span class=secno>2.2. </span> Flexbox
+ Items</a>
+ </ul>
<li><a href="#flexbox-flow-direction-the-flex-flow-pro"><span
- class=secno>4. </span> Flexbox Flow Direction: the ‘<code
+ class=secno>3. </span> Flexbox Flow Direction: the ‘<code
class=property>flex-flow</code>’ property</a>
- <li><a href="#flex-order"><span class=secno>5. </span> Display Order: the
+ <li><a href="#flex-order"><span class=secno>4. </span> Display Order: the
‘<code class=property>flex-order</code>’ property</a>
- <li><a href="#flexibility"><span class=secno>6. </span> Flexibility</a>
+ <li><a href="#flexibility"><span class=secno>5. </span> Flexibility</a>
<ul class=toc>
- <li><a href="#resolving-flexible-lengths"><span class=secno>6.1. </span>
+ <li><a href="#resolving-flexible-lengths"><span class=secno>5.1. </span>
Resolving Flexible Lengths</a>
- <li><a href="#flex-function"><span class=secno>6.2. </span> The
+ <li><a href="#flex-function"><span class=secno>5.2. </span> The
‘<code class=css>flex()</code>’ function</a>
- <li><a href="#flexible-margins"><span class=secno>6.3. </span> Flexible
+ <li><a href="#flexible-margins"><span class=secno>5.3. </span> Flexible
margins and paddings</a>
</ul>
- <li><a href="#flex-pack"><span class=secno>7. </span> The ‘<code
+ <li><a href="#flex-pack"><span class=secno>6. </span> The ‘<code
class=property>flex-pack</code>’ property</a>
- <li><a href="#flex-align"><span class=secno>8. </span> The ‘<code
+ <li><a href="#flex-align"><span class=secno>7. </span> The ‘<code
class=property>flex-align</code>’ property</a>
- <li><a href="#multiline"><span class=secno>9. </span> Multi-line
+ <li><a href="#multiline"><span class=secno>8. </span> Multi-line
flexbox</a>
<ul class=toc>
- <li><a href="#flex-line-pack"><span class=secno>9.1. </span>
+ <li><a href="#flex-line-pack"><span class=secno>8.1. </span>
‘<code class=property>flex-line-pack</code>’ property</a>
</ul>
- <li><a href="#free-space-algorithm"><span class=secno>10. </span> Free
+ <li><a href="#free-space-algorithm"><span class=secno>9. </span> Free
Space Calculation and Distribution</a>
<ul class=toc>
- <li><a href="#free-space-algorithm-initial"><span class=secno>10.1.
+ <li><a href="#free-space-algorithm-initial"><span class=secno>9.1.
</span> Initial Computation</a>
- <li><a href="#first-distribution-round"><span class=secno>10.2. </span>
+ <li><a href="#first-distribution-round"><span class=secno>9.2. </span>
First Distribution Round</a>
- <li><a href="#second-distribution-round"><span class=secno>10.3. </span>
+ <li><a href="#second-distribution-round"><span class=secno>9.3. </span>
Second Distribution Round</a>
- <li><a href="#intermediate-computation"><span class=secno>10.4. </span>
+ <li><a href="#intermediate-computation"><span class=secno>9.4. </span>
Intermediate Computation</a>
- <li><a href="#third-distribution-round"><span class=secno>10.5. </span>
+ <li><a href="#third-distribution-round"><span class=secno>9.5. </span>
Third Distribution Round</a>
- <li><a href="#free-space-allocation-algorithm"><span class=secno>10.6.
+ <li><a href="#free-space-allocation-algorithm"><span class=secno>9.6.
</span> Free Space Allocation Algorithm</a>
</ul>
- <li><a href="#pagination"><span class=secno>11. </span> Page breaks in
+ <li><a href="#pagination"><span class=secno>10. </span> Page breaks in
flexbox</a>
- <li><a href="#layout-interface"><span class=secno>12. </span> Interface
+ <li><a href="#layout-interface"><span class=secno>11. </span> Interface
With Other Layout Algorithms</a>
- <li><a href="#changes"><span class=secno>13. </span>Changes</a>
+ <li><a href="#changes"><span class=secno>12. </span>Changes</a>
<ul class=toc>
- <li><a href="#changes-from-ed-16-june-2011"><span class=secno>13.1.
+ <li><a href="#changes-from-ed-16-june-2011"><span class=secno>12.1.
</span>Changes from ED 16-June-2011</a>
</ul>
@@ -218,7 +223,7 @@
</ul>
<!--end-toc-->
- <h2 id=overview><span class=secno>1. </span> Overview</h2>
+ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
<p>CSS 2.1 defined four layout modes — algorithms which determine the
size and position of boxes based on their relationships with their sibling
@@ -240,22 +245,21 @@
<p>Flexbox layout operates exclusively on immediate block-level children,
which are referred to as <dfn id=flexbox-item title="flexbox item|flexbox
- items">flexbox items</dfn>. Flexbox may directly contain inline children
- or out of flow content, in which case flexbox item fixup is performed, as
- described below.
+ items">flexbox items</dfn>. If a flexbox's direct child is an inline
+ element or text, it is wrapped in an anonymous block, as described below,
+ which then functions as the <a href="#flexbox-item"><i>flexbox
+ item</i></a> instead.
<p><a href="#flexbox-item"><i>Flexbox items</i></a> can be laid out in any
direction, can have their order swapped around dynamically, and can "flex"
- their sizes and positions to respond to the available space.
+ their sizes and positions to respond to the available space. If a flexbox
+ is <i>multi-line</i>, the flexbox items flow in two dimensions, wrapping
+ into separate lines in a fashion similar to how text is wrapped into
+ multiple lines. The direction that these lines are stacked in can also be
+ controlled explicitly, relative either to the current writing mode
+ (logical directions) or explicit physical directions.
- <p>If <dfn id=multiline0>multiline</dfn> option is enabled (by including
- one of ‘<code class=property>wrap-</code>’ keywords in
- ‘<a href="#flex-flow"><code
- class=property>flex-flow</code></a>’ property), flexbox items flow
- in two dimensions, wrapping lines of items similarly to wrapping lines of
- text. The two-dimensional flow can have any combination of directions,
- matching current writing mode (logical), independent of writing mode
- (physical) or mixed.
+ <h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
<p>In flexbox, the term <dfn id=main-axis>main axis</dfn> refers to the
primary direction of flow of <a href="#flexbox-item"><i>flexbox
@@ -300,8 +304,8 @@
<p class=issue>this needs a picture
- <h2 id=display-flexbox><span class=secno>2. </span> New values for
- ‘<code class=property>display</code>’ property</h2>
+ <h3 id=display-flexbox><span class=secno>2.1. </span> New values for
+ ‘<code class=property>display</code>’ property</h3>
<table class=propdef>
<tbody>
@@ -324,7 +328,7 @@
<p>Flexbox establishes a new block formatting context for its content.
- <h2 id=flex-items><span class=secno>3. </span> Flexbox Items</h2>
+ <h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>
<p>Flexbox layout algorithm operates on <a href="#flexbox-item"><i>flexbox
items</i></a>, which are boxes that satisfy at least one of the following
@@ -424,7 +428,7 @@
‘<code class=property>height</code>’ properties are
‘<code class=css>auto</code>’), similar to tables or floats.
- <h2 id=flexbox-flow-direction-the-flex-flow-pro><span class=secno>4.
+ <h2 id=flexbox-flow-direction-the-flex-flow-pro><span class=secno>3.
</span> Flexbox Flow Direction: the ‘<a href="#flex-flow"><code
class=property>flex-flow</code></a>’ property</h2>
@@ -661,7 +665,7 @@
flex-flow:vertical wrap-reverse } /* cross axis is left-to-right (opposite to block direction) */</pre>
</div>
- <h2 id=flex-order><span class=secno>5. </span> Display Order: the ‘<a
+ <h2 id=flex-order><span class=secno>4. </span> Display Order: the ‘<a
href="#flex-order0"><code class=property>flex-order</code></a>’
property</h2>
@@ -743,7 +747,7 @@
<pre><code>item2 item4 item1 item3</code></pre>
</div>
- <h2 id=flexibility><span class=secno>6. </span> Flexibility</h2>
+ <h2 id=flexibility><span class=secno>5. </span> Flexibility</h2>
<p>The defining aspect of flexbox layout is the ability to make various
lengths of the <a href="#flexbox-item"><i>flexbox items</i></a> flexible.
@@ -761,7 +765,7 @@
<p class=issue>TODO: Examples!</p>
</div>
- <h3 id=resolving-flexible-lengths><span class=secno>6.1. </span> Resolving
+ <h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
Flexible Lengths</h3>
<p>Flexbox layout resolves a <i>flexible length</i> into a definite length
@@ -801,7 +805,7 @@
precise details of how free space is determined and assigned to flexible
lengths is detailed in a later chapter.
- <h3 id=flex-function><span class=secno>6.2. </span> The ‘<code
+ <h3 id=flex-function><span class=secno>5.2. </span> The ‘<code
class=css>flex()</code>’ function</h3>
<p>The ‘<code class=css>flex()</code>’ function is used to
@@ -918,7 +922,7 @@
<i>preferred size</i> in pixels when in "quirks mode" and when it is the
third value in flex() function with three values.
- <h3 id=flexible-margins><span class=secno>6.3. </span> Flexible margins and
+ <h3 id=flexible-margins><span class=secno>5.3. </span> Flexible margins and
paddings</h3>
<p>Paddings and margins are made flexible by setting their value to
@@ -945,7 +949,7 @@
<p class=issue>TODO: need solid use cases (and illustrations here) for
flexible margins and paddings.
- <h2 id=flex-pack><span class=secno>7. </span> The ‘<a
+ <h2 id=flex-pack><span class=secno>6. </span> The ‘<a
href="#flex-pack0"><code class=property>flex-pack</code></a>’
property</h2>
@@ -1037,7 +1041,7 @@
<p class=issue>TODO: Examples showing the four values.</p>
</div>
- <h2 id=flex-align><span class=secno>8. </span> The ‘<a
+ <h2 id=flex-align><span class=secno>7. </span> The ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
property</h2>
@@ -1295,7 +1299,7 @@
<p class=issue>TODO: alignment rules should be compatible with
css3-grid-layout, if possible
- <h2 id=multiline><span class=secno>9. </span> Multi-line flexbox</h2>
+ <h2 id=multiline><span class=secno>8. </span> Multi-line flexbox</h2>
<p>If no ‘<code class=property>wrap-</code>’ keyword is
included in ‘<a href="#flex-flow"><code
@@ -1410,7 +1414,7 @@
</div>
</div>
- <h3 id=flex-line-pack><span class=secno>9.1. </span> ‘<a
+ <h3 id=flex-line-pack><span class=secno>8.1. </span> ‘<a
href="#propdef-flex-line-pack"><code
class=property>flex-line-pack</code></a>’ property</h3>
@@ -1493,7 +1497,7 @@
<p class=issue>TODO: examples
- <h2 id=free-space-algorithm><span class=secno>10. </span> Free Space
+ <h2 id=free-space-algorithm><span class=secno>9. </span> Free Space
Calculation and Distribution</h2>
<p class=issue>IS THIS SECTION NECESSARY? It may be useful for implementors
@@ -1553,7 +1557,7 @@
"inner length" == "extent along cross axis"</p>
</div>
- <h3 id=free-space-algorithm-initial><span class=secno>10.1. </span> Initial
+ <h3 id=free-space-algorithm-initial><span class=secno>9.1. </span> Initial
Computation</h3>
<p>This step computes necessary information required to run the free-space
@@ -1681,7 +1685,7 @@
</dl>
</ol>
- <h3 id=first-distribution-round><span class=secno>10.2. </span> First
+ <h3 id=first-distribution-round><span class=secno>9.2. </span> First
Distribution Round</h3>
<p>This step distributes free space to the flexible lengths of the flexbox
@@ -1718,7 +1722,7 @@
href="#available-free-space"><i>available free space</i></a> equal to the
flexbox's inner measure.
- <h3 id=second-distribution-round><span class=secno>10.3. </span> Second
+ <h3 id=second-distribution-round><span class=secno>9.3. </span> Second
Distribution Round</h3>
<p>This step distributes any leftover available space to the <a
@@ -1734,13 +1738,13 @@
href="#available-free-space"><i>available free space</i></a> equal to the
flexbox's inner measure.
- <h3 id=intermediate-computation><span class=secno>10.4. </span>
- Intermediate Computation</h3>
+ <h3 id=intermediate-computation><span class=secno>9.4. </span> Intermediate
+ Computation</h3>
<p>Determine the length of the flexbox, given the sizes that have already
been determined.
- <h3 id=third-distribution-round><span class=secno>10.5. </span> Third
+ <h3 id=third-distribution-round><span class=secno>9.5. </span> Third
Distribution Round</h3>
<p>This step distributes free space to the flexible lengths of each flexbox
@@ -1788,7 +1792,7 @@
href="#available-free-space"><i>available free space</i></a> equal to the
flexbox's inner length.
- <h3 id=free-space-allocation-algorithm><span class=secno>10.6. </span> Free
+ <h3 id=free-space-allocation-algorithm><span class=secno>9.6. </span> Free
Space Allocation Algorithm</h3>
<p>This section describes the algorithm used to allocate free space to a
@@ -1869,7 +1873,7 @@
inflexible lengths equal to their preferred size, and return them.
</ol>
- <h2 id=pagination><span class=secno>11. </span> Page breaks in flexbox</h2>
+ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
<p class=issue>TODO: define how flexbox should break on pages, columns,
etc. This may or may not be normative until there is more than one
@@ -1911,7 +1915,7 @@
<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>12. </span> Interface With Other
+ <h2 id=layout-interface><span class=secno>11. </span> Interface With Other
Layout Algorithms</h2>
<div class=issue>
@@ -1978,9 +1982,9 @@
<hr title="Separator from footer">
- <h2 id=changes><span class=secno>13. </span>Changes</h2>
+ <h2 id=changes><span class=secno>12. </span>Changes</h2>
- <h3 id=changes-from-ed-16-june-2011><span class=secno>13.1. </span>Changes
+ <h3 id=changes-from-ed-16-june-2011><span class=secno>12.1. </span>Changes
from ED 16-June-2011</h3>
<ul>
@@ -2241,38 +2245,38 @@
<ul class=indexlist>
<li>after, <a href="#flex-align-after"
- title=after><strong>8.</strong></a>, <a href="#flex-line-pack-after"
- title=after><strong>9.1.</strong></a>
+ title=after><strong>7.</strong></a>, <a href="#flex-line-pack-after"
+ title=after><strong>8.1.</strong></a>
<li>available free space, <a href="#available-free-space" title="available
- free space"><strong>10.</strong></a>
+ free space"><strong>9.</strong></a>
<li>baseline, <a href="#flex-align-baseline"
- title=baseline><strong>8.</strong></a>
+ title=baseline><strong>7.</strong></a>
<li>before, <a href="#flex-align-before"
- title=before><strong>8.</strong></a>, <a href="#flex-line-pack-before"
- title=before><strong>9.1.</strong></a>
+ title=before><strong>7.</strong></a>, <a href="#flex-line-pack-before"
+ title=before><strong>8.1.</strong></a>
<li>center, <a href="#flex-pack-center"
- title=center><strong>7.</strong></a>
+ title=center><strong>6.</strong></a>
<li>column, <a href="#flex-flow-column"
- title=column><strong>4.</strong></a>
+ title=column><strong>3.</strong></a>
<li>column-reverse, <a href="#flex-flow-column-reverse"
- title=column-reverse><strong>4.</strong></a>
+ title=column-reverse><strong>3.</strong></a>
<li>cross axis, <a href="#cross-axis" title="cross
- axis"><strong>1.</strong></a>
+ axis"><strong>2.</strong></a>
<li>distribute, <a href="#flex-line-pack-distribute"
- title=distribute><strong>9.1.</strong></a>
+ title=distribute><strong>8.1.</strong></a>
- <li>end, <a href="#flex-pack-end" title=end><strong>7.</strong></a>
+ <li>end, <a href="#flex-pack-end" title=end><strong>6.</strong></a>
<li>flex-align, <a href="#flex-align0"
- title=flex-align><strong>8.</strong></a>
+ title=flex-align><strong>7.</strong></a>
<li>flexbox item, <a href="#flexbox-item" title="flexbox
item"><strong>1.</strong></a>
@@ -2281,110 +2285,107 @@
items"><strong>1.</strong></a>
<li>flex-flow, <a href="#flex-flow"
- title=flex-flow><strong>4.</strong></a>
+ title=flex-flow><strong>3.</strong></a>
<li>flex-line-pack, <a href="#propdef-flex-line-pack"
- title=flex-line-pack><strong>9.1.</strong></a>
+ title=flex-line-pack><strong>8.1.</strong></a>
<li>flex-order, <a href="#flex-order0"
- title=flex-order><strong>5.</strong></a>
+ title=flex-order><strong>4.</strong></a>
<li>flex-pack, <a href="#flex-pack0"
- title=flex-pack><strong>7.</strong></a>
+ title=flex-pack><strong>6.</strong></a>
<li>flex tuple, <a href="#flex-tuple" title="flex
- tuple"><strong>10.</strong></a>
+ tuple"><strong>9.</strong></a>
<li>flex tuples, <a href="#flex-tuples" title="flex
- tuples"><strong>10.1.</strong></a>
+ tuples"><strong>9.1.</strong></a>
<li>horizontal, <a href="#flex-flow-horizontal"
- title=horizontal><strong>4.</strong></a>
+ title=horizontal><strong>3.</strong></a>
<li>horizontal-ltr, <a href="#flex-flow-horizontal-ltr"
- title=horizontal-ltr><strong>4.</strong></a>
+ title=horizontal-ltr><strong>3.</strong></a>
<li>horizontal-reverse, <a href="#flex-flow-horizontal-reverse"
- title=horizontal-reverse><strong>4.</strong></a>
+ title=horizontal-reverse><strong>3.</strong></a>
<li>horizontal-rtl, <a href="#flex-flow-horizontal-rtl"
- title=horizontal-rtl><strong>4.</strong></a>
+ title=horizontal-rtl><strong>3.</strong></a>
<li>inner length, <a href="#inner-length" title="inner
- length"><strong>10.</strong></a>
+ length"><strong>9.</strong></a>
<li>inner measure, <a href="#inner-measure" title="inner
- measure"><strong>10.</strong></a>
+ measure"><strong>9.</strong></a>
<li>justify, <a href="#flex-pack-justify"
- title=justify><strong>7.</strong></a>
+ title=justify><strong>6.</strong></a>
<li>main axis, <a href="#main-axis" title="main
- axis"><strong>1.</strong></a>
+ axis"><strong>2.</strong></a>
<li>middle, <a href="#flex-align-middle"
- title=middle><strong>8.</strong></a>, <a href="#flex-line-pack-middle"
- title=middle><strong>9.1.</strong></a>
-
- <li>multiline, <a href="#multiline0"
- title=multiline><strong>1.</strong></a>
+ title=middle><strong>7.</strong></a>, <a href="#flex-line-pack-middle"
+ title=middle><strong>8.1.</strong></a>
<li>negative flexibility, <a href="#negative-flexibility" title="negative
- flexibility"><strong>6.1.</strong></a>
+ flexibility"><strong>5.1.</strong></a>
<li>packing space, <a href="#packing-space" title="packing
- space"><strong>7.</strong></a>
+ space"><strong>6.</strong></a>
<li>positive flexibility, <a href="#positive-flexibility" title="positive
- flexibility"><strong>6.1.</strong></a>
+ flexibility"><strong>5.1.</strong></a>
<li>pre-flex size, <a href="#pre-flex-size" title="pre-flex
- size"><strong>6.1.</strong></a>
+ size"><strong>5.1.</strong></a>
<li>relevant length, <a href="#relevant-length" title="relevant
- length"><strong>10.</strong></a>
+ length"><strong>9.</strong></a>
- <li>row, <a href="#flex-flow-row" title=row><strong>4.</strong></a>
+ <li>row, <a href="#flex-flow-row" title=row><strong>3.</strong></a>
<li>row-reverse, <a href="#flex-flow-row-reverse"
- title=row-reverse><strong>4.</strong></a>
+ title=row-reverse><strong>3.</strong></a>
- <li>start, <a href="#flex-pack-start" title=start><strong>7.</strong></a>
+ <li>start, <a href="#flex-pack-start" title=start><strong>6.</strong></a>
<li>stretch, <a href="#flex-align-stretch"
- title=stretch><strong>8.</strong></a>
+ title=stretch><strong>7.</strong></a>
<li>total free space, <a href="#total-free-space" title="total free
- space"><strong>10.</strong></a>
+ space"><strong>9.</strong></a>
<li>vertical, <a href="#flex-flow-vertical"
- title=vertical><strong>4.</strong></a>
+ title=vertical><strong>3.</strong></a>
<li>vertical-btt, <a href="#flex-flow-row-vertical-btt"
- title=vertical-btt><strong>4.</strong></a>
+ title=vertical-btt><strong>3.</strong></a>
<li>vertical-reverse, <a href="#flex-flow-vertical-reverse"
- title=vertical-reverse><strong>4.</strong></a>
+ title=vertical-reverse><strong>3.</strong></a>
<li>vertical-ttb, <a href="#flex-flow-vertical-ttb"
- title=vertical-ttb><strong>4.</strong></a>
+ title=vertical-ttb><strong>3.</strong></a>
- <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>4.</strong></a>
+ <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.</strong></a>
<li>wrap-down, <a href="#flex-flow-wrap-down"
- title=wrap-down><strong>4.</strong></a>
+ title=wrap-down><strong>3.</strong></a>
<li>wrap-left, <a href="#flex-flow-wrap-left"
- title=wrap-left><strong>4.</strong></a>
+ title=wrap-left><strong>3.</strong></a>
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
- title=wrap-reverse><strong>4.</strong></a>
+ title=wrap-reverse><strong>3.</strong></a>
<li>wrap-right, <a href="#flex-flow-wrap-right"
- title=wrap-right><strong>4.</strong></a>
+ title=wrap-right><strong>3.</strong></a>
<li>wrap-up, <a href="#flex-flow-wrap-up"
- title=wrap-up><strong>4.</strong></a>
+ title=wrap-up><strong>3.</strong></a>
</ul>
<!--end-index-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.36
retrieving revision 1.37
diff -u -d -r1.36 -r1.37
--- Overview.src.html 20 Aug 2011 00:47:50 -0000 1.36
+++ Overview.src.html 20 Aug 2011 01:28:35 -0000 1.37
@@ -51,18 +51,19 @@
<!--toc-->
-<h2 id="overview">
-Overview</h2>
+<h2 id="intro">
+Introduction</h2>
<p>CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: block layout, designed for laying out documents and simple applications; inline layout, designed for laying out text; table layout, designed for laying out information in a tabular format; and positioned layout, designed for very explicit positioning without much regard for other elements in the document. This module introduces a new layout mode, flexbox layout, which is designed for laying out more complex applications and webpages.</p>
<p>Flexbox layout is superficially similar to block layout. It lacks many of the more complex text or document-formatting properties that can be used in block layout, such as 'float' and 'columns', but in return it gains more simple and powerful tools for aligning its contents in ways that webapps and complex web pages often need. </p>
- <p>Flexbox layout operates exclusively on immediate block-level children, which are referred to as <dfn title="flexbox item|flexbox items" id="flexbox-item">flexbox items</dfn>. Flexbox may directly contain inline children or out of flow content, in which case flexbox item fixup is performed, as described below.</p>
+ <p>Flexbox layout operates exclusively on immediate block-level children, which are referred to as <dfn title="flexbox item|flexbox items" id="flexbox-item">flexbox items</dfn>. If a flexbox's direct child is an inline element or text, it is wrapped in an anonymous block, as described below, which then functions as the <i>flexbox item</i> instead.</p>
- <p><i>Flexbox items</i> can be laid out in any direction, can have their order swapped around dynamically, and can "flex" their sizes and positions to respond to the available space.</p>
+ <p><i>Flexbox items</i> can be laid out in any direction, can have their order swapped around dynamically, and can "flex" their sizes and positions to respond to the available space. If a flexbox is <i>multi-line</i>, the flexbox items flow in two dimensions, wrapping into separate lines in a fashion similar to how text is wrapped into multiple lines. The direction that these lines are stacked in can also be controlled explicitly, relative either to the current writing mode (logical directions) or explicit physical directions.</p>
- <p>If <dfn>multiline</dfn> option is enabled (by including one of 'wrap-' keywords in 'flex-flow' property), flexbox items flow in two dimensions, wrapping lines of items similarly to wrapping lines of text. The two-dimensional flow can have any combination of directions, matching current writing mode (logical), independent of writing mode (physical) or mixed. </p>
+<h2 id='box-model'>
+The Flexbox Box Model</h2>
<p>In flexbox, the term <dfn>main axis</dfn> refers to the primary direction of flow of <i>flexbox items</i>, the direction in which items are added to layout in a single line flexbox, or in one line of multiline flexbox. Main axis direction determines logical 'start' and 'end'.</p>
@@ -86,8 +87,8 @@
<p class="issue">this needs a picture</p>
-<h2 id='display-flexbox'>
-New values for 'display' property</h2>
+<h3 id='display-flexbox'>
+New values for 'display' property</h3>
<table class="propdef">
<tr>
@@ -104,8 +105,8 @@
-<h2 id='flex-items'>
-Flexbox Items</h2>
+<h3 id='flex-items'>
+Flexbox Items</h3>
<p>Flexbox layout algorithm operates on <i>flexbox items</i>, which are boxes that satisfy at least one of the following criteria:</p>
Received on Saturday, 20 August 2011 01:28:57 UTC