Click and drag to scroll left and right to view all 9 figures.
<!-- figure 19.3 & figure 19.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: row-reverse;
}
#container div {
width: 40px;
height: 40px;
border: 1px solid grey;
broder-radius: 5px;;
}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!-- figure 19.6 & figure 19.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container { width: 300px; height: 150px; border: 1px solid black; display: flex;
flex-wrap: wrap; }
#container div { width: 40px; height: 40px; background-color: pink;
border: 1px solid grey; border-radius: 5px; }
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
<!-- figure 19.8-->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.flex-container { display: flex; border: 2px solid black; }
.flex-container div {
background-color: orange;
padding: 20px;
border: 2px solid grey;
text-align: center;
}
.one { flex: 1 1 10em; }
.two { flex: 5 3 10em; }
</style>
</head>
<body>
<div class="flex-container">
<div class="one">1</div>
<div class="two">2</div>
</div>
</body>
</html>
<!-- figure 19.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.container {
width: 500px;
height: 400px;
display: flex;
flex-flow: column;
}
.header, .footer {
height: 30px;
background-color: grey;
text-align: center;
flex: none;
}
.content {
background-color: orange;
text-align: center;
flex: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
<!-- figure 19.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.flex-container { border: 1px solid black; display: flex;
justify-content: flex-start; }
.flex-container div { width: 50px; height: 50px; background-color: pink;
border: 1px solid grey; }
</style>
</head>
<body>
<div id="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
<!-- figure 19.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px; height: 150px; border: 1px solid black; display: flex;
flex-wrap: wrap; align-content: flex-start;
}
#container div {
width: 60px; background-color: pink; border: 1px solid grey;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!-- figure 19.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
align-items: center;
}
#container div {
width: 60px;
border: 1px solid grey;
}
#container .one {background-color: pink; padding: 0 5px; }
#container .two {background-color: lightyellow; padding: 0 5px; }
#container .three {background-color: lightgrey; padding: 0 5px; }
#container .four {background-color: lightblue; padding: 0 5px; }
</style>
</head>
<body>
<div id="container">
<div class="one"> </div>
<div class="two">Curabitur vitae elit in odio consequat pretium vel non erat.</div>
<div class="three">Praesent dapibus elementu est, vitae fermentu nulla</div>
<div class="four"> </div>
</div>
</body>
</html>
<!-- figure 19.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
align-items: stretch;
}
.container div { width: 60px; border: 1px solid grey; }
#container .one { background-color: pink; padding: 0 5px; align-self: flex-start; }
#container .two { background-color: lightyellow; padding: 0 5px; }
#container .three { background-color: lightgrey; padding: 0 5px; }
#container .four { background-color: lightblue; padding: 0 5px; align-self:
flex-end; }
</style>
</head>
<body>
<div id="container">
<div class="one"> </div>
<div class="two">Curabitur vitae elit in odio consequat pretium vel non erat.</div>
<div class="three">Praesent dapibus elementu est, vitae fermentu nulla</div>
<div class="four"> </div>
</div>
</body>
</html>
<!-- figure 19.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { color: white; }
main { display: flex; }
article { background: red; flex: 1 1 0px; order: 2; }
nav { background: green; width: 200px; order: 1; }
aside { background: green; width: 200px; order: 3; }
header { background: blue; }
footer { background: blue; }
</style>
</head>
<body>
<header>HEADER</header>
<main>
<article>ARTICLE</article>
<nav>NAV</nav>
<aside>ASIDE</aside>
</main>
<footer>FOOTER</footer>
</body>
</html>