How to Get Started With CSS Flexbox

This little introduction to CSS Flexbox should help you to get a first impression and give you some examples to play around with. From here you will be able to integrate this powerful framework into your own projects.

The Flexible Box Model

If you have never used Flexbox before, it can be a bit confusing in the beginning. CSS Flexbox is one way to design responsive layouts with CSS3. Basically, it is the first real possibility to create layouts with CSS, considering that floats were never meant for designing layouts and can only be used with workarounds.

It is also called the Flexible Box Model.

Basically, it is a layout mode or model, that makes it easier to position elements vertically or horizontally in a container.

CSS Flexbox Diagram

Flexbox works with a container element — the so-called

flex-container

display: flex

CSS

.flex-container {
    display: flex;
}

And then inside that, we have child elements, called

flex-items

Within the

flex-container

The Flex Properties

There are certain align properties to position our

flex-items

display: flex — This goes on that container element.

direction — Flex-direction row is the default and aligns the flex-items horizontally, while column aligns them vertically.

flex-wrap — Defines if we want the flex-items to wrap or not. If we make the browser window smaller they will go down to the next line or not.

flex-basis — This assigns a width to each of your flex-items.

justify-content — If we want to align the flex-items to the left, we can say flex-start, the right would be flex-end and we can also center them.

Other Alignments:

align-self — This allows the default alignment to be overwritten for individual flex items.

align-items — Describes how the flex-items are laid out along the cross axis on the current line.

flex-grow and flex-shrink — Make different flex-items in a row different sizes.

flex — This is flex-grow and flex-shrink put together.

order — Changes the order of the flex-items without changing the HTML.

Coding with CSS Flexbox

General Set Up

HTML

<div class="flex-container">
    <div class="flex-item flex-item1">1</div>
    <div class="flex-item flex-item2">2</div>
    <div class="flex-item flex-item3">3</div>
</div>

As a set up to start with, I prepared a HTML file with a div called

flex-container

flex-item1

flex-item2

flex-item3

I also added a bit of styling to make our examples a little more visible. There we have

flex-container

flex-items

CSS

.flex-container {
    background-color: #8426d0;
    padding: 15px;
    width: 800px;
    display: flex;
}
.flex-item {
    background-color: #fe8605;
    color: white;
    font-family: arial;
    font-size: 48px;
    border: 1px solid #8426d0;
    height: 160px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Items in a Row

Now let’s say that we want these side by side and take up the whole width. So all we have to do is go to the

flex-container

flex-items

CSS

.flex-container {
    display: flex;
}

If you want to change the direction to go vertically instead of horizontally, we could add

flex-direction: column

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

Flexible sizing of Flex Items

If we want

flex-item1

flex: 2

CSS

.flex-item1 {
    flex: 2;
}
.flex-item2 {
    flex: 1;
}
.flex-item3 {
    flex: 1;
}

Ordering Flex Items

But what what if we want

flex-item1

order: 2

flex-item1

flex-item2

order: 1

flex-item3

order: 3

flex-item1

CSS

.flex-item1 {
    flex: 2;
    order: 2;
}
.flex-item2 {
    flex: 1;
    order: 1;
}
.flex-item3 {
    flex: 1;
    order: 3;
}

CSS Flexbox Alignment: Center Items with with Justify-Content

With justify-content we can control the alignment of all elements on the main axis. The justify-content property takes on any of the 5 values below:

flex-start

lex-end

center

space-around

By default, it is

flex-start

flex-end

center

But as you can see, this leaves a lot of space on the side. So if we want to put basically margin in the middle of this, so that this can spread all the way across and also have margins in the middle, then we can set it to

space-between

In contrast to

space-around

Wrapping Elements with Flexbox

For the next example, I add three more items to make it clearer what I want to show. If we look at this on smaller screens like smartphone or tablet, the columns are pushed together.

HTML

<div class="flex-container">
    <div class="flex-item flex-item1">1</div>
    <div class="flex-item flex-item2">2</div>
    <div class="flex-item flex-item3">3</div>
    <div class="flex-item flex-item4">4</div>
    <div class="flex-item flex-item5">5</div>
    <div class="flex-item flex-item6">6</div>
</div>

Now you will probably say, why not simply use media queries around our

flex-container

flex-wrap

flex-items

CSS

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

Further Reading

• MDM Mozilla — Excellent resource for learning HTML and CSS.
• CSS Tricks — Daily articles about CSS, HTML, JavaScript.
• Smashing Magazine — I have been following CSS-tricks and Smashing magazine for quite some time now.
• Flexbox Froggy — A fun game to learn Flexbox.