Now let’s look at creating a standard page layout that consists of a header, a footer, and a center section that has three columns: the main content and two sidebars.
To do this, define the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page layout on Flexbox</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
color: #fff;
font-size: 1.1em;
padding: 1em;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
}
article {
background-color: #546e7a;
flex: 2 2 12em;
padding: 1em;
}
nav,
aside {
flex: 1;
background-color: #052432;
padding: 10px;
}
nav {
order: -1;
}
header,
footer {
flex: 0 0 5em;
background-color: #066da1;
padding: 10px;
}
@media screen and (min-width: 600px) {
body {
min-height: 100vh;
}
main {
flex-direction: row;
min-height: 100%;
flex: 1 1 auto;
}
}
</style>
</head>
<body>
<header>
<p>Header</p>
</header>
<main>
<article>
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is fish text often used in print and web design. Lorem Ipsum is standard "fish" for texts in
Latin from the beginning of the 16th century. At that time, a certain unnamed
printer created a large collection font sizes and shapes using Lorem Ipsum to print samples. Lorem Ipsum
not only successfully
survived without notable changes five centuries, but also stepped over into electronic design. Its
popularization
in modern times</p>
</article>
<nav>
<p>Navigation</p>
</nav>
<aside>
<p>Sidebar</p>
</aside>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
So the top-level flex container here is the body element. Its flex items are header, main, and footer. Body lays out all of its elements from top to bottom in a column. It is also worth noting here that at a width of 600px and above, the body style is set to fill the entire browser space height: 100vh;
The header and footer elements are similar. Their property flex: 0 0 5em; specifies that whenever the container changes, these elements will have a size of 5em. That is, they have a static size.
More complex is the main element, which defines the main content. At the same time, being a flex element, it is also a flex container for nested elements and controls their positioning. With a browser width of up to 600px, it arranges elements in a column, which is very convenient on mobile devices.
From 600px wide, the nested nav, article, and aside elements are laid out as a row. And since, with such a browser width, the parent body element fills the entire browser space in height, the property of the main element is set to fill the entire height of the body container when it changes flex: 1 1 auto;
For flex items nested in the main, it’s worth noting that the nav element and the aside sidebar element will have the same size when the container is scaled. And the article element containing the main content will be correspondingly larger. In this case, although nav is defined after the article element, due to the setting of the property order: -1, the navigation block will stand before the article block.