# CSS Flexbox

Flex box is a parent property. We can align items in a container in any direction like right,left,center,bottom etc , with the help of flex box container property.
Flexbox works in two axes, the first is main axis and cross axis.



![9Oxw7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669215372509/oRjUiqpTj.png align="left")

# Flexbox Properties for the Parent

**Display:-**
When we want to apply flexbox to any container then we asinine display property to the container.

<iframe height="300" style="width: 100%;" scrolling="no" title="display" src="https://codepen.io/Ashishkumarkyp/embed/wvXmqPe?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/wvXmqPe">
  display</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

**Flex-direction:-**
By default flex-direction is row in flexbox but we have some different values also.

1.row(default)-It will align the item left to right.

2.row-reverse-It reverse all the items in row.

3.column-It align the items from top to bottom.

4.Column-reverse- It reverses the items in the column.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexDirection" src="https://codepen.io/Ashishkumarkyp/embed/jOKzLex?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/jOKzLex">
  flexDirection</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

**Flex-wrap:-**
By default all the items try to fit into one line , but you can change this with the help of flex-wrap is nowrap you should change it to the wrap and items will wrap if they didn't fit in a single line.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexWrap" src="https://codepen.io/Ashishkumarkyp/embed/rNKdzbb?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/rNKdzbb">
  flexWrap</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


**Justify-content:-**
This is the most used property in flexbox . It aligns items in a container horizontally (along the main axis) , we have many different values in it.

 1.Flex-start:-it align all the items in the start.

2.Flex-end:-it align all the items at the end.

3.Center-it horizontally center the items.

4.Space-between:-it gives the space between items.

5.Space-around:-it gives the space around the items.

6.Space-evenly:-it will distribute the space evenly among all the items.


<iframe height="300" style="width: 100%;" scrolling="no" title="justifyContent" src="https://codepen.io/Ashishkumarkyp/embed/VwdXMwm?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/VwdXMwm">
  justifyContent</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

**Align-item:-**
It is also the most used property in flexbox . It aligns the items vertically (cross axis) . we have different types of values in it.

1.Flex-start: it aligns items to the top of the container.
 
2.Flex-end: it aligns items in the bottom of the container.

3.Stretch: the item occupies all the height of the container.

4.Baseline: items are aligned such as their baseline alignment.

<iframe height="300" style="width: 100%;" scrolling="no" title="alignItem" src="https://codepen.io/Ashishkumarkyp/embed/WNyzZQg?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/WNyzZQg">
  alignItem</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

**Gap:-**
It is the shorthand of row-gap and column-gap.

<iframe height="300" style="width: 100%;" scrolling="no" title="gap" src="https://codepen.io/Ashishkumarkyp/embed/zYaWEdv?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/zYaWEdv">
  gap</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>





# Properties for the Children(flex items)

**Order:-**
It defines the order of flex items, by default the order of any item is zero.

<iframe height="300" style="width: 100%;" scrolling="no" title="order" src="https://codepen.io/Ashishkumarkyp/embed/MWXVEVg?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/MWXVEVg">
  order</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


**Flex-grow:-**
With the help of this property flex items will grow if necessary , the default value of flex-grow is 0.

<iframe height="300" style="width: 100%;" scrolling="no" title="grow" src="https://codepen.io/Ashishkumarkyp/embed/dyKmVjV?default-tab=html&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Ashishkumarkyp/pen/dyKmVjV">
  grow</a> by ashish (<a href="https://codepen.io/Ashishkumarkyp">@Ashishkumarkyp</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>