DEV Community

Cover image for The CSS Flexbox Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

The CSS Flexbox Tutorial

#css #writing #tutorial #beginners

In this tutorial, we’ll learn how to add a ton of flexibility to our layouts using Flexbox!

We use the *Flexible Box Module (*aka. Flexbox), to create responsive elements within containers that can be automatically arranged based on the screen size. It also has a number of properties that give us total control over how space is distributed between items on a page.

Otherwise known as the “one dimensional” model, Flexbox is ideal for laying out elements in a single direction (either in a row or a column). The CSS Grid Layout is the “two dimensional” model which is better suited to laying out elements in both directions simultaneously.

Flexbox gives us some very powerful features, which we’ll be exploring in this guide!

The Flexbox Layout

Here we have a container (in teal), containing a number of elements (in coral boxes):
Flexbox Layout

HTML:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div> 
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

* {
  font-family: monospace;
  text-align: center;
  font-size: 44px;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: teal;
  border: 2px solid #000;
}
.flex-container > div {
  width: 100px;
  margin: 20px 15px;
  padding: 10px;
  line-height: 75px;
  background-color: coral;
  border: 2px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

This is the code we’ll be working with throughout the guide. Let’s now break it down by examining the key properties!

The Container Element

The first step when using Flexbox is to define a flex container. We do this by setting the display property to flex, like so:

.flex-container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

We now have a number of flex container properties available:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Setting the container also enables a context for all its direct children (known as flex items). More on this later. For now, let’s focus on the flex container properties!

flex-direction

The flex-direction property defines the main-axis, thus defining the direction in which items are placed.

Flex items lay either horizontally with row or vertically with column.

Use the row value to place items in horizontal order (from left to right):
Flex-direction-1

.flex-container {
  display: flex;
  flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

The order can be reversed with row-reverse (items will be from right to left):
Flex-direction-2

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

To place our items vertically (from top to bottom), we use the column value:
Flex-direction-3

.flex-container {
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

And column-reverse will reverse the order (from bottom to top):
Flex-direction-4

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex-wrap

The flex-wrap property lets us choose whether our items should wrap or not.

By default, flex items will always try to fit on one line:
Flex-wrap

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

Note that as it’s the default, nowrap doesn’t need to be set. Our flex items will not wrap.

When we set the wrap value, our flex items will wrap if necessary:
Flex-wrap-1

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

We can also use wrap-reverse to reverse the order:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex-flow

The flex-flow property is a shorthand for the flex-direction and flex-wrap properties. The default value is row nowrap.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
Enter fullscreen mode Exit fullscreen mode

justify-content

The justify-content property defines the alignment of flex items on the main axis:
Justify-contet

.flex-container {
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

That’s how simple it is to center our flex items!

We can also use flex-start to place our items at the beginning of the container (this is the default):
Flex-start

.flex-container {
  display: flex;
  justify-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

To place our items at the end, use flex-end:
Flex-end

.flex-container {
  display: flex;
  justify-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Use space-around to display flex items with space before, between, and after:
Space-around

.flex-container {
  display: flex;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Which differs from space-between which distributes space between our flex items:
Space-between

.flex-container {
  display: flex;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

align-items

The align-items property defines how items are laid out along the cross axis.

I’ve increased the height of the container in our demo code to 250px, to better show the effects.

To align items in the middle of the container, we use center:
Align-items

.flex-container {
  display: flex;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

To place at the top, use flex-start:
Flex-start

.flex-container {
  display: flex;
  align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

Or use flex-end to place at bottom of the container:
Flex-end

.flex-container {
  display: flex;
  align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

The default value of stretch will stretch our items to fill the container:
Stretch

.flex-container {
  display: flex;
  align-items: stretch;
}
Enter fullscreen mode Exit fullscreen mode

The baseline value will align items according to their baselines:
Baseline

.flex-container {
  display: flex;
  align-items: baseline;
}
Enter fullscreen mode Exit fullscreen mode

align-content

The align-content property is used to align the flex containers’ lines.

In these examples, the demo container height has been increased to 350px and the flex-wrap property to is set to wrap, to better illustrate how align-content works.

Note: this property has no effect when there is only one line of flex items!

Setting space-between will display each flex line with equal space between them:
Space-between

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

The space-around value will distribute space before, between, and after each flex line:
Space-around

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

The default stretch value stretches the flex lines to fill any remaining space:
Stretch

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
Enter fullscreen mode Exit fullscreen mode

We can use center to display the flex lines in the middle of the container:
Center

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Or flex-start to position at the start of the container:
Flex-start

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

And finally flex-end to position our lines at the end of the container:
Flex-end

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

How to achieve perfect centering

It’s quite simple with Flexbox! Just ensure both justify-content and align-items are set to center:
Center

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Child Elements (Flex items)

Now we’ll take a look the set of properties we can apply to child elements (otherwise known as our flex items).

Any direct child elements of a flex container will automatically become flex items. Note: Height is taken away from these next few examples.
Child Elements

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

So the four coral boxes are our flex items, as they’re direct children of flex-container.

The flex item properties are:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self
  • flex

order

The order property controls the order in which flex items appear in the flex container.

The value must be a number, like so:
Order Property

<div class="flex-container">
  <div style="order: 4">1</div>
  <div style="order: 1">2</div>
  <div style="order: 3">3</div>
  <div style="order: 2">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex-grow

The flex-grow property gives a flex item the ability to grow. It defines the amount of available space that the item should take up, relative to the rest of the flex items.

The value must be a number.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to each flex item.

If one of the children has a value of 2, the remaining space would (attempt to) take up double the space of the others:
Flex-grow

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 1">3</div>
  <div style="flex-grow: 1">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex-shrink

The flex-shrink property defines the ability for a flex item to shrink relative to the rest of the flex items.

For example, we might not want the second flex item to shrink as much as the others:
Flex-shrink

<div class="flex-container">
  <div>1</div>
  <div style="flex-shrink: 0">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex-basis

The flex-basis property defines the default size of an element before any remaining space is distributed.

Let’s set the initial length of the third item to 300 pixels:
Flex-basis

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 300px">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

align-self

The align-self property allows the default alignment (the one specified by align-items) to be overridden for individual flex items.

In these examples we’ll use a 200 pixels high container, to better illustrate the align-self property.

Let’s align the third flex item in the middle of the container (the others are defaulting to stretch:
Align-self

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

And let’s align the second flex item with the bottom, and the third flex item with the top:
Align-self-2

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-end">2</div>
  <div style="align-self: flex-start">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex (shorthand)

The flex property is shorthand for flex-grow, flex-shrink, and flex-basis combined. The flex-shrink and flex-basis properties are optional, with the default being 0 1 auto.

For example, let’s make the second flex item not growable (0), not shrinkable (0), and give it an initial length of 300px:
Flex (shorthand)

<div class="flex-container">
  <div>1</div>
  <div style="flex: 0 0 300px">2</div>
  <div>3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Hello!

If you'd like, you can add syntax highlighting (colors that make code easier to read) to your code block like the following example.

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

This should make it a bit easier to understand your code. 😎

In order to use this in your code blocks, you must designate the coding language you are using directly after the first three back-ticks. So in the example above, you'd write three back-ticks js (no space between the two), put the code beneath (e.g. console.log('Hello world!');), then three back-ticks beneath that to close the code.

Here's an image that shows how it's written!

Example of how to add syntax highlighting in code blocks

Collapse
 
rembertdesigns profile image
Richard Rembert •

Thank you! About to do that now! Very much appreciated!

Read next

robertobutti profile image

WebSocket broadcasting with JavaScript and Bun

Roberto B. -

dailson_igo profile image

Ruby on Rails 8 - Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN

Dailson Igo Araujo Palheta -

surajondev profile image

Building a Custom Scheduler Using React and Supabase

Suraj Vishwakarma -

websilvercraft profile image

How to use Promise.race to add timeout to fetch calls

websilvercraft -