# CSS Flexbox

# What is CSS Flexbox
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

# Flexbox Properties:

## 1. flex-direction: 
It defines the direction of items placed inside the container.
By default the flex direction is set into row from left to right

**syntax:**
```
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
``` 
### 1. row
By default the flex direction is set into row i.e from ltr.

**syntax:**
```
.container{
  flex-direction: row;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/PoaRZpb]

### 2. row-reverse 
In Row reverse items are displayed from right to left.

**syntax:**
```
.container{
  flex-direction: row-reverse;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/JjZLGyQ]

### 3. column 
In column direction things are displayed from vertical line from top to bottom.

**syntax:**
```
.container{
  flex-direction: column;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/NWzYxww]

### 4. column-reverse
In column reverse the items move from bottom to top direction.

**syntax:**
```
.container{
  flex-direction: column-reverse;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/yLEKevq]

## 2. justify-content: 
This property is used to align along the main axis. It helps to distribute the items under rows or columns as per we want. It also control over the alignment of items when they overflow the line.

**syntax:**
```
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
``` 
### 1. flex-start
items are packed toward the start of the flex-direction.

**syntax:**
```
.container{
  justify-content: flex-start;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/gOKePzm]

### 2. flex-end
items are packed toward the end of the flex-direction.

**syntax:**
```
.container{
  justify-content: flex-end;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/eYKMJrb]

### 3. center
items are centered along the line

**syntax:**
```
.container{
  justify-content: center;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/QWxmyBr]

### 4. space-between
items are evenly distributed in the line; first item is on the start line, last item on the end line

**syntax:**
```
.container{
  justify-content: space-between;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/QWxmyVr]

### 5. space-around
items are evenly distributed in the line with equal space around them. 

**syntax:**
```
.container{
  justify-content: space-around;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/PoaRZyj]

### 6. space-evenly
items are distributed so that the spacing between any two items (and the space to the edges) is equal.

**syntax:**
```
.container{
  justify-content: space-evenly;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/MWXVKPZ]

## 3. align-items: 
This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container {

**syntax:**
```
.container {
  align-items: stretch | flex-start | flex-end | center | baseline ;
}
``` 
### 1. flex-start
 items are placed at the start of the cross axis.

**syntax:**
```
.container{
  align-items: flex-start;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/NWzYxeY]

### 2. flex-end
items are placed at the end of the cross axis

**syntax:**
```
.container{
  align-items: flex-end;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/LYrdGqp]

### 3. center
items are centered in the cross-axis

**syntax:**
```
.container{
  align-items: center;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/XWYEXOL]

### 4. baseline
items are aligned such as their baselines align

**syntax:**
```
.container{
  align-items: baseline;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/eYKMJXo]

### 5. stretch
stretch to fill the container (still respect min-width/max-width)

**syntax:**
```
.container{
  align-items: stretch;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/jOKzWRv]

## 4. align-content: 
This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

**syntax:**
```
.container {
  align-content: stretch | flex-start | flex-end | center | baseline ;
}
``` 
### 1. flex-start
items packed to the start of the container. 

**syntax:**
```
.container{
  align-content: flex-start;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/JjZLXjG]

### 2. flex-end
items packed to the end of the container. 

**syntax:**
```
.container{
  align-content: flex-end;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/dyKmMMN]

### 3. center
items centered in the container

**syntax:**
```
.container{
  align-content: center;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/ExREKNV]

### 4. space-around
items evenly distributed with equal space around each line

**syntax:**
```
.container{
  align-content: space-around;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/qBKoZRq]

### 5. space-between
items evenly distributed; the first line is at the start of the container while the last one is at the end

**syntax:**
```
.container{
  align-content: space-between;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/QWxmNpY]

### 6. stretch
lines stretch to take up the remaining space

**syntax:**
```
.container{
  align-content: stretch;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/WNyzwjL]

## 5. flex-wrap: 
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

**syntax:**
```
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
``` 
### 1. nowrap 
all flex items will be on one line

**syntax:**
```
.container{
  flex-wrap: nowrap;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/jOKzqLR]

### 2. wrap
flex items will wrap onto multiple lines, from top to bottom.

**syntax:**
```
.container{
   flex-wrap: wrap;
}

``` 
**Code**

%[https://codepen.io/pratik739/pen/JjZLXrb]

### 3. wrap-reverse
flex items will wrap onto multiple lines from bottom to top.

**syntax:**
```
.container{
   flex-wrap: wrap-reverse;
}

```
**Code**
 
%[https://codepen.io/pratik739/pen/PoaRNJa]