Added example of 'vertical-align' and also compared it with

stretchable margins.

Author: bert-github

css3-layout/Overview.src.html

@@ -2477,10 +2477,10 @@ <h2>Rendering of grid elements</h2>
 
 <h3 id=vertical-alignment>Vertical alignment of the contents of slots</h3>
 
-<p class=issue>Add the effect of 'margin-{top,bottom}: auto',
-generalized from flexbox. (By reference to css3-box?)
-
 <div class=issue>
+<p>Add the effect of 'margin-{top,bottom}: auto', generalized from
+flexbox? (By reference to css3-box?)
+
 <p>Especially in paged material, it is very common for a column of
 text to be not just aligned or centered, but vertically “justified” to
 align at both top and bottom, by a combination of means: scaling an
@@ -2589,6 +2589,66 @@ <h3 id=vertical-alignment>Vertical alignment of the contents of slots</h3>
 overflow (if the slot is the last in a 'chain') or to remain empty
 (because the first line box is put in the next chained slot instead).
 
+<p class=issue>Is there a need to explain that, if there is a
+stretching margin in the contents of the slot (a suggested feature in
+css3-box), there is no visible difference between ''top'' and
+''bottom'' (because the content is stretched to the size of the slot),
+but ''baseline'' still has effect?
+
+<div class=example>
+<p>Example: Given a document like this
+
+<pre>
+&lt;BODY>
+&lt;P>...&lt;/P>
+&lt;FIGURE>...&lt;/P>
+&lt;P>...&lt;/P>
+&lt;FIGURE>...&lt;/P>
+&lt;P>...&lt;/P>
+&lt;FIGURE>...&lt;/P>
+&lt;P>...&lt;/P>
+&lt;FIGURE>...&lt;/P>
+&lt;/BODY>
+</pre>
+
+<p>and a style like this:
+
+<pre>
+BODY { grid: "a b" }
+P { flow: a }
+FIGURE { flow: b }
+</pre>
+
+<p>the paragraphs will be in the first slot (a) and the figures in the
+second (b). There are two ways to align the contents of the two slots
+to the bottom. One is with 'vertical-align':
+
+<pre>BODY::slot(a), BODY::slot(b) { vertical-align: bottom }</pre>
+
+<p>The other is with flexible margins:
+
+<pre>P:first-of-type, FIGURE:first-of-type { margin-top: fill }</pre>
+</div>
+
+<div class=example>
+<p>Example: There is no value for 'vertical-align' to distribute
+elements vertically over the available space (similar to how
+'text-align: justify' distributes words over the available space). But
+the effect can be achieved with stretchable margins. Assume the same
+document as in the previous example and this style sheet:
+
+<pre>
+BODY { grid: "a b" }
+P { flow: a; margin-top: fill; margin-bottom: fill }
+FIGURE { flow: b }
+</pre>
+
+<p>Because there are stretchable margins between the Ps, the Ps will
+be equally distributed over the height of the slot (assuming the slot
+is taller than its contents, i.e., assuming the contents of slot b is
+taller than the contents of slot a).
+</div>
+
 <!--=================================================================-->
 
 <h3 id=paged>Breaking grid elements across pages or columns</h3>