Autor: Codenga 15.06.2023

Flexbox is a modern and widely used layout technique. It lets you easily arrange items in a row or column. And such an arrangement can flexibly adapt to the amount of space available.

Flexbox - unlimited possibilities

Flexbox creates a one-dimensional layout. This means that you can arrange items in a row or in a column, but not both at the same time. Many common problems can be solved with this technique. You can:

• create columns of equal height
• create a fluid column layout that will adapt to the amount of space available
• center the content of the item vertically
• and much, much more

Flexbox is currently properly supported by virtually all popular browsers. This is a technique that you can confidently use to create the layout of page elements.

An example

Let's immediately start creating a flexbox based layout.

The HTML code looks like this:

<section>
    <article>
    Zawartość artykułu
    </article>
    <article>
    Zawartość artykułu
    </article>
    <article>
    Zawartość artykułu
    </article>
</section>

We have a section that includes three articles. Normal flow is used so the articles are displayed one above the other (they are block elements).

Our task is to change this layout so that the articles will be placed next to each other in one row.

We need to add the following property to the container:

section {
    display: flex;
}

The container for articles is a section and that's what we've added to it: display: flex.

Here's the effect:

Now all articles are placed next to each other on one line. Note that they are the same height no matter how much content is in the article. We can say that our articles have become "flexible boxes".

Columns and rows

Flexbox has two possible layouts: row and column. The default layout is row, so the articles in our example are arranged next to each other. To change the layout, just add the appropriate property to the flex container:

flex-direction: column;

The content will be arranged in one vertical column.

flex-direction: row;

The content will be arranged in one row. This is the default value.

So if we want to change the layout of our articles from row to column, we can do this:

section {
    display: flex;
    flex-direction: column;
}

We will get the articles stacked one above the other.

In practice, you can arrange the elements as you like. We have simple set of links:

<div class="links">
    <a href="index.html">Start</a>
    <a href="categories.html">Kategorie</a>
    <a href="new.html">Nowości</a>
</div>

Links are inline elements, so they will be placed next to each other. If you want to arrange them vertically, add the appropriate properties to the .links container:

.links {
    display: flex;
    flex-direction: column;
}

And here is the result:

Flexbox - useful techniques

Wrapping

Wrapping is useful if you want to create a "seamless" layout of elements. Layout that will adapt to the amount of available space.

We have articles with a fixed width. Each of them is exactly 300px wide. The articles are placed in a flexbox.

Note that the articles are "squeezed" by the flexbox. Setting their width to 300px will do nothing here because the flexbox will compress them anyway. In such a situation, it would be better to wrap the articles into the following rows.

Let's add a property to the container that wraps these articles:

section {
    display: flex;
    flex-wrap: wrap;
}

The flex-wrap property is set to wrap. Thanks to it, we will prevent our articles from being squeezed and, instead, they will wrap nicely to the following rows.

Wrapping depends on the available space:

• with large width, all articles on one line
• at medium width, some articles will jump to the next line
• with a small width, each article will be on a separate line

In this way, you can easily create a flexible layout that will always adapt to the amount of space available.

Aligning items

Flexbox allows you to easily align elements. Take a look at an example:

We have a gray bar with buttons. The buttons are placed according to the normal flow of elements. We want them to be vertically centered in relation to the bar. In addition, they should be evenly spaced horizontally - so that the buttons are equally spaced.

We'll start by adding display: flex to the bar, because that's the container for the buttons.

.actions {
    display: flex;
}

Here's the effect:

Notice that the buttons have been stretched vertically. This is how the flexbox works - it creates columns of the same height. Our articles in the previous examples also acted in the same way.

Now you need to center the buttons vertically:

.actions {
    display: flex;
    align-items: center;
}

The 'align-items: center' centers our buttons.Interestingly, if our flex container was a column and not a row, the buttons would be horizontally centered! This is how flexbox works - it does not distinguish between vertical and horizontal. It only has a main axis and a secondary axis that can change places if you change the layout from rows to columns and vice versa.

It's starting to look good now. We'll spread these buttons horizontally in a moment.

Let's add another property to the container:

.actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

Property 'justify-content: space-around' will allow us to achieve the desired effect. The buttons will be evenly distributed. Importantly, spaces will appear on each side:

• between buttons
• on the left and right sides of the outermost buttons

The flex mechanism calculates everything automatically. It counts the width of the strip and the width of the buttons and distributes them in such a way that the same gaps appear on each side.

In the browser, we have this effect:

Summary

Flexbox is one of the best things that ever appeared in CSS because it allows you to easily arrange elements. And this is just the beginning of what can be achieved with this technique.

If you want to learn more about modern CSS, and gain the skills needed to work as a Web Developer, start the journey with our Career Path. The whole process ends with an Exam, which will grant you the Certificate of Completion!