Flexbox is short for Flexible Box Layout. It is one of the features of the CSS programming language. But that, we don't really care. The most important thing is to understand how to use it.
To understand how Flexbox works and how to use it, we need to understand the very principle on which everything relies: the axes.
But before we start, here is the program of this complete guide on Flexbox!
Where does Flexbox come from?
Originating from a new "First public draft" by the W3C in 2009 (the consortium that provides recommendations for upcoming web standards), it wasn't until 4 years later, in 2012, that Flexbox moved to "Candidate recommendation".
Since that day, Flexbox has quickly become one of the most used methods for organizing CSS in the world. This new feature was also swiftly recognized by Net magazine in 2013 as "Best new web technology".
Why use Flexbox?
Before 2012, the means available to developers to structure their site were quite limited.
There were only two possibilities to align elements:
- With floats (
float) - With
inline-blockelements
And that wasn't fun to use all the time.
Fortunately, with the advent of Flexbox, everything is much simpler: centering in the middle of the page or simply placing two elements side by side is astonishingly easy.
How to use Flexbox?
To use Flexbox, there is a simple principle to understand. Everything revolves around:
- a container (a parent element)
- and child elements
Let's start with a basic example. Here is a classic HTML code:
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>Nothing very new in this HTML code. We have a parent element with an id container that groups three child elements with a class child.
Let's add color to easily see the different elements. Let's tackle the CSS:
.child {
background-color: blue;
padding: 100px;
border-radius: 50px;
}So we have this result:
Our goal is simple: we want to align the three elements side by side.
Aligning elements side by side
To align elements side by side, we will need to use a new property.
This new property will allow us to activate Flexbox in our browser. It is applied to the parent element.
#container {
display: flex;
}And here is the result:
With just one property, we have aligned our elements side by side! In the past, we would have had to use properties like inline-block, for example. This would have been long and complicated. With Flexbox, it's quick.
Spacing the elements
Our elements are now side by side, but they are still too close together.
We could have played with external margins using margin, but there is an even simpler way.
So, how to space elements using Flexbox CSS? Thanks to the property gap!
Here is what we will add to our container element:
#container {
display: flex;
gap: 10px;
}Here is the result of the gap property with Flexbox:
More nice, isn't it? 😬
For the rest of this complete guide on Flexbox CSS, we will number our elements.
Here is our new HTML code:
<div id="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>We also add a color: white property to the .child class to have this result:
Now that our elements are numbered, let's see together how to give direction to the elements with Flexbox!
Giving direction to the elements
Depending on scenarios and circumstances, it is not uncommon to want to reverse our elements. If you create designs for Arabic countries, you may want to reverse the order of elements to account for their writing direction.
With Flexbox, we can choose the direction of elements thanks to the flex-direction property.
Here's how to use it:
#container {
display: flex;
gap: 10px;
flex-direction: row-reverse;
}And the result:
As we can see, the elements have been reversed.
We achieved this with the row-reverse value on the flex-direction property. This value allows us (as its name suggests) to reverse the row so that the first element becomes the last, and so on.
There are four different values for the flex-direction property. Here they are explained:
- row (default) - elements are placed from left to right on the row
- row-reverse - elements are placed from right to left on the row
- column - elements are placed from top to bottom on the column
- column-reverse - elements are placed from bottom to top on the column
So far, we've seen that elements are placed on the same row, from left to right (with row) or from right to left (with row-reverse). But we can also place our elements in a column. Let's take a closer look.
Columns and rows
With Flexbox, everything is defined by rows and columns. Elements are actually aligned relative to one of these two axes: the horizontal axis (abscissa) and the vertical axis (ordinate).
It is possible to change the orientation of the alignment of these elements by changing the value of the flex-direction property. Here is an example for the value column.
#container {
display: flex;
gap: 10px;
flex-direction: column;
}And the result:
Modifying the size of elements
It is possible to modify the size of elements. That is, the space they occupy on the page.
Specifically, we can make our elements only take up the width of their content (or CSS style).
Here's how we can do it: simply specify that we want elements of type inline-flex and not elements of type block.
To do this, we specify it with the CSS code.
#container {
display: inline-flex;
gap: 10px;
flex-direction: column;
}And the result:
Defining the order of elements
With Flexbox, it is possible to specify the position of an element.
To do this, we have the possibility to use the order property. It takes as value the position at which we want the element to be.
We add this property to the element we want to position. For example, to position element number 1, we can do this:
<div id="container">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child child-3">3</div>
</div>We add another class to each child (child-1 / child-2 / child-3).
.child-1 {
order: 2;
}
.child-2 {
order: 1;
}
.child-3 {
order: 3;
}For each of these classes, we then add the order property.
It is important to specify the order for each element for this property to work. If you only specify order for the class child-1, it will be placed last - unless you give it a position lower than 1.
Centering horizontally and vertically
Centering horizontally
Thanks to Flexbox, we also have the possibility to center horizontally and vertically any element on the page.
If you too used to spend hours centering your elements: those days are over!
Let's start by seeing together how to center horizontally with Flexbox. For this, you simply need to use the justify-content property.
#container {
display: flex;
gap: 10px;
justify-content: center;
}Here is the result.
Looking more closely, we can center our elements in all directions:
- start (default) - Allows elements to be aligned to the left (or to the right if in an Arabic country)
- center - Allows elements to be aligned to the center
- space-between - Allows elements to be pushed apart with space in the center
- space-around - Allows elements to be pushed apart with proportional space between elements and half of that space on the left side of the first element and the right side of the last
- space-evenly - Allows elements to be pushed apart with the same space on all sides
For example, here is the result of space-around (because it's not obvious to understand).
As you can see, we have a space that is proportional on each side. The space between two elements corresponds to the sum of the right space of element 1 and the left space of element 2, resulting in a space twice as large.
Centering vertically
To center vertically with Flexbox, you only need one property: align-items.
It allows you to define the alignment for all elements within a container, that is, for all children. More specifically, it allows you to define the align-self value for each element.
This align-self property can be used on the child element, while align-items can be defined on the parent element.
For this example, we set the background to black and added height: 100vh so that the parent element takes up 100% of the page height (which better shows the effect of align-items: center).
#container {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
height: 100vh
}We can see that our three elements are centered vertically. They are also centered horizontally because we have set the justify-content: center property.
As we have seen, we can also combine multiple align-self properties to center elements independently.
Here is a small example.
#container {
display: flex;
gap: 10px;
justify-content: center;
height: 100vh
}
.child-1 {
align-self: start;
}
.child-2 {
align-self: center;
}
.child-3 {
align-self: end;
}And here is the result.
Each element has a different align-self value:
- start (default) - elements align at the top or left (depending on row or column orientation)
- center - elements align at the center
- end - elements align at the bottom or right (depending on row or column orientation)
Using Flexbox on multiple lines
Until now, we have used Flexbox on a single line:
- from top to bottom (row)
- from left to right (column)
In reality, it is perfectly possible to use Flexbox on multiple lines. Elements are pushed onto a new line when there is no more space on the current line. This is not the case so far.
For example, here is what our elements look like if there are 9 of them:
<div id="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>.child {
background-color: blue;
padding: 100px;
border-radius: 50px;
color: white;
}
#container {
display: flex;
gap: 10px;
}
body {
background: #0E0E0E;
}And here is the result.
As you can see, the elements push each other, creating a shift on the horizontal axis (with a scroll bar).
To make elements wrap onto a new line when there is no more space on the current line, we can use the CSS property flex-wrap.
Let's try adding the property flex-wrap: wrap to our #container ID.
#container {
display: flex;
gap: 10px;
flex-wrap: wrap;
}Here is the result.
It should be noted that this new property flex-wrap can have these values:
- nowrap (default) - elements are pushed onto the same line
- wrap - elements that no longer fit are moved to the next line
- wrap-reverse - elements that no longer fit are moved to the previous line
Speeding up with the shorthand property
We have discovered two properties: flex-direction and flex-wrap. These two properties allow us to specify the general organization of Flexbox, that is, whether we want to use columns or rows, and whether we want to create new columns or new rows for elements that overflow.
It is possible to go even faster by using what is called a shorthand property.
As its name suggests, it allows specifying the values of flex-direction and flex-wrap in a single property: flex-flow. Here is an example.
#container {
flex-direction: row;
flex-wrap: wrap;
}And with the flex-flow property:
#container {
flex-flow: row wrap;
}A piece of cake! We have specified as the first value the value for flex-direction and as the second value the one for flex-wrap.
It is important to respect this order. You must always specify the flex-direction value first and then the flex-wrap value.
Browser compatibility table
Flexbox is a feature of the CSS language that has changed everything for developers. Since its release in 2012, it has been widely made available on everyday browsers. Here is a compatibility table to specify from which version you can use Flexbox:
If you want a more recent version for a specific browser, everything is described on the caniuse website. As you can see, Flexbox is now compatible with all the most used browsers in the world. So you can use it.
To go further: Flexbox vs Grid
But what to do to go even further?
It turns out that another feature that complements the use of Flexbox very well is based on CSS grids. A grid organizes elements into specific positions, somewhat like this:
As you can see, each element can occupy one line or more, and one column or more.
Used with Flexbox, a grid allows you to completely push the limits of CSS as you know it.
If you want to learn more, we invite you to join our complete training on HTML and CSS without further ado.
How to practice with Flexbox?
That's great and all, but I want to practice!
If you want to practice with Flexbox, nothing beats learning while having fun! Many developers around the world have created sites dedicated to learning Flexbox. Here are a few suggestions.
Flexbox Froggy
This tool allows you to easily practice Flexbox by trying to move the frog on the lily pad.
Flexica Islands
This tool is an alternative to Flexbox Froggy. Have fun practicing Flexbox!