How to Get Started With CSS Flexbox

Written by jenniferwjertzoch | Published 2020/11/22
Tech Story Tags: flexbox | css | frontend-development | programming | tech | html | ux-design | design | web-monetization

TLDR CSS Flexbox is a layout mode or model, that makes it easier to position elements vertically or horizontally in a container. Flexbox works with a container element — the so-called "flexflex-container" 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. The flexbox works exactly one level deep and the flexbox is activated only by default. There are certain align properties to position our flex-items and to change directions, vertically and horizontally.via the TL;DR App
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.
Written by jenniferwjertzoch | Berlin based Frontend Developer with a background in Art and Design.
Published by HackerNoon on 2020/11/22
ABOUTHow hackers start their afternoons. We publish tech stories and build publishing software.

READEntirely free library read by hundreds of millions to learn anything about any technology.

WRITEHackerNoon elevates quality technology writing far and wide across the interwebs.

PARTNERHackerNoon works directly with tech companies to place ads by content relevancy