The CSS Flexbox Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-26 13:01:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpw34svlbakex1r75w6z.png)

**HTML:**
```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div> 
</div>
```
**CSS:**
```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;
}
```
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:
```css
.flex-container {
  display: flex;
}
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1youl99hh49prl7li7i.png)
```css
.flex-container {
  display: flex;
  flex-direction: row;
}
```
The order can be reversed with _row-reverse_ (items will be from right to left):
![Flex-direction-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l7ec4zkbdi97ett56mf.png)
```css
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
```
To place our items vertically (from top to bottom), we use the _column_ value:
![Flex-direction-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlj8fsc0yg959tkspuba.png)
```css
.flex-container {
  display: flex;
  flex-direction: column;
}
```
And _column-reverse_ will reverse the order (from bottom to top):
![Flex-direction-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuceaq92rrt1uuu3oqc1.png)
```css
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
```
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2j4kgy3ovvqkq93xvkia.png)
```css
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chi4straw8opksegtos7.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
```
We can also use _wrap-reverse_ to reverse the order:
```css
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

### flex-flow
The `flex-flow` property is a shorthand for the `flex-direction` and `flex-wrap` properties. The default value is `row nowrap`.
```css
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
```

### justify-content
The `justify-content` property defines the alignment of flex items on the main axis:
![Justify-contet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx6ui7tiynbw2ssi8i3z.png)
```css
.flex-container {
  display: flex;
  justify-content: center;
}
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woqwsfm66z7ajq8kabws.png)
```css
.flex-container {
  display: flex;
  justify-content: flex-start;
}
```
To place our items at the end, use _flex-end_:
![Flex-end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skhv8l3ofttex1uemjcs.png)
```css
.flex-container {
  display: flex;
  justify-content: flex-end;
}
```
Use _space-around_ to display flex items with space before, between, and after:
![Space-around](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8flk3qkbs8bfscos69u6.png)
```css
.flex-container {
  display: flex;
  justify-content: space-around;
}
```
Which differs from _space-between_ which distributes space between our flex items:
![Space-between](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ebru3n4fnvs9eba60bo.png)
```css
.flex-container {
  display: flex;
  justify-content: space-between;
}
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbtc7bmn3xwuv49cd5ix.png)
```css
.flex-container {
  display: flex;
  align-items: center;
}
```
To place at the top, use _flex-start_:
![Flex-start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g3nbk7y4mnld6jwk7we.png)
```css
.flex-container {
  display: flex;
  align-items: flex-start;
}
```
Or use _flex-end_ to place at bottom of the container:
![Flex-end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezg89pac2kxuwajorfbg.png)
```css
.flex-container {
  display: flex;
  align-items: flex-end;
}
```
The default value of _stretch_ will stretch our items to fill the container:
![Stretch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6agr6klkpm73b8x004f.png)
```css
.flex-container {
  display: flex;
  align-items: stretch;
}
```
The _baseline_ value will align items according to their baselines:
![Baseline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ktdrsy0qqg2i9ew8dke.png)
```css
.flex-container {
  display: flex;
  align-items: baseline;
}
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvgd8d01b40jwdbyiyda.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
```
The _space-around_ value will distribute space before, between, and after each flex line:
![Space-around](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmcrh4g2oqsyzylqjdkh.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
```
The default _stretch_ value stretches the flex lines to fill any remaining space:
![Stretch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pi4qxd5d6460cxhbdk1p.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
```
We can use _center_ to display the flex lines in the middle of the container:
![Center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewe8hbpjhpus03l6qygz.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
```
Or _flex-start_ to position at the start of the container:
![Flex-start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clpqn2lgf0gbkgeori63.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
```
And finally _flex-end_ to position our lines at the end of the container:
![Flex-end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6nnjwkdnw8rtcjm19a9.png)
```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
```

## How to achieve perfect centering
It’s quite simple with Flexbox! Just ensure both `justify-content` and `align-items` are set to _center_:
![Center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p39dlebw4hkdt2ehiq5.png)
```css
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6gs1b305tjo6xi8uxhc.png)
```css
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gag3cbmdqwm7dpf4ltku.png)
```html
<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>
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le6vo6c0lkc7dec1gybr.png)
```html
<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>
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv0qsct1y8c6cvwyk33j.png)
```html
<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>
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa5kfu14hwzng6ixencx.png)
```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 300px">3</div>
  <div>4</div>
</div>
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj4urfpkr06idnxciypt.png)
```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>
```
And let’s align the second flex item with the bottom, and the third flex item with the top:
![Align-self-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8m7utk6tclgu8yrpt2e.png)
```html
<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>
```

### 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)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chz09xex2bqwg4a4vx14.png)
```html
<div class="flex-container">
  <div>1</div>
  <div style="flex: 0 0 300px">2</div>
  <div>3</div>
  <div>4</div>
</div>
```
## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)