# A Complete Guide to Flexbox

### What is Flexbox?
Flexbox is a box model specification defined by w3.org
The Flexbox model allows us to layout the content of our website. 
It also helps to create a responsive website for both large screen devices and small screen devices.

Features of Flexbox - 

- No Floats.

- Responsive and Mobile Friendly.

- Positioning Child Elements is Much Easier.

- Flex Container's margin does not collapse with the margin of its contents.

- Order of Contents can be easily changed without editing the source HTML.

### Flex Box Architecture
So how does Flexbox architecture work? The Items are generally positioned along the main axis and cross axis. And, based on the flex-direction property, the position changes between rows and columns. In the flexbox, there are mainly two items: a parent container (the flex container) and the immediate children elements of the parent.

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

### Basic Properties

- `display`

- `flex-direction`

- `flex-wrap`

- `flex-flow`

- `justify-content`

- `align-items`

- `align-content`

### Without Flexbox
<iframe height="300" style="width: 100%;" scrolling="no" title="bullet list with vertical line" src="https://codepen.io/ManasRanjan/embed/XWEaMwy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/XWEaMwy">
  bullet list with vertical line</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>




### Display
First, we have the display property. It is what defines the flexbox container and it is compulsory while working with flexbox.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox" src="https://codepen.io/ManasRanjan/embed/zYWaRvx?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/zYWaRvx">
  flexbox</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>



### flex-direction
flex-direction defines the direction of the items that are to be placed in the container. we can also change the value of the flex direction depending on the design. it accepts four values - 

- row

- row-reverse

- column

- column-reverse

### flex-direction:row
It is the default value of the flex direction. It is generally placed on the main axis which is from left to right. There are no changes by default.

### flex-direction: row-reverse

in row-reverse the main axis is from right to left. as a result the items will be now placed from right to left of the container. Let's see an example below.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox2" src="https://codepen.io/ManasRanjan/embed/MWVXQyd?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/MWVXQyd">
  flexbox2</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### flex-direction: column
when we change the flex-direction to the column, the main axis changes its position from top to bottom.
Now, the items will be stacked from top to bottom.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox4" src="https://codepen.io/ManasRanjan/embed/XWEYZvp?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/XWEYZvp">
  flexbox4</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### flex-direction: column-reverse
Next, we have is column-reverse. It stacks the items in reverse order. Look at the example below. you can see that image 1 is at the bottom while image 3 is at the top.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox4" src="https://codepen.io/ManasRanjan/embed/mdxKxbz?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/mdxKxbz">
  flexbox4</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### flex-wrap
It is used to wrap the items inside the container. if the browser width is reduced, we generally lose some items for the browser width. This behavior changes with the flex-wrap property. It can accept three possible values:

- nowrap (default value)
- wrap
- wrap-reverse

### flex-wrap: nowrap
it is the default value of flex-wrap. If we set the property value to nowrap, there are no changes in the alignment. See the example below.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox5" src="https://codepen.io/ManasRanjan/embed/rNdKdaj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/rNdKdaj">
  flexbox5</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### flex-wrap: wrap
When we set the flex-wrap property to wrap and if we reduce the width of the browser, we can see that the items are automatically wrapped in the container.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox7" src="https://codepen.io/ManasRanjan/embed/xxWzWGX?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/xxWzWGX">
  flexbox7</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### flex-wrap: wrap-reverse
Here, it pushes the last item to the top instead of the bottom of the container. 

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox7" src="https://codepen.io/ManasRanjan/embed/dymKmYK?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/dymKmYK">
  flexbox7</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### flex-flow
It is the combination of flex-direction and flex-wrap. In flex-flow, the first value is for flex-direction and the second value is for flex-wrap.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox8" src="https://codepen.io/ManasRanjan/embed/GRxGxoz?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/GRxGxoz">
  flexbox8</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### justified-content
It defines the position of the flex items along the main axis. values of the justified content property are given below-
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly

### justified-content: flex-start
If we set the value to flex-start, it keeps the items at the start of the main axis which is from left to right.
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox9" src="https://codepen.io/ManasRanjan/embed/BarVrKg?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/BarVrKg">
  flexbox9</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### justified-content: flex-end
The items are placed at the end of the main axis ie. at the right of the container:
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox10" src="https://codepen.io/ManasRanjan/embed/abYKYBV?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/abYKYBV">
  flexbox10</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### justified-content: center
The flex items are aligned at the center.
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox11" src="https://codepen.io/ManasRanjan/embed/OJvEvbe?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/OJvEvbe">
  flexbox11</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 
justified-content: space-between
it helps to split extra space  evenly  and add it in between the flex items:
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox12" src="https://codepen.io/ManasRanjan/embed/JjLZLEL?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/JjLZLEL">
  flexbox12</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### justified-content: space-around
The extra space is distributed along the flex items. It also adds space before the 1st item and after the last item in the container.
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox13" src="https://codepen.io/ManasRanjan/embed/WNzyzpQ?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/WNzyzpQ">
  flexbox13</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-items
The align-items property defines how the flex items are positioned out along the cross axis ie. from top to bottom.

- align-items: stretch
- align-items: flex-start
- align-items: flex-end
- align-items: center


### align-items: stretch
The items are stretched across the whole cross axis. The cross axis is from top to bottom by default which means the items will fill up the whole space.
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox14" src="https://codepen.io/ManasRanjan/embed/xxWzmwm?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/xxWzmwm">
  flexbox14</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-items: flex-start
It is the starting point of the cross axis. The cross axis is from top to bottom which means the flexbox items will be aligned vertically from top to bottom.
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox15" src="https://codepen.io/ManasRanjan/embed/ZExRVQx?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/ZExRVQx">
  flexbox15</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-items: flex-end
It pushes the items to the end of the cross axis of the container:
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox17" src="https://codepen.io/ManasRanjan/embed/JjLZwXz?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/JjLZwXz">
  flexbox17</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-items: center:
The items are positioned at the center along the cross axis.
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox17" src="https://codepen.io/ManasRanjan/embed/RwMJERP?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/RwMJERP">
  flexbox17</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-content
It is similar to justify-content with the only difference being that it will align along the cross axis instead of the main axis. It only applies if the flex-wrap properties are present.
- align-content: stretch
- align-content: flex-start
- align-content: flex-end
- align-content: center
- align-content: space-between
- align-content: space-around

### align-content: stretch
It specifies the default position for items inside the flexible container. It has no effect on alignment.

### align-content: flex-start

It pushes the items to the start of the cross axis:
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox20" src="https://codepen.io/ManasRanjan/embed/oNqyJGv?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/oNqyJGv">
  flexbox20</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-content: flex-end

it pushes the items to the end of the cross  axis:
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox20" src="https://codepen.io/ManasRanjan/embed/YzavdLw?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/YzavdLw">
  flexbox20</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-content: center
It pushes the items to the center of the cross axis.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox21" src="https://codepen.io/ManasRanjan/embed/GRxGPBr?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/GRxGPBr">
  flexbox21</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-content: space-between
It takes all the extra space of the container and put it between the lines.

<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox22" src="https://codepen.io/ManasRanjan/embed/rNdKoZP?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/rNdKoZP">
  flexbox22</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### align-content: space-around
 This distributes the space around the lines:
<iframe height="300" style="width: 100%;" scrolling="no" title="flexbox23" src="https://codepen.io/ManasRanjan/embed/dymKwQG?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ManasRanjan/pen/dymKwQG">
  flexbox23</a> by Manas Ranjan (<a href="https://codepen.io/ManasRanjan">@ManasRanjan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

This was all about Flexbox. Thanks for reading.