# Flexbox CSS

Flexbox is a layout mode in CSS that allows you to easily align and distribute items within a container. Let's see different CSS properties and their use.

## `display: flex;`

* As you can see in the main image of the article there are two components i.e. flex-container and flex-item. When the display property of the parent container is made flex `display: flex;` then children i.e. flex-items shrink to the size of the content inside them and form columns next to each other.
    
* When we make parents display flex, there are two axes along it. The main-axis and cross-axis. By default, the main-axis will be horizontal (left to right) and the cross-axis vertical (top to bottom). We can change the axis and direction using the `flex-direction` property.
    

## `flex-direction`

* `flex-direction: row` is the default. The parent is a row and the children(flex-items) are columns.
    
* %[https://codepen.io/rutvik007/pen/zYLKPXq?editors=1100] 
    
* `flex-direction: column;` The parent is a column and the children(flex-items) are rows.
    
* %[https://codepen.io/rutvik007/pen/YzjGYze] 
    
* similarly, try `flex-direction: row-reverse;` & `flex-direction: column-reverse;`
    
* %[https://codepen.io/rutvik007/pen/NWBRXrZ] 
    

## `flex-wrap`

* `flex-wrap: nowrap;` is the default value. This results in the shrinking of flex-items up to a width of min-content and then the overflow of flex-items outside the parent container.
    
* In the 1st example of flex-direction: row; the width of flex-items is set to 300px, but the container width is not sufficient to accommodate 4 boxes of 300px width. So flex-items are reduced in size to fit inside the container. To avoid shrinking flex items `flex-wrap: wrap;` is used.
    
* %[https://codepen.io/rutvik007/pen/LYBRejQ] 
    
* `flex-wrap: wrap-reverse;` changes the direction of the cross-axis.
    

## `flex-flow`

* shorthand to set `flex-direction` and `flex-wrap` properties.
    
* Syntax: `flex-flow: <flex-direction> <flex-wrap>;`
    
    ```xml
    flex-flow: column wrap;
    flex-flow: column wrap-reverse;
    ```
    

## `justify-content`

* This property decided the distribution of additional space available on the main-axis between the children.
    
* `justify-content: space-between;` takes additional space along the main-axis and puts it between the children.
    
* `justify-content: space-around;` takes additional space along the main-axis and puts it around the children.
    
* `justify-content: flex-start;` pushes elements to the start of main-axis
    
    `justify-content: flex-end;` pushes elements to the end of main-axis
    
    `justify-content: center;` centers all the flex-items along the main axis
    
* %[https://codepen.io/rutvik007/pen/xxJEpyY] 
    

## `align-items`

* similar to `justify-content`, `align-items` works on the cross-axis.
    
* `align-items: stretch;` is the default value that makes elements have the same size along the cross-axis.
    
* `align-items: flex-start;` all items will be aligned at the start of the cross-axis with the default size.
    
* `align-items: flex-end;` all items will be aligned at the end of the cross-axis with the default size.
    
* `align-items: center;` all items will be aligned at the center of the cross-axis with the default size.
    
* `align-items: baseline;` the first line of content inside children will be aligned on the same baseline
    

There are much more things we can do with flex by using `flex-grow`, `flex-shrink`, `flex-basis`, and `order` properties.