- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 24 Aug 2011 23:38:33 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv30228
Modified Files:
Overview.html Overview.src.html
Log Message:
Grouped the flex-pack and flex-align under a single section, per fantasai's suggestion.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.43
retrieving revision 1.44
diff -u -d -r1.43 -r1.44
--- Overview.html 24 Aug 2011 23:17:30 -0000 1.43
+++ Overview.html 24 Aug 2011 23:38:31 -0000 1.44
@@ -162,50 +162,55 @@
Resolving Flexible Lengths</a>
</ul>
- <li><a href="#flex-pack"><span class=secno>5. </span> The ‘<code
- class=property>flex-pack</code>’ property</a>
+ <li><a href="#alignment"><span class=secno>5. </span> Alignment</a>
+ <ul class=toc>
+ <li><a href="#flex-pack"><span class=secno>5.1. </span> Main Axis
+ Alignment: the ‘<code class=property>flex-pack</code>’
+ property</a>
- <li><a href="#flex-align"><span class=secno>6. </span> The ‘<code
- class=property>flex-align</code>’ property</a>
+ <li><a href="#flex-align"><span class=secno>5.2. </span> Cross Axis
+ Alignment: the ‘<code class=property>flex-align</code>’
+ property</a>
+ </ul>
- <li><a href="#multiline"><span class=secno>7. </span> Multi-line
+ <li><a href="#multiline"><span class=secno>6. </span> Multi-line
flexbox</a>
<ul class=toc>
- <li><a href="#flex-line-pack"><span class=secno>7.1. </span>
+ <li><a href="#flex-line-pack"><span class=secno>6.1. </span>
‘<code class=property>flex-line-pack</code>’ property</a>
</ul>
- <li><a href="#free-space-algorithm"><span class=secno>8. </span> Free
+ <li><a href="#free-space-algorithm"><span class=secno>7. </span> Free
Space Calculation and Distribution</a>
<ul class=toc>
- <li><a href="#free-space-algorithm-initial"><span class=secno>8.1.
+ <li><a href="#free-space-algorithm-initial"><span class=secno>7.1.
</span> Initial Computation</a>
- <li><a href="#first-distribution-round"><span class=secno>8.2. </span>
+ <li><a href="#first-distribution-round"><span class=secno>7.2. </span>
First Distribution Round</a>
- <li><a href="#second-distribution-round"><span class=secno>8.3. </span>
+ <li><a href="#second-distribution-round"><span class=secno>7.3. </span>
Second Distribution Round</a>
- <li><a href="#intermediate-computation"><span class=secno>8.4. </span>
+ <li><a href="#intermediate-computation"><span class=secno>7.4. </span>
Intermediate Computation</a>
- <li><a href="#third-distribution-round"><span class=secno>8.5. </span>
+ <li><a href="#third-distribution-round"><span class=secno>7.5. </span>
Third Distribution Round</a>
- <li><a href="#free-space-allocation-algorithm"><span class=secno>8.6.
+ <li><a href="#free-space-allocation-algorithm"><span class=secno>7.6.
</span> Free Space Allocation Algorithm</a>
</ul>
- <li><a href="#pagination"><span class=secno>9. </span> Page breaks in
+ <li><a href="#pagination"><span class=secno>8. </span> Page breaks in
flexbox</a>
- <li><a href="#layout-interface"><span class=secno>10. </span> Interface
+ <li><a href="#layout-interface"><span class=secno>9. </span> Interface
With Other Layout Algorithms</a>
- <li><a href="#changes"><span class=secno>11. </span>Changes</a>
+ <li><a href="#changes"><span class=secno>10. </span>Changes</a>
<ul class=toc>
- <li><a href="#changes-from-ed-16-june-2011"><span class=secno>11.1.
+ <li><a href="#changes-from-ed-16-june-2011"><span class=secno>10.1.
</span>Changes from ED 16-June-2011</a>
</ul>
@@ -1083,9 +1088,21 @@
href="#flexbox-item"><i>flexbox items</i></a> and the flexbox's lines
within the flexbox.
- <h2 id=flex-pack><span class=secno>5. </span> The ‘<a
- href="#flex-pack0"><code class=property>flex-pack</code></a>’
- property</h2>
+ <h2 id=alignment><span class=secno>5. </span> Alignment</h2>
+
+ <p>After a flexbox's contents have finished their flexing, they can be
+ aligned in both the <a href="#main-axis"><i>main axis</i></a> with
+ ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ and the <a
+ href="#cross-axis"><i>cross axis</i></a> with ‘<a
+ href="#flex-align0"><code class=property>flex-align</code></a>’.
+ 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.
+
+ <h3 id=flex-pack><span class=secno>5.1. </span> Main Axis Alignment: the
+ ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ property</h3>
<table class=propdef>
<tbody>
@@ -1176,9 +1193,9 @@
<p class=issue>TODO: Examples showing the four values.</p>
</div>
- <h2 id=flex-align><span class=secno>6. </span> The ‘<a
- href="#flex-align0"><code class=property>flex-align</code></a>’
- property</h2>
+ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
+ ‘<a href="#flex-align0"><code
+ class=property>flex-align</code></a>’ property</h3>
<p>Sizing and positioning of <a href="#flexbox-item"><i>flexbox
items</i></a> along the <a href="#cross-axis"><i>cross axis</i></a> of
@@ -1434,7 +1451,7 @@
<p class=issue>TODO: alignment rules should be compatible with
css3-grid-layout, if possible
- <h2 id=multiline><span class=secno>7. </span> Multi-line flexbox</h2>
+ <h2 id=multiline><span class=secno>6. </span> Multi-line flexbox</h2>
<p>If no ‘<code class=property>wrap-</code>’ keyword is
included in ‘<a href="#flex-flow0"><code
@@ -1549,7 +1566,7 @@
</div>
</div>
- <h3 id=flex-line-pack><span class=secno>7.1. </span> ‘<a
+ <h3 id=flex-line-pack><span class=secno>6.1. </span> ‘<a
href="#propdef-flex-line-pack"><code
class=property>flex-line-pack</code></a>’ property</h3>
@@ -1632,7 +1649,7 @@
<p class=issue>TODO: examples
- <h2 id=free-space-algorithm><span class=secno>8. </span> Free Space
+ <h2 id=free-space-algorithm><span class=secno>7. </span> Free Space
Calculation and Distribution</h2>
<p class=issue>IS THIS SECTION NECESSARY? It may be useful for implementors
@@ -1692,7 +1709,7 @@
"inner length" == "extent along cross axis"</p>
</div>
- <h3 id=free-space-algorithm-initial><span class=secno>8.1. </span> Initial
+ <h3 id=free-space-algorithm-initial><span class=secno>7.1. </span> Initial
Computation</h3>
<p>This step computes necessary information required to run the free-space
@@ -1820,7 +1837,7 @@
</dl>
</ol>
- <h3 id=first-distribution-round><span class=secno>8.2. </span> First
+ <h3 id=first-distribution-round><span class=secno>7.2. </span> First
Distribution Round</h3>
<p>This step distributes free space to the flexible lengths of the flexbox
@@ -1857,7 +1874,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>8.3. </span> Second
+ <h3 id=second-distribution-round><span class=secno>7.3. </span> Second
Distribution Round</h3>
<p>This step distributes any leftover available space to the <a
@@ -1873,13 +1890,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>8.4. </span> Intermediate
+ <h3 id=intermediate-computation><span class=secno>7.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>8.5. </span> Third
+ <h3 id=third-distribution-round><span class=secno>7.5. </span> Third
Distribution Round</h3>
<p>This step distributes free space to the flexible lengths of each flexbox
@@ -1927,7 +1944,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>8.6. </span> Free
+ <h3 id=free-space-allocation-algorithm><span class=secno>7.6. </span> Free
Space Allocation Algorithm</h3>
<p>This section describes the algorithm used to allocate free space to a
@@ -2008,7 +2025,7 @@
inflexible lengths equal to their preferred size, and return them.
</ol>
- <h2 id=pagination><span class=secno>9. </span> Page breaks in flexbox</h2>
+ <h2 id=pagination><span class=secno>8. </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
@@ -2050,7 +2067,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>10. </span> Interface With Other
+ <h2 id=layout-interface><span class=secno>9. </span> Interface With Other
Layout Algorithms</h2>
<div class=issue>
@@ -2120,9 +2137,9 @@
<hr title="Separator from footer">
- <h2 id=changes><span class=secno>11. </span>Changes</h2>
+ <h2 id=changes><span class=secno>10. </span>Changes</h2>
- <h3 id=changes-from-ed-16-june-2011><span class=secno>11.1. </span>Changes
+ <h3 id=changes-from-ed-16-june-2011><span class=secno>10.1. </span>Changes
from ED 16-June-2011</h3>
<ul>
@@ -2383,24 +2400,24 @@
<ul class=indexlist>
<li>after, <a href="#flex-align-after"
- title=after><strong>6.</strong></a>, <a href="#flex-line-pack-after"
- title=after><strong>7.1.</strong></a>
+ title=after><strong>5.2.</strong></a>, <a href="#flex-line-pack-after"
+ title=after><strong>6.1.</strong></a>
<li>available free space, <a href="#available-free-space" title="available
- free space"><strong>8.</strong></a>
+ 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>6.</strong></a>
+ title=baseline><strong>5.2.</strong></a>
<li>before, <a href="#flex-align-before"
- title=before><strong>6.</strong></a>, <a href="#flex-line-pack-before"
- title=before><strong>7.1.</strong></a>
+ title=before><strong>5.2.</strong></a>, <a href="#flex-line-pack-before"
+ title=before><strong>6.1.</strong></a>
<li>center, <a href="#flex-pack-center"
- title=center><strong>5.</strong></a>
+ title=center><strong>5.1.</strong></a>
<li>column, <a href="#flex-flow-column"
title=column><strong>3.1.</strong></a>
@@ -2421,12 +2438,12 @@
title=cross-start><strong>2.</strong></a>
<li>distribute, <a href="#flex-line-pack-distribute"
- title=distribute><strong>7.1.</strong></a>
+ title=distribute><strong>6.1.</strong></a>
- <li>end, <a href="#flex-pack-end" title=end><strong>5.</strong></a>
+ <li>end, <a href="#flex-pack-end" title=end><strong>5.1.</strong></a>
<li>flex-align, <a href="#flex-align0"
- title=flex-align><strong>6.</strong></a>
+ title=flex-align><strong>5.2.</strong></a>
<li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
@@ -2453,19 +2470,19 @@
length's"><strong>4.1.</strong></a>
<li>flex-line-pack, <a href="#propdef-flex-line-pack"
- title=flex-line-pack><strong>7.1.</strong></a>
+ title=flex-line-pack><strong>6.1.</strong></a>
<li>flex-order, <a href="#flex-order0"
title=flex-order><strong>3.2.</strong></a>
<li>flex-pack, <a href="#flex-pack0"
- title=flex-pack><strong>5.</strong></a>
+ title=flex-pack><strong>5.1.</strong></a>
<li>flex tuple, <a href="#flex-tuple" title="flex
- tuple"><strong>8.</strong></a>
+ tuple"><strong>7.</strong></a>
<li>flex tuples, <a href="#flex-tuples" title="flex
- tuples"><strong>8.1.</strong></a>
+ tuples"><strong>7.1.</strong></a>
<li>free space, <a href="#free-space" title="free
space"><strong>4.2.</strong></a>
@@ -2486,13 +2503,13 @@
title="hypothetical neighbors"><strong>2.2.</strong></a>
<li>inner length, <a href="#inner-length" title="inner
- length"><strong>8.</strong></a>
+ length"><strong>7.</strong></a>
<li>inner measure, <a href="#inner-measure" title="inner
- measure"><strong>8.</strong></a>
+ measure"><strong>7.</strong></a>
<li>justify, <a href="#flex-pack-justify"
- title=justify><strong>5.</strong></a>
+ title=justify><strong>5.1.</strong></a>
<li>main axis, <a href="#main-axis" title="main
axis"><strong>2.</strong></a>
@@ -2506,14 +2523,14 @@
title=main-start><strong>2.</strong></a>
<li>middle, <a href="#flex-align-middle"
- title=middle><strong>6.</strong></a>, <a href="#flex-line-pack-middle"
- title=middle><strong>7.1.</strong></a>
+ title=middle><strong>5.2.</strong></a>, <a href="#flex-line-pack-middle"
+ title=middle><strong>6.1.</strong></a>
<li>negative flexibility, <a href="#negative-flexibility" title="negative
flexibility"><strong>4.1.</strong></a>
<li>packing space, <a href="#packing-space" title="packing
- space"><strong>5.</strong></a>
+ space"><strong>5.1.</strong></a>
<li>positive flexibility, <a href="#positive-flexibility" title="positive
flexibility"><strong>4.1.</strong></a>
@@ -2528,20 +2545,21 @@
sizes"><strong>4.2.</strong></a>
<li>relevant length, <a href="#relevant-length" title="relevant
- length"><strong>8.</strong></a>
+ length"><strong>7.</strong></a>
<li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>
<li>row-reverse, <a href="#flex-flow-row-reverse"
title=row-reverse><strong>3.1.</strong></a>
- <li>start, <a href="#flex-pack-start" title=start><strong>5.</strong></a>
+ <li>start, <a href="#flex-pack-start"
+ title=start><strong>5.1.</strong></a>
<li>stretch, <a href="#flex-align-stretch"
- title=stretch><strong>6.</strong></a>
+ title=stretch><strong>5.2.</strong></a>
<li>total free space, <a href="#total-free-space" title="total free
- space"><strong>8.</strong></a>
+ space"><strong>7.</strong></a>
<li>total negative flexibility, <a href="#total-negative-flexibility"
title="total negative flexibility"><strong>4.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.42
retrieving revision 1.43
diff -u -d -r1.42 -r1.43
--- Overview.src.html 24 Aug 2011 23:17:30 -0000 1.42
+++ Overview.src.html 24 Aug 2011 23:38:31 -0000 1.43
@@ -480,8 +480,14 @@
<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>
-<h2 id='flex-pack'>
-The 'flex-pack' property</h2>
+<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'. 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>
<table class=propdef>
<tr>
@@ -537,8 +543,8 @@
</div>
-<h2 id='flex-align'>
-The 'flex-align' property</h2>
+<h3 id='flex-align'>
+Cross Axis Alignment: the 'flex-align' property</h3>
<p>Sizing and positioning of <i>flexbox items</i> along the <i>cross axis</i> of flexbox is controlled by the 'flex-align' property.</p>
Received on Wednesday, 24 August 2011 23:38:34 UTC