CSS Flex box : everything you need to know about flex box
Tags: css, html, beginners, webdev
Published: 2021-07-16 10:52:55

Hey, welcome. If you are here, you must have heard about flex box in CSS or you already know what is flex box. But, What exactly Flex box is ?

#What is Flex Box ?

Flex box layout provide us a more efficient way to manage items of a particular container. Flex box layout align, shrink items or make space among items by occupying the given space, and make the website [responsive](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g).

#How to use flex box ?

Well to use flex box you just have to set container element's `display` property to `flex`. `display: flex;` will enable all flex box feature to this container.

```CSS
.container{
    display: flex;
}
```

#Let see some flex box properties that you can use.

i) `Flex-direction` : This property is for parent. It allows us to set or change item's direction. Like

![Frame 1 (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyzjpgc2m3ha9m2464tu.png) 

ii) `Flex-wrap` : This is also for parent element. It allow you to wrap the items and prevent overflow.

![Frame 2 (7)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhm0q8lcmuc26f0h1cy2.png) 

iii) `Flex-flow` : This is the shorthand for `flex-direction` and `flex-wrap`. The default value is :
```CSS
.container{
    flex-flow: row nowrap;
}
```
> You can see the first value for this property id `flex-direction` and second is for `flex-wrap`.

iv) `justify-content` : It is the most common and frequently used property. It is used to align items in the x axis or horizontal axis.

![Frame 3 (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neg8xsb0ogu5ocr9dh1z.png)

v) `align-items` : It is also a common and frequently used property. It is used to align items in Y axis or vertical axis.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg7094aql8asnsxa5783.png)

>Note : If you have `flex-direction: column | column-reverse` then `justify-content` and `align-items` align items in Y and X axis respectively. 

>All properties above are for parent element. Now, let's talk about item's property.

vi) `flex-grow` : As the name suggests `flex-grow` is used to increase or grow item's width in proportion to occupy the space.

![Frame 6 (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vs74vcb2fwuukj9fid6.png)

vii) `flex-shrink` : Yes, you guessed right. This property aim is opposite to `flex-grow`. It shrinks or decrease the width of item in proportions to occupy the space.

![Frame 7 (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h31qniw74ffrp4lkwitz.png)

viii) `flex-basis` : This defines the default size of an element before distributing the space among items. You can give fixed lengths like(100px, 20rem) or you can use `auto` value. `auto` means take value from `width and height` property.

![Frame 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjktopsmd8jzr5o1b60l.png)

xi) `flex` : This is a shorthand for `flex grow, flex shrink and flex basis`. 
```CSS
flex: <flex-grow> <flex-shrink> flex-basis>;
```

x) `align-self` : This property allow to align item individually. You can set different align position for each item.

![Frame 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhbmzijiqvzbzlwjhmt0.png)

So, that's it about flex box. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

#Articles you may found Useful
1. [CSS Positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)

And if you want to improve your webdev skills. You can watch tutorial on [Disney+ clone](https://youtu.be/ZeY9RicS2js) clone by me. If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1">Subscribe</a>], [<a href="https://www.instagram.com/modern_web_channel/">Instagram</a>]

Thanks For reading.