# Flexbox in CSS

Before starting with Flexbox we must be familiar with the Parent-Child relationship in HTML elements. So, when one or more elements are declared inside an element then the outer element is called the Parent element, and all the elements inside the parent element are called its children.
Let's understand this with one example,


```
<!-- Parent Element-->
    <div class="parent"> 
        Parent element
        <!-- Child Element-->
        <div class="child">
            child 1
            <img src="./assets/lco_img1.png" alt="image not available">
        </div>
        <!-- Child Element-->
        <div class="child">
            child 2
            <img src="./assets/lco_img2.png" alt="image not available">
        </div>
        <!-- Child Element-->
        <div class="child">
            child 3
            <img src="./assets/lco_img3.png" alt="image not available">
        </div>
    </div>
``` 

```
.parent{
    background-color: #00FFFF;
    padding: 10px;
}
img{
    width: 50px;
    height: 50px;
}
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660018171808/yJQBmmHb8.png align="left")

# Flexbox Properties

## Display

### Flex
Setting element display property as Flex (to parent element), set its children in Flex layout.
```
display: flex; /* Enables flex for all children. */
``` 

## Flex direction
flex-direction set the direction of the main axis.

*Full CSS*
```
.parent{
    background-color: #00FFFF;
    padding: 10px;
    display: flex;
    flex-direction: row / column / row-reverse / column-reverse;
}
.child{
    border: 2px solid black;
    margin: 10px;
}
img{
    width: 100px;
    height: 100px;
}
``` 
### Row
*Syntax*
```
flex-direction: row;
```

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660022436661/wy0goFZN4.png align="left")


### Column

```
flex-direction: column;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660028143177/XEm9y4Ooq.png align="left")

### Row reverse

*Syntax*

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

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660028266587/DIXHnlL3_.png align="left")


### Column reverse
*Syntax*

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

 *Output*
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660028418855/-ySVnGqst.png align="left")

## Justify content
Attempts to distribute extra space on the main axis.

### Flex start
*Syntax*

```
justify-content: flex-start;
``` 

*Output*
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660032267056/29Q02Lsta.png align="left")
### Flex end
*Syntax*
```
justify-content: flex-end;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660035968355/kdKAoRuYB.png align="left")

### Center
*Syntax*
```
justify-content: center;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660036069464/lCaPTI2xs.png align="left")

### Space-between

*Syntax*
```
justify-content: space-between;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660036191419/EpiZASSes.png align="left")

### Space around
*Syntax*
```
justify-content: space-around;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660036345170/APLWLTFXU.png align="left")

### Space evenly
*Syntax*
```
justify-content: space-evenly;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660036410206/Vp0gRw66F.png align="left")

## Align Items
Determines how items are laid out on the cross axis.

### Flex start
*Syntax*

```
align-items: flex-start;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660036895557/RONmH1RQy.png align="left")

### Flex end
*Syntax*

```
align-items: flex-end;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660036990077/AH84NWhOn.png align="left")

### Center
*Syntax*

```
align-items: flex-center;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660037050277/_PfJssFrU.png align="left")

## Flex grow
Allows determining how each child is allowed to grow as a part of a whole.
*Syntax*

```
.child1{
    flex-grow: 1;
}
.child2{
    flex-grow: 2;
}
.child3{
    flex-grow: 3;
}
```
*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660038173511/k1EJCLUeg.png align="left")

## Flex wrap
Wraps items if they can't all be made to fit on one line.
### No Wrap
*Syntax*

```
flex-wrap: nowrap;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660037522405/Ezpt8I2Wy.png align="left")

### Wrap
*Syntax*

```
flex-wrap: wrap;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660037660121/PDhxtYp8s.png align="left")

### Wrap reverse
*Syntax*

```
flex-wrap: wrap-reverse;
``` 

*Output*

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660037810824/hgtXIUcxr.png align="left")