CSS tutorial series: CSS Flexbox (working with flex container)
Tags: beginners, webdev, tutorial, css
Published: 2023-01-20 09:59:29

In this previous post [CSS tutorial series: Box Model](https://dev.to/fullstackjo/css-tutorial-series-box-model-52d7), we've come across the display property and learned three property values "inline, block and, inline-block". To day we're going to learn a new value of the display property which is "flex".
Before we begin, let's explain what is the Flexbox.

## What is Flexbox?
Flexbox, also known as Flexible Box, is a layout model made for one-dimensional content that simplifies the creation of flexible and responsive layout structures.

Understanding the idea of a main axis and a cross axis is essential to understanding flexbox. 

- The axis determined by your `flex-direction` property is the main axis, if the value of that property is `row` then your main axis is along the row, if the value is `column` then your main axis is along the column.
![main and cross axis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukd2nhqvzya3mk1btpxp.png)


- The cross axis runs in the other direction to the main axis, meaning if the value of `flex-direction` is `row` then your cross axis runs along the column and vise versa.

![main and cross axis ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ll9pe4vrvi9ke1uqhgv.png)

before you can use Flexbox, you need to create a flex container. A **flex container** is, a container that contains elements within it which we call **flex items**

![flex-container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9528fcz0g70qonrti8d.png)

```HTML
<div class="flex-container">
  Flex Container
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

```

```CSS
div {
  font-size: 1.5rem;
}

.flex-container {
  background-color: black;
  color: red;
  padding-bottom: 10px;
}

.flex-item {
  background-color: yellow;
  margin: 10px 0;
}
```
The flex container becomes flexible when the display `property` is set to `flex`. 

```CSS
.flex-container {
  background-color: black;
  color: red;
  display: flex;
}
```
The flex container has a number of flex properties, which will be explained using examples.

## Flex direction property
this property indicates the direction that the container wants to stack the flex items.

```CSS
.flex-container {
  display: flex;
}
```
By default the flex direction is `row` so the `flex items` will be displayed from left to right.

![flex direction row](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amf867fqertvm8xa58fx.png)

```CSS
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
```
If we set the `flex-direction` to `row-reverse` the `flex items` will bee displayed from right to left.

![flex direction row reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s53tps1x6i9d6y8fsuxr.png)

If we set the `flex-direction` to `column` the `flex items` will be stacked vertically.

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

![flex direction column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6kos0uv8m36apmnwj3i.png)

If we set the `flex-direction` to `column-reverse` the `flex items` will be stacked vertically.

```CSS
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
```

![flex direction column-reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkfsp2erkkq0trs2rn8o.png)

## Flex wrap property
This property indicates if the `flex items` should wrap or not. Its default value is `nowarp`, which forces the `flex items` not to wrap onto a new line. 

![flex wrap nowrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbr1z89vbd9x1cw72vq2.png)

```CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
```
![flex wrap wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3z5fn63lnswwng7zk3o7.png)

```CSS
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

![flex wrap wrap-reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0hcwgo9qtw1c80ei4m0.png)

## Flex flow property
This property is a shorthand for both previously mentioned properties `flex-direction` and `flex-wrap`

Suppose, for instance, that we want our flex container to wrap our row onto a new line.

```CSS
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
```

![flex flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dspupzxn68vad700dpbm.png)

## Justify content property
This property aligns the `flex items` horizontally in the `flex container`.

| Property | Value |
|----------|:-----:|
|`justify-content`| `flex-start`, `center`,`flex-end`, `space-around`, `space-between`, `space-evenly` |

Demonstration of `flex-start`, `center`, `flex-end`:

![justify-content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp9dug2ozjnh8lom5q95.png)

Demonstration of `space-around`, `space-between`, `space-evenly`:

![align-items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zehqcn8gp19tt7ekal6a.png)

## Align items property
This property aligns the items vertically in the container.

| Property | Value |
|----------|:-----:|
|`align-items`| `flex-start`, `center`, `flex-end`, `stretch`, `baseline`|

Demonstration of `flex-start`, `center` and `flex-end`:

![align-items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnsmjhuslrwdytqxqzd8.png)

- `align-items: stretch` is the default.
- `align-items: baseline` using this value will align the `flex items` according to their baseline.

## How to center a div 
Which properties can we use to center a div based on what we just learned?

![centering a div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42of4pwyhpcep1kjm2zc.png)

  

```CSS
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

```
### Tip 
You can center a block level element horizontally such as a div using `margin: 0 auto`.