Before you go, check out these stories!

0
Hackernoon logoHow to Get Started With CSS Flexbox by@jenniferwjertzoch

How to Get Started With CSS Flexbox

Author profile picture

@jenniferwjertzochJennifer Wjertzoch

Berlin based Frontend Developer with a background in Art and Design.

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
. With
display: flex
on the container element, the flexbox is activated.

CSS

.flex-container {
    display: flex;
}

And then inside that, we have child elements, called

flex-items
. The flexbox works exactly one level deep.

Within the

flex-container
there are two axes, main-axis and cross-axis of the flexbox. The main-axis runs from left to right by default, the cross-axis from top to bottom.

The Flex Properties

There are certain align properties to position our

flex-items
and to change directions, vertically and horizontally. Here you can find some of the main flex properties.

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
and that wraps three other div’s with the class of
flex-item1
,
flex-item2
and
flex-item3
.

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

flex-container
, which doesn’t have any styles in it, and we have some empty
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
and add display: flex. And you can see that it puts them automatically side by side. By default, the flex-direction property is set to row and it aligns the
flex-items
along the main axis. No floats or anything like that is needed.

CSS

.flex-container {
    display: flex;
}

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

flex-direction: column
and bring it back to being a column.

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

Flexible sizing of Flex Items

If we want

flex-item1
to be the main column and make it a little wider, we change that to
flex: 2
. As you can see it pushes these two over and this is now larger. You can keep on doing this, until you get to a certain number, then it just stops.

CSS

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

Ordering Flex Items

But what what if we want

flex-item1
to be the main column in the middle of the other items? We simple change the order of that. All we would have to do is add
order: 2
to
flex-item1
. And to
flex-item2
order: 1
and then to
flex-item3
order: 3
. So now you can see
flex-item1
in the middle.

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
| f
lex-end
|
center
| |
space-around

By default, it is

flex-start
, so that won’t change anything. If we say
flex-end
, that pushes it over. And finally
center
puts it in the centre.

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
. This puts the margins in the middle.

In contrast to

space-around
there are no margins on the side.

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
. But with CSS Flexbox we can create responsive layouts that do not require media queries. With
flex-wrap
it is determined that the
flex-items
will wrap if there is not enough space available.

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.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.