# Guide to Flexbox

Today you will learn about Flexbox. Flexbox nowadays is used so much that you can't ignore it. 
I love the Flex system in CSS. they give so much control to position elements on the screen. so in this entire reading, we will see such a use case. Let's start.

Have you ever centered the element to screen using margin-top, well that's the old method now, and honestly not proper use.

Let's do it in the Flexbox way.

HTML:
```html
<div class="container">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
</div>
```

CSS:
```css
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lco-logo {
  width: 100px;
  height: 100px;
}
```

Result:

![Screenshot 2022-08-01 at 4.52.42 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659352975135/WLJOILYRc.png align="left")


not only this, flexbox has many use cases, let's explore them one by one.


# How to use flexbox

to use flexbox, we have to use `display: flex;` on the outer container. so we can use flexbox properties. 

# flex-direction

We can define flex-direction as either row or column. on the website when you use `display: flex;` by default direction will be **row**. 

`flex-direction: row | row-reverse | column | column-reverse;`

Let's see the usage.

HTML:
```html
<div class="container">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
</div>
```

CSS:
```css
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  flex-direction: column;
}
.lco-logo {
  width: 100px;
  height: 100px;
}
```

Result:

![Screenshot 2022-08-01 at 5.01.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659353553587/0e3JEwET-.png align="left")


# justify-content

justify content works on the main axis, if flex-direction is set to row then justify-content align content on row. let's see example.

#### justify-content: center
```css
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}
.lco-logo {
  width: 100px;
  height: 100px;
}
```


![Screenshot 2022-08-01 at 5.10.03 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354010688/Zh-Til8FV.png align="left")

#### justify-content: space-between

```css
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
}
.lco-logo {
  width: 100px;
  height: 100px;
}
```


![Screenshot 2022-08-01 at 5.11.01 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354082323/9tICBZskh.png align="left")

similarly, we have `space-around` and `space-evenly`, `flex-start`, `flex-end`.


![Screenshot 2022-08-01 at 5.11.58 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354163636/ehMkC3cXQ.png align="left")


# align-items
this property works on a different axis, we can call it a secondary axis, if the direction is set to row, this will work on top-to-bottom.


`align-items: flex-start | flex-end | center` 

# flex-wrap

flex wrap is very useful when the content is overflowing, or squizzing into the container, we can use the wrap, so the remaining items will be moved to the next line.

**without flex-wrap**

![Screenshot 2022-08-01 at 5.21.00 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354692926/ltlCgg1kN.png align="left")

**with flex-wrap**
```css
.container {
  flex-wrap: wrap;
}
```


![Screenshot 2022-08-01 at 5.22.56 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354784251/cQQGXuNO7.png align="left")