Skip to content

Commit 1d7cda4

Browse files
tabatkinstabatkins
committed
markup tweaks
1 parent be21c73 commit 1d7cda4

3 files changed

Lines changed: 116 additions & 95 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -568,8 +568,9 @@ <h3 id=overview><span class=secno>1.1. </span> Overview</h3>
568568
&lt;/section></pre>
569569
</div>
570570
</div>
571-
572-
<div style="display:table; margin: 1em auto; border-spacing: .5em;">
571+
<figure>
572+
<div
573+
style="display:table; margin: 0 auto 1em; border-spacing: .5em; min-width: 672px;">
573574
<section class=computer-example> <img
574575
alt="[A white computer with matching keyboard and monitor.]"
575576
src="images/computer.jpg">
@@ -597,7 +598,8 @@ <h1 style="font-size: 1.4em;">Printer</h1>
597598
<li>Paper and ink not included.
598599
</ul>
599600
<button>BUY NOW</button> </section></div>
600-
</div>
601+
<figcaption> An example rendering of the code above. </figcaption>
602+
</figure></div>
601603

602604
<head>
603605
<style scoped>
@@ -610,6 +612,7 @@ <h1 style="font-size: 1.4em;">Printer</h1>
610612
background: hsl(60,100%,90%);
611613
border: thick solid hsl(60,80%,50%);
612614
border-radius: 1em;
615+
text-align: left;
613616
}
614617
.computer-example > img {
615618
margin: 0 auto;
@@ -680,7 +683,7 @@ <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
680683
class=property>flex-flow</code></a>’ value determines how these terms
681684
map to physical directions (top/right/bottom/left), axes
682685
(vertical/horizontal), and sizes (width/height). <figure> <img alt
683-
height=277 src="images/flex-direction-terms.svg" width=657> <figcaption>
686+
height=277 src="images/flex-direction-terms.svg" width=665> <figcaption>
684687
An illustration of the various directions and sizing terms as applied to a
685688
‘<a href="#flex-flow-row"><code class=css>row</code></a>’ flex
686689
container. </figcaption></figure>
@@ -721,7 +724,8 @@ <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
721724
<dt class=axis>cross dimension
722725

723726
<dd> The axis perpendicular to the <a href="#main-axis"><i>main
724-
axis</i></a> is called the <dfn id=cross-axis>cross axis</dfn>.
727+
axis</i></a> is called the <dfn id=cross-axis>cross axis</dfn>. It
728+
extends in the <dfn id=cross-dimension>cross dimension</dfn>.
725729

726730
<dt class=side>cross-start
727731

@@ -736,11 +740,12 @@ <h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
736740
<dt class=size>cross size property
737741

738742
<dd> The width or height of a <a href="#flex-item"><i>flex item</i></a>,
739-
whichever is in the <i>cross dimension</i>, is the item's <dfn
740-
id=cross-size>cross size</dfn>. The <dfn id=cross-size-property>cross
741-
size property</dfn> is whichever of ‘<code
742-
class=property>width</code>’ or ‘<code
743-
class=property>height</code>’ that is in the <i>cross dimension</i>.
743+
whichever is in the <a href="#cross-dimension"><i>cross
744+
dimension</i></a>, is the item's <dfn id=cross-size>cross size</dfn>. The
745+
<dfn id=cross-size-property>cross size property</dfn> is whichever of
746+
‘<code class=property>width</code>’ or ‘<code
747+
class=property>height</code>’ that is in the <a
748+
href="#cross-dimension"><i>cross dimension</i></a>.
744749
</dl>
745750

746751
<h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the
@@ -1608,38 +1613,16 @@ <h2 id=flex-lines><span class=secno>6. </span> Flex Lines</h2>
16081613
to overflow.
16091614

16101615
<li> A <dfn id=multi-line>multi-line</dfn> flex container breaks its <a
1611-
href="#flex-item"><i>flex items</i></a> across multiple lines to avoid
1612-
overflowing, similar to how text is broken onto a new line when it gets
1613-
too wide to fit on the existing line. When additional lines are created,
1614-
they are stacked in the flex container along the <a
1615-
href="#cross-axis"><i>cross axis</i></a> according to the ‘<a
1616-
href="#flex-wrap"><code class=property>flex-wrap</code></a>’ property.
1617-
Every line contains at least one <a href="#flex-item"><i>flex
1618-
item</i></a>, unless the flex container itself is completely empty.
1616+
href="#flex-item"><i>flex items</i></a> across multiple lines, similar to
1617+
how text is broken onto a new line when it gets too wide to fit on the
1618+
existing line. When additional lines are created, they are stacked in the
1619+
flex container along the <a href="#cross-axis"><i>cross axis</i></a>
1620+
according to the ‘<a href="#flex-wrap"><code
1621+
class=property>flex-wrap</code></a>’ property. Every line contains at
1622+
least one <a href="#flex-item"><i>flex item</i></a>, unless the flex
1623+
container itself is completely empty.
16191624
</ul>
16201625

1621-
<p> Once content is broken into lines, each line is laid out independently;
1622-
flexible lengths and the ‘<a href="#justify-content"><code
1623-
class=property>justify-content</code></a>’ and ‘<a
1624-
href="#align-self"><code class=property>align-self</code></a>’
1625-
properties only consider the items on a single line at a time.
1626-
1627-
<p> When a flex container has multiple lines, the <a
1628-
href="#cross-size"><i>cross size</i></a> of each line is the minimum size
1629-
necessary to contain the <a href="#flex-item"><i>flex items</i></a> on the
1630-
line (after aligment due to ‘<a href="#align-self"><code
1631-
class=property>align-self</code></a>’), and the lines are aligned within
1632-
the flex container with the ‘<a href="#align-content"><code
1633-
class=property>align-content</code></a>’ property. When a flex container
1634-
(even a <a href="#multi-line"><i>multi-line</i></a> one) has only one
1635-
line, the <a href="#cross-size"><i>cross size</i></a> of the line is the
1636-
<a href="#cross-size"><i>cross size</i></a> of the flex container, and
1637-
‘<a href="#align-content"><code
1638-
class=property>align-content</code></a>’ has no effect. The <a
1639-
href="#main-size"><i>main size</i></a> of a line is always the same as the
1640-
<a href="#main-size"><i>main size</i></a> of the flex container's content
1641-
box.
1642-
16431626
<div class=example>
16441627
<p> This example shows four buttons that do not fit horizontally.
16451628

@@ -1670,15 +1653,40 @@ <h2 id=flex-lines><span class=secno>6. </span> Flex Lines</h2>
16701653
container will create an additional line to contain the last item.
16711654
<figure> <img src="images/multiline-no-flex.svg"> <figcaption> An example
16721655
rendering of the multiline flex container. </figcaption> </figure>
1656+
</div>
16731657

1674-
<p> After wrapping, if the items are made flexible, they'll fill their
1675-
lines. The first line has 60px of remaining space, and all of the items
1676-
have the same flexibility, so each of the three items on that line will
1677-
receives 20px of extra width, ending up 100px wide. The remaining item is
1678-
on a line of its own and will stretch to the entire width of the line, or
1679-
300px. <figure> <img src="images/multiline-flex.svg"> <figcaption> A
1680-
rendering of the same as above, but with the items all given ‘<code
1681-
class=css>flex: auto;</code>’. </figcaption> </figure>
1658+
<p> Once content is broken into lines, each line is laid out independently;
1659+
flexible lengths and the ‘<a href="#justify-content"><code
1660+
class=property>justify-content</code></a>’ and ‘<a
1661+
href="#align-self"><code class=property>align-self</code></a>’
1662+
properties only consider the items on a single line at a time.
1663+
1664+
<p> When a flex container has multiple lines, the <a
1665+
href="#cross-size"><i>cross size</i></a> of each line is the minimum size
1666+
necessary to contain the <a href="#flex-item"><i>flex items</i></a> on the
1667+
line (after aligment due to ‘<a href="#align-self"><code
1668+
class=property>align-self</code></a>’), and the lines are aligned within
1669+
the flex container with the ‘<a href="#align-content"><code
1670+
class=property>align-content</code></a>’ property. When a flex container
1671+
(even a <a href="#multi-line"><i>multi-line</i></a> one) has only one
1672+
line, the <a href="#cross-size"><i>cross size</i></a> of the line is the
1673+
<a href="#cross-size"><i>cross size</i></a> of the flex container, and
1674+
‘<a href="#align-content"><code
1675+
class=property>align-content</code></a>’ has no effect. The <a
1676+
href="#main-size"><i>main size</i></a> of a line is always the same as the
1677+
<a href="#main-size"><i>main size</i></a> of the flex container's content
1678+
box.
1679+
1680+
<div class=example>
1681+
<p> Here's the same example as the previous, except that the flex items
1682+
have all been given ‘<code class=css>flex: auto</code>’. The first
1683+
line has 60px of remaining space, and all of the items have the same
1684+
flexibility, so each of the three items on that line will receives 20px
1685+
of extra width, ending up 100px wide. The remaining item is on a line of
1686+
its own and will stretch to the entire width of the line, or 300px.
1687+
<figure> <img src="images/multiline-flex.svg"> <figcaption> A rendering
1688+
of the same as above, but with the items all given ‘<code
1689+
class=css>flex: auto</code>’. </figcaption> </figure>
16821690
</div>
16831691

16841692
<h2 id=flexibility><span class=secno>7. </span> Flexibility</h2>
@@ -4040,6 +4048,9 @@ <h2 class=no-num id=index>Index</h2>
40404048
<li>cross axis, <a href="#cross-axis"
40414049
title="cross axis"><strong>2.</strong></a>
40424050

4051+
<li>cross dimension, <a href="#cross-dimension"
4052+
title="cross dimension"><strong>2.</strong></a>
4053+
40434054
<li>cross-end, <a href="#cross-end"
40444055
title=cross-end><strong>2.</strong></a>
40454056

‎css3-flexbox/Overview.src.html‎

Lines changed: 56 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -297,41 +297,46 @@ <h3 id="overview">
297297
&lt;/section>
298298
&lt;/section></pre></div>
299299
</div>
300-
<div style="display:table; margin: 1em auto; border-spacing: .5em;">
301-
<section class='computer-example'>
302-
<img src="images/computer.jpg" alt='[A white computer with matching keyboard and monitor.]'>
300+
<figure>
301+
<div style="display:table; margin: 0 auto 1em; border-spacing: .5em; min-width: 672px;">
302+
<section class='computer-example'>
303+
<img src="images/computer.jpg" alt='[A white computer with matching keyboard and monitor.]'>
303304

304-
<h1 style="font-size: 1.4em;">Computer Starter Kit</h1>
305+
<h1 style="font-size: 1.4em;">Computer Starter Kit</h1>
305306

306-
<p>
307-
This is the best computer money can buy,
308-
if you don't have much money.
307+
<p>
308+
This is the best computer money can buy,
309+
if you don't have much money.
309310

310-
<ul>
311-
<li>Computer
312-
<li>Monitor
313-
<li>Keyboard
314-
<li>Mouse
315-
</ul>
311+
<ul>
312+
<li>Computer
313+
<li>Monitor
314+
<li>Keyboard
315+
<li>Mouse
316+
</ul>
316317

317-
<button>BUY NOW</button>
318-
</section>
319-
<section class='computer-example'>
320-
<img src="images/printer.png" alt=''>
318+
<button>BUY NOW</button>
319+
</section>
320+
<section class='computer-example'>
321+
<img src="images/printer.png" alt=''>
321322

322-
<h1 style="font-size: 1.4em;">Printer</h1>
323+
<h1 style="font-size: 1.4em;">Printer</h1>
323324

324-
<p>
325-
Only capable of printing
326-
ASCII art.
325+
<p>
326+
Only capable of printing
327+
ASCII art.
327328

328-
<ul>
329-
<li>Paper and ink not included.
330-
</ul>
329+
<ul>
330+
<li>Paper and ink not included.
331+
</ul>
331332

332-
<button>BUY NOW</button>
333-
</section>
334-
</div>
333+
<button>BUY NOW</button>
334+
</section>
335+
</div>
336+
<figcaption>
337+
An example rendering of the code above.
338+
</figcaption>
339+
</figure>
335340
<style scoped>
336341
.computer-example {
337342
display: table-cell;
@@ -342,6 +347,7 @@ <h1 style="font-size: 1.4em;">Printer</h1>
342347
background: hsl(60,100%,90%);
343348
border: thick solid hsl(60,80%,50%);
344349
border-radius: 1em;
350+
text-align: left;
345351
}
346352
.computer-example > img {
347353
margin: 0 auto;
@@ -406,7 +412,7 @@ <h2 id='box-model'>
406412
axes (vertical/horizontal), and sizes (width/height).
407413

408414
<figure>
409-
<img src='images/flex-direction-terms.svg' width=657 height=277 alt>
415+
<img src='images/flex-direction-terms.svg' width=665 height=277 alt>
410416
<figcaption>
411417
An illustration of the various directions and sizing terms as applied to a ''row'' flex container.
412418
</figure>
@@ -441,6 +447,7 @@ <h2 id='box-model'>
441447
<dt class='axis'>cross dimension
442448
<dd>
443449
The axis perpendicular to the <i>main axis</i> is called the <dfn>cross axis</dfn>.
450+
It extends in the <dfn>cross dimension</dfn>.
444451

445452
<dt class='side'>cross-start
446453
<dt class='side'>cross-end
@@ -1153,7 +1160,7 @@ <h2 id='flex-lines'>
11531160
even if that would cause its contents to overflow.
11541161

11551162
<li>
1156-
A <dfn>multi-line</dfn> flex container breaks its <i>flex items</i> across multiple lines to avoid overflowing,
1163+
A <dfn>multi-line</dfn> flex container breaks its <i>flex items</i> across multiple lines,
11571164
similar to how text is broken onto a new line when it gets too wide to fit on the existing line.
11581165
When additional lines are created,
11591166
they are stacked in the flex container along the <i>cross axis</i>
@@ -1162,21 +1169,6 @@ <h2 id='flex-lines'>
11621169
unless the flex container itself is completely empty.
11631170
</ul>
11641171

1165-
<p>
1166-
Once content is broken into lines,
1167-
each line is laid out independently;
1168-
flexible lengths and the 'justify-content' and 'align-self' properties only consider the items on a single line at a time.
1169-
1170-
<p>
1171-
When a flex container has multiple lines, the <i>cross size</i> of each line
1172-
is the minimum size necessary to contain the <i>flex items</i> on the line
1173-
(after aligment due to 'align-self'),
1174-
and the lines are aligned within the flex container with the 'align-content' property.
1175-
When a flex container (even a <i>multi-line</i> one) has only one line,
1176-
the <i>cross size</i> of the line is the <i>cross size</i> of the flex container,
1177-
and 'align-content' has no effect.
1178-
The <i>main size</i> of a line is always the same as the <i>main size</i> of the flex container's content box.
1179-
11801172
<div class=example>
11811173
<p>
11821174
This example shows four buttons that do not fit horizontally.
@@ -1213,9 +1205,27 @@ <h2 id='flex-lines'>
12131205
An example rendering of the multiline flex container.
12141206
</figcaption>
12151207
</figure>
1208+
</div>
1209+
1210+
<p>
1211+
Once content is broken into lines,
1212+
each line is laid out independently;
1213+
flexible lengths and the 'justify-content' and 'align-self' properties only consider the items on a single line at a time.
1214+
1215+
<p>
1216+
When a flex container has multiple lines, the <i>cross size</i> of each line
1217+
is the minimum size necessary to contain the <i>flex items</i> on the line
1218+
(after aligment due to 'align-self'),
1219+
and the lines are aligned within the flex container with the 'align-content' property.
1220+
When a flex container (even a <i>multi-line</i> one) has only one line,
1221+
the <i>cross size</i> of the line is the <i>cross size</i> of the flex container,
1222+
and 'align-content' has no effect.
1223+
The <i>main size</i> of a line is always the same as the <i>main size</i> of the flex container's content box.
12161224

1225+
<div class='example'>
12171226
<p>
1218-
After wrapping, if the items are made flexible, they'll fill their lines.
1227+
Here's the same example as the previous,
1228+
except that the flex items have all been given ''flex: auto''.
12191229
The first line has 60px of remaining space,
12201230
and all of the items have the same flexibility,
12211231
so each of the three items on that line will receives 20px of extra width,
@@ -1228,7 +1238,7 @@ <h2 id='flex-lines'>
12281238

12291239
<figcaption>
12301240
A rendering of the same as above,
1231-
but with the items all given ''flex: auto;''.
1241+
but with the items all given ''flex: auto''.
12321242
</figcaption>
12331243
</figure>
12341244
</div>

‎css3-flexbox/images/flex-direction-terms.svg‎

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)