Skip to content

Commit 1fa1314

Browse files
tabatkinstabatkins
committed
Markup tweak to some of the example.
1 parent 0b91be7 commit 1fa1314

2 files changed

Lines changed: 61 additions & 37 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,15 @@
1111

1212
<style>
1313
code.one-line { white-space: pre; }
14+
.code-and-figure {
15+
display: table;
16+
margin: 0 auto;
17+
border-spacing: 1em;
18+
}
19+
.code-and-figure > div {
20+
display: table-cell;
21+
vertical-align: middle;
22+
}
1423
</style>
1524

1625
<body>
@@ -949,8 +958,8 @@ <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
949958
class=property>flex-order</code></a>&rsquo; makes this trivial. For
950959
example, take the following sketch of a page's code and desired layout:</p>
951960

952-
<div style="display:table; border-spacing: 1em; margin:1em auto;">
953-
<div style="display:table-cell; vertical-align:middle;">
961+
<div class=code-and-figure>
962+
<div>
954963
<pre>
955964
&lt;!DOCTYPE html>
956965
&lt;header>...&lt;/header>
@@ -962,8 +971,7 @@ <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
962971
&lt;footer>...&lt;/footer></pre>
963972
</div>
964973

965-
<div style="display:table-cell; vertical-align:middle;"> <img height=360
966-
src="images/flex-order-page.svg" styl width=400></div>
974+
<div><img height=360 src="images/flex-order-page.svg" width=400></div>
967975
</div>
968976

969977
<p>This layout can be easily achieved with Flexbox:</p>
@@ -1435,21 +1443,29 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
14351443
class=property>flex-align</code></a>&rsquo;, we can emulate the
14361444
functionality of HTML's <code>&lt;center></code> element:</p>
14371445

1438-
<pre>&lt;div>
1439-
&lt;div>foo foo foo foo&lt;/div>
1440-
&lt;div>bar bar&lt;br>bar bar&lt;/div>
1441-
&lt;div>foo foo foo foo foo foo foo foo foo foo foo foo&lt;/div>
1446+
<div class=code-and-figure>
1447+
<div>
1448+
<pre>
1449+
&lt;div>
1450+
&lt;p>foo foo foo foo&lt;/p>
1451+
&lt;p>bar bar&lt;br>bar bar&lt;/p>
1452+
&lt;p>foo foo foo foo foo foo foo
1453+
foo foo foo foo foo&lt;/p>
14421454
&lt;/div>
14431455
&lt;style>
1444-
div {
1445-
display: flexbox;
1446-
flex-flow: column;
1447-
flex-align: center;
1448-
width: 200px;
1449-
}
1456+
div {
1457+
display: flexbox;
1458+
flex-flow: column;
1459+
flex-align: center;
1460+
width: 200px;
1461+
}
14501462
&lt;/style></pre>
1463+
</div>
14511464

1452-
<p><img alt="" src="images/basic-vertical-flexbox.png"></p>
1465+
<div>
1466+
<p><img alt="" src="images/basic-vertical-flexbox.png">
1467+
</div>
1468+
</div>
14531469
</div>
14541470

14551471
<p class=issue>More examples for the other alignment values!

‎css3-flexbox/Overview.src.html‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@
77
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
88
<style>
99
code.one-line { white-space: pre; }
10+
.code-and-figure {
11+
display: table;
12+
margin: 0 auto;
13+
border-spacing: 1em;
14+
}
15+
.code-and-figure > div {
16+
display: table-cell;
17+
vertical-align: middle;
18+
}
1019
</style>
1120
</head><body>
1221

@@ -419,21 +428,17 @@ <h3 id='flex-order'>
419428
<div class='example'>
420429
<p>Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it's desirable that the content come first in the page's source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. 'flex-order' makes this trivial. For example, take the following sketch of a page's code and desired layout:</p>
421430

422-
<div style="display:table; border-spacing: 1em; margin:1em auto;">
423-
<div style="display:table-cell; vertical-align:middle;">
424-
<pre>
431+
<div class='code-and-figure'>
432+
<div><pre>
425433
&lt;!DOCTYPE html>
426434
&lt;header>...&lt;/header>
427435
&lt;div id='main'>
428436
&lt;article>...&lt;/article>
429437
&lt;nav>...&lt;/nav>
430438
&lt;aside>...&lt;/aside>
431439
&lt;/div>
432-
&lt;footer>...&lt;/footer></pre>
433-
</div>
434-
<div style="display:table-cell; vertical-align:middle;">
435-
<img src="images/flex-order-page.svg" width=400 height=360 styl>
436-
</div>
440+
&lt;footer>...&lt;/footer></pre></div>
441+
<div><img src="images/flex-order-page.svg" width=400 height=360></div>
437442
</div>
438443

439444
<p>This layout can be easily achieved with Flexbox:</p>
@@ -661,22 +666,25 @@ <h3 id='flex-align'>
661666

662667
<div class=example>
663668
<p>By using a vertical flexbox and 'flex-align', we can emulate the functionality of HTML's <code>&lt;center></code> element:</p>
664-
665-
<pre>&lt;div>
666-
&lt;div>foo foo foo foo&lt;/div>
667-
&lt;div>bar bar&lt;br>bar bar&lt;/div>
668-
&lt;div>foo foo foo foo foo foo foo foo foo foo foo foo&lt;/div>
669+
670+
<div class='code-and-figure'>
671+
<div><pre>
672+
&lt;div>
673+
&lt;p>foo foo foo foo&lt;/p>
674+
&lt;p>bar bar&lt;br>bar bar&lt;/p>
675+
&lt;p>foo foo foo foo foo foo foo
676+
foo foo foo foo foo&lt;/p>
669677
&lt;/div>
670678
&lt;style>
671-
div {
672-
display: flexbox;
673-
flex-flow: column;
674-
flex-align: center;
675-
width: 200px;
676-
}
677-
&lt;/style></pre>
678-
679-
<p><img alt="" src="images/basic-vertical-flexbox.png"></p>
679+
div {
680+
display: flexbox;
681+
flex-flow: column;
682+
flex-align: center;
683+
width: 200px;
684+
}
685+
&lt;/style></pre></div>
686+
<div><p><img alt="" src="images/basic-vertical-flexbox.png"></p></div>
687+
</div>
680688
</div>
681689

682690
<p class='issue'>More examples for the other alignment values!</p>

0 commit comments

Comments
 (0)