The Flexbox module (Flexible Box Layout) is a one-dimensional CSS layout system for organizing, aligning, and distributing elements.
The arrival of this standard was a before and after in frontend development, as it left behind many strange hacks and mathematical frustrations when structuring the design of our pages.
To give you an idea of the collective trauma web programmers had before this existed, let me give you an example.
For years, the most searched and voted question on forums like StackOverflow was: “How the hell do I center a div horizontally and vertically on the screen?”.
With classic tools (like floats or absolute positioning), creating a simple three-column grid where all columns were the same size was a maintenance nightmare.
Fortunately, some very smart people started thinking (and drawing inspiration from things that existed in other languages 😎), created Flexbox, and we all breathed a sigh of relief.
When to use Flexbox
Flexbox is suitable when we need to align elements in a single direction. Menus, button bars, cards in a row, forms with a label and field, headers with a logo on one side and navigation on the other… that’s its natural territory.
If you find yourself trying to control rows and columns simultaneously with many nested flex containers, perhaps the problem is no longer Flexbox’s. You’re probably entering the territory of CSS Grid (Flexbox’s sibling, which we will see in its own article).
The concept: The Container and the Children
Flexbox is not a single CSS property, but a set of rules that interact with each other. To understand it, we need to divide the world into two sides: the parent container and the child elements.
To activate Flexbox, you just need to go to the parent element and apply the main rule: display: flex;.
At that precise moment, the normal box transforms into a flexible container, and all the elements immediately inside it start to move, stretch, or shrink according to the new rules we dictate.
.parent-container {
/* From here on, Flexbox rules apply */
display: flex;
background-color: lightgray;
}
.child {
/* These elements are now automatically flexible */
background-color: orange;
padding: 20px;
margin: 5px;
}
Flexbox only affects the direct children of the container. If one of those “children” contains a paragraph inside it, that paragraph will know nothing about Flexbox (unless you turn the child itself into another flexible container).
What changes when activating Flexbox
When we apply display: flex, we are not just saying “put things in a row for me.” We are changing the algorithm the browser uses to place the direct children.
.parent-container {
display: flex;
}
From that moment on, those children become flex items. The parent container decides how they are distributed, and the children can receive special properties to grow, shrink, or change their order.
The HTML doesn’t change. What changes is the way CSS interprets the distribution of those boxes.
The two axes of Flexbox
Flexbox is a one-dimensional system, which means it only knows how to place things on a single line at a time (either a horizontal row or a vertical column).
To organize this space, Flexbox defines two imaginary axes: the Main Axis and the Cross Axis.
It is the main direction in which the child elements will be placed. By default, when you set display: flex, the browser establishes that the main axis goes from left to right (horizontally).
Therefore, if you have three <div> boxes (which would normally be stacked one below the other), when you apply Flexbox to them, they will automatically be placed next to each other, forming a perfect row.
We can change the direction of this “train track” using the flex-direction property.
.container {
display: flex;
/* We change the track so elements fall from top to bottom */
flex-direction: column;
}
If you change flex-direction to column, remember that the axes also change. justify-content will stop acting horizontally and will start acting vertically. This detail is the origin of many “why won’t this center?” faces.
The cross axis is always the line perpendicular to the main axis.
- If your main axis is horizontal (a row), the cross axis will be vertical (from top to bottom).
- If you have changed the main axis to vertical (a column), the cross axis will become horizontal (from left to right).
The end of suffering
Let’s go back to the recurring joke among programmers. How do we now center a simple little square perfectly in the middle of the screen without dying trying?
Thanks to the two axes, the answer is very simple. We just tell the flexible container: “Hey, align your child to the center of your main axis, and then align it to the center of your cross axis.”
body {
display: flex; /* We turn the entire page into a flexible container */
height: 100vh; /* We make it occupy the full height of the screen */
/* Center on both axes */
justify-content: center; /* Centers it on the main axis (horizontal by default) */
align-items: center; /* Centers it on the cross axis (vertical by default) */
}
And that’s it. No math, no coordinates, no negative margins. The browser automatically calculates the spaces and keeps the box in the absolute center, even if we resize the window.
Of course, we have thrown out a couple of important properties (justify-content and align-items) without explaining them in detail.
Don’t worry, in the next entry we are going to look in detail at the Flexbox alignment properties so you can build interfaces with much more control.
