Now let’s look at how we can make simple multi-column page layouts with Flexbox.
<!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>Flexbox in CSS3</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
display: flex;
padding: 1em;
flex-direction: column;
}
.item {
background-color: #455a64;
color: #fff;
font-size: 1.1em padding: 1em;
}
.item:nth-child(even) {
background-color: #607d8b;
}
@media screen and (min-width: 600px) {
body {
flex direction: row;
}
}
</style>
</head>
<body>
<div class="item">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is a fish text often used in print and web design. Lorem Ipsum is standard "fish" for texts in
Latin since the beginning of the 16th century...</p>
</div>
<div class="item">
<h2>Where did it come from?</h2>
<p>Many people think that Lorem Ipsum is a pseudo-Latin set of words taken from the ceiling, but this is not
entirely true. Its roots go back to a single piece of Classical Latin from 45 AD...</p>
</div>
</body>
</html>
Here the flex container is the body element. Since on mobile devices (especially smartphones) the screen size is not so large, therefore, by default, we set the arrangement of elements in a column. However, for devices with a screen of 600px and above, the media-query rule applies, which sets the location as a string.
Unlike the previous example, one more element has been added here. The peculiarity of this example is that the columns have the same dimensions. To do this, they have the property set flex: 1, that is, when stretching or reducing the boundaries of the container, all elements will be scaled by the same amount.
And besides, when the screen width is greater than 600px, the property of the second element is set to order: -1, due to which this element is placed first:
Three column mode
<!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>Flexbox In CSS3</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
display: flex;
padding: 1em;
flex-direction: column;
}
.item {
background-color: #455a64;
color: #fff;
font-size: 1.1em;
padding: 1em;
flex: 1;
}
.item:nth-child(1) {
background-color: #607d8b;
}
@media screen and (min-width: 600px) {
body {
flex-direction: row;
}
.item:nth-child(2) {
order: -1;
}
}
</style>
</head>
<body>
<div class="item">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is fish text often used in print and web design. Lorem Ipsum is standard "fish" for texts in
Latin since the beginning of the 16th century...</p>
</div>
<div class="item">
<h2>Where did it come from?</h2>
<p>Many people think that Lorem Ipsum is a pseudo-Latin set of words taken from the ceiling, but this is not
entirely true. Its roots go back to a single piece of Classical Latin from 45 AD...</p>
</div>
<div class="item">
<h2>Where did it come from?</h2>
<p>Many people think that Lorem Ipsum is a pseudo-Latin set of words taken from the ceiling, but this is not
entirely true. Its roots go back to a single piece of Classical Latin from 45 AD...</p>
</div>
</body>
</html>
Similarly, we can add more columns. But in this case, by default, the columns have the same width. But what if one of the columns (usually the center one) needs to be wider than the rest? To do this, add the following rule to the page styles:
<!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>Flexbox In CSS3</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
display: flex;
padding: 1em;
flex-direction: column;
}
.item {
background-color: #455a64;
color: #fff;
font-size: 1.1em;
padding: 1em;
flex: 1;
}
.item:nth-child(1) {
background-color: #607d8b;
}
.item:first-child {
flex: 0 0 50%;
}
@media screen and (min-width: 600px) {
body {
flex-direction: row;
}
.item:nth-child(2) {
order: -1;
}
}
</style>
</head>
<body>
<div class="item">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is fish text often used in print and web design. Lorem Ipsum is standard "fish" for texts in
Latin since the beginning of the 16th century...</p>
</div>
<div class="item">
<h2>Where did it come from?</h2>
<p>Many people think that Lorem Ipsum is a pseudo-Latin set of words taken from the ceiling, but this is not
entirely true. Its roots go back to a single piece of Classical Latin from 45 AD...</p>
</div>
<div class="item">
<h2>Where did it come from?</h2>
<p>Many people think that Lorem Ipsum is a pseudo-Latin set of words taken from the ceiling, but this is not
entirely true. Its roots go back to a single piece of Classical Latin from 45 AD...</p>
</div>
</body>
</html>
In this case, the first element will always take up 50% of the container’s space:
