Flexbox is a powerful layout tool in CSS that allows you to create complex layouts and align elements in various ways. With Flexbox, you can control the positioning, size, and order of elements. It is super useful to create complex layouts. For example, you can use Flexbox to create a responsive navbar, a responsive footer, a responsive grid, and more.
The revolution of flexbox#
Flexbox was introduced in CSS3 and it was a huge improvement over the previous layout tools in CSS. Before Flexbox, we had to use floats and positioning to create complex layouts. However, floats and positioning are not very intuitive and they are not very easy to use.
For example, imagine that you want to create a navbar with three links. You can use floats to create this layout:
<style>
nav {
overflow: auto;
}
nav a {
float: left;
width: 33.33%;
}
</style>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
In this code, we have created a nav element and three child a elements. We have then set the overflow property of the nav element to auto to clear the floats. Finally, we have set the width property of the a elements to 33.33% to create three equal columns.
However, this layout is not responsive. If you resize the browser window, the links will not wrap to the next line. Without considering that this is not a mobile-first approach, we can fix this issue with media queries:
@media screen and (max-width: 600px) {
nav a {
width: 100%;
}
}
In this code, we have created a media query that targets screens with a max-width of 600px. We have then set the width property of the a elements to 100% to make the links wrap to the next line.
Do you see the problem with this? We have to write a lot of code to create a simple layout and it is not intuitive to code for mobile-first.
With Flexbox, you can create the same layout with much less code:
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
nav {
display: flex;
}
In this code, we have created a nav element and three child a elements. We have then set the display property of the nav element to flex to turn it into a flex container.
That’s all you need! The links will wrap to the next line when the browser window is resized.
The Flex Container and Flex Items#
In Flexbox, you have a flex container and flex items. The flex container is the parent element that contains the flex items. By default, the display property of the flex container is set to flex.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
}
In this code, we have created a div with the class container and three child div elements with the class item. We have then set the display property of the container class to flex to turn it into a flex container.
Flexbox Properties#
There are several properties in Flexbox that you can use to control the positioning and size of flex items. Used correctly, these properties can help you create very complex layouts with very little code.
I present here a few of the most important properties, but be sure to check out the very comprehensive CSS-Tricks Flexbox Guide by CSS Tricks for a complete list of Flexbox properties. I printed it out and I keep it on my desk for reference when I am building a user interface.
The following code shows the most used Flexbox properties:
Copy code
.container {
justify-content: center; /* start, end, center, space-between, space-around */
align-items: center; /* start, end, center, stretch */
flex-direction: column; /* row, row-reverse, column, column-reverse */
flex-wrap: wrap; /* wrap, nowrap, wrap-reverse */
flex-grow: 1; /* 0, 1, 2, ... */
flex-shrink: 1; /* 0, 1, 2, ... */
}
.item {
order: 1; /* 0, 1, 2, ... */
flex-basis: 100px; /* auto, 100px, 50%, ... */
flex-grow: 1; /* 0, 1, 2, ... */
flex-shrink: 1; /* 0, 1, 2, ... */
flex: 1 1 100px; /* flex-grow flex-shrink flex-basis */
align-self: center; /* start, end, center, stretch */
}
As you can see, Flexbox layouts consist of a flex container and flex items. The flex container is the parent element that contains the flex items and it defines the context for the flex items.
Something important to keep in mind is that Flexbox –unlike Grid– is a one-dimensional layout model. This means that it deals with one dimension at a time. For example, you can use Flexbox to align elements horizontally or vertically, but not both at the same time. In this paradigm, a container can be either a row or a column, but not both at the same time.
The container is thus used to define properties that affect the flex items inside it. For example, you can use the justify-content property to align the flex items horizontally and the align-items property to align the flex items vertically. You can also use the flex-direction property to change the direction of the flex items and the flex-wrap property to wrap the flex items to the next line.
I insist that you check out the CSS-Tricks Flexbox Guide by CSS Tricks for a complete list of Flexbox properties. They have an amazing guide that explains each property in detail with examples.
Here is a video by Kevin Powell (the CSS king) about Flexbox:
Conclusion#
In conclusion, Flexbox is a powerful layout tool in CSS that allows you to create complex layouts and align elements in various ways. By understanding the different Flexbox properties, you can control the positioning, size, and order of flex items and create stunning web pages that look great on any device. By practicing these techniques and experimenting with different layouts, you can take your web design skills to the next level and create web pages that are flexible, adaptable, and responsive to different devices and screen sizes.