An overview of Flexbox
Published: 2022-11-21 13:48:07

## What is Flexbox ?
Flexbox is used for designing the one-dimensional layout, at a time you can either design your layout in columns or rows. Everything in flexbox depends on these two terms main axis and cross-axis they are perpendicular to each other. The main axis is determined by the flex-direction property. 

Flexbox works with the concept of containers and items, every element which is to be layout needs to be inside a container, this container is known as a flex container and the element is known as a flex-items. Let’s try to understand this with an example.

This is the HTML file we are going to use for this article, in this HTML document we have a div element with the class as container and it has five div child elements.
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Positioning</title>
  </head>
  <style>
    .container {
      width: 90vw;
      height: 80vh;
      border: 2px solid #242b2e;
      padding: 10px;

      /* changes below this*/
    }
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
			margin: 10px;
      font-size: 40px;
      text-align: center;
      color: #ffffff;
    }
  </style>
  <body>
    <div class="container">
      <div class="box box-1">1</div>
      <div class="box box-2">2</div>
      <div class="box box-3">3</div>
      <div class="box box-4">4</div>
      <div class="box box-5">5</div>
    </div>
  </body>
</html>

```
![f1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669035141247/isNmfixje.png)
As you can see all five boxes are stacked one after another, let’s add `display: flex` to the container.
```css
.container {
      width: 600px;
      height: 500px;
      border: 2px solid #242b2e;
      padding: 10px;

      /* changes below this*/
      display: flex;
    }
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      margin: 10px;
      font-size: 40px;
      text-align: center;
      color: #ffffff;
    }
```
 Adding `display: flex` to the container element will define it as a flex container and all the flex items will be layout according to their main axis depending on the `flex-direction` by default the `flex: direction` is set to row so horizontal is our main axis, so the item will layout in a row.
![f2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669035248652/ebYaPFbF1.png)
Now let’s change the flex-direction to a column and see the changes.
```css
.container {
      width: 600px;
      height: 500px;
      border: 2px solid #242b2e;
      padding: 10px;

      /* changes below this*/
      display: flex;
      flex-direction: column;
    }
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      margin: 10px;
      font-size: 40px;
      text-align: center;
      color: #ffffff;
    }
```

![f3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669035357326/vOtbsm-97.png)
As you can see when we change the flex-direction to the column, the column becomes the main axis and the horizontal becomes the cross axis. 

## Flex direction
The `flex-direction` property is used to establish the main axis. `flex-direction` takes 4 values `row` `column` `row-reverse` and `column-reverse.` On webpages, the default value of `flex-direction is set to row.

### flex-direction: column
This property set’s the column as the main axis, so items are arranged from top to bottom.
![Screenshot from 2022-11-20 19-14-24.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669035632871/fe6MS50HO.png)

### flex-direction:row-reverse
This property reverses the items from left to right to right to left and moves the element toward the end of the container.
![Screenshot from 2022-11-20 19-40-56.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669035678857/b9mJ-tHv-.png)

### flex-direction: column-reverse
This property reverses the items from top to bottom to bottom to top and moves the item toward the end of the container.
![Screenshot from 2022-11-20 19-42-41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669035737067/k9O55TpOc.png)

## flex-wrap
Flexbox is a one-dimensional layout system, so by default, all the items will try to fit in one line, but we can allow items to wrap and move to the next line, just like word wrap in vs code. We can pass three values to `flex-wrap` `nowrap` `wrap` `wrap-reverse` By default, flex-wrap is set to no-wrap `flex-wrap: nowrap`.

### `flex-wrap: wrap`
![Screenshot from 2022-11-20 19-54-53.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669036065577/x_KZIFtPi.png)
When we change the size of the container items move to the next line.

### `flex-wrap:wrap-reverse`

Applying `wrap-reverse` will wrap items to the next line but from bottom to top.
![Screenshot from 2022-11-20 19-59-52.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669036107415/UVHH_VWSM.png)

## justify-content

`justify-content` is used to align the items along the main axis. This is generally used to distribute the space between the items. `justify-content` takes many values but we are going to discuss the values that are used most.
![justify-content center (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669036164719/agwADqOGG.png)

### `justify-content: center` 
> the `justify-content` center is used to move the items to the center of the main axis.

### `justify-content: flex-start`
> This is used to move the items to the start of the main axis. This is also the default value.

### `justify-content: flex-end` 
> This property is used to move the items to the end of the main axis.

### `justify-content:space-between` 
> This property moves the first item to the start of the main axis and the last item to the last of the main axis and leftover space is event distributed between the items.

### `justify-content: space-around`
> This property is used to evenly distributes the items, with equal space around them.

### `justify-content: space-evenly`
> This property is used to distribute equal space around the items.

## align-items

`align-items` is used to control the alignment of items along the cross-axis. `align-items` takes the following values `flex-start` `flex-end` `center` `stretch` `baseline.`

![justify-content center (1) (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669036396106/5khPoJVug.png)

### `align-items: center` 
> This property is used to align items to the center along the cross-axis.

### `align-items: flex-start`
> This property is used to align and move the items to the start of the container along the cross-axis.

### `align-items: flex-end`
> This property is used to align and move the items to the end of the container along the cross-axis.

### `align-items:stretch`
> This property is used to stretch and fill the items along the cross-axis.



## align-content

`align-content` is very similar to `justify-content` property. This is also used to distribute the space between the items but along the cross-axis. `align-content` takes the following values. `flex-start` `flex-end` `center` `stretch` `space-between` and `space-around`


*Now let’s discuss some properties which can be applied only to the items themselves.*

## order

order property is used to control the order of the items. By default, all the flex items have an order value of 0. The order of items is controlled by the order property. 

```css
.container {
      width: 50%;
      height: 500px;
      border: 2px solid #242b2e;
      padding: 10px;

      /* changes below this*/
      display: flex;
    }
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      margin: 10px;
      font-size: 40px;
      text-align: center;
      color: #ffffff;
    }

    .box-1 {
      order: 3;
    }
    .box-4 {
      order: -1;
    }
```


![Screenshot from 2022-11-20 23-52-48.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669036528838/tQnhEIw3n.png)

## flex-grow
It specifies the amount by which an item will grow relative to the rest of the flexible items in the same container.

![Screenshot from 2022-11-21 00-07-04.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669036546603/qE15kT8XE.png)

## Conclusion
The article only discusses the most commonly used flexbox properties. If you want to learn more about flexbox, CSS Tricks has a great article on it. That's all for this article, let me know what you think in the comments.