# Easy Positioning with CSS Flexbox..!!!

## CSS Flexbox, What is it?
Flexbox is a 1-D layout method for arranging items in rows or columns. Items expand to fill additional space or shrink to fit into smaller containers. Here we are going to discuss most of the things flexbox offers. 

Flexbox offers the same set of things provided by CSS positioning but in a much more straightforward, flexible way. The main thing we keep in mind when using the flexbox is the container and its children.

Let's dive in

### FlexBox Properties


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659347251494/2-Kt0cI_W.png align="left")

This is without the flex property. 
```css
 .container{
    gap: 10px;
    display: flex;
}
```

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

By default, the flex-direction is row so all the elements inside the container are aligned in a row.

We can also add values to the `flex-direction` property
```css
.container{
    gap: 10px;
    display: flex;
    flex-direction: column-reverse;
}
```

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

`flex-direction` has 4 property values we can use. What `flex-direction` does is, it changes the axis according to the property value we assign.


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

This is an image from MDN docs that gives us a better understanding of the axis.  When we used `flex-direction: column-reverse` the main axis became from `bottom-to-top` and the direction matters for the upcoming property we will be exploring. The 4 values for `flex-direction` are given below:
- `column`:  This value places the flex items vertically, from top to bottom.
- `column-reverse`:  This value places the flex items vertically but from bottom to top.
- `row`:  This value places the flex items horizontally,  from left to right.
- `row-reverse`:  This value places the flex items horizontally but from right to left

### Flex-wrap

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659349066127/2okpmjexN.png align="left")

This happens when we have too many items clumped up together, to solve this issue we have `flex-wrap` because by default the flex items try to shrink and stay in the row/column so we need to add additional property to remove that skewed look.

```css
.container{
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid red;
}
```


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659349173102/h_V-r8HCh.png align="left")

`flex-wrap` has 3 property value
- `wrap` :  This will be wrap flex items in multiple lines from top to bottom
- `no-wrap` :  This property doe not affect the row in any manner
- `wrap-reverse`: This property is similar to `row-reverse` where it wraps the items but in reverse order that is bottom to top

### flex-flow
Now that you have learned about the two properties, lets combine them with `flex-flow`
This property is combination of `flex-direction` and `flex-wrap` and the generic syntax would be `flex-flow: flex-direction flex-wrap`
```css
.container{
  flex-flow: row-reverse wrap
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659349920805/0zkAQcXQL.png align="left")

### justify-content

This is one of the property which is affected by the `flex-direction`. This property aligns the items along the main axis which is decided by the `flex-direction`. For simplicity we will be using `flex-direction: row`.

`justify-content: flex-start`


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

`justify-content: flex-end`


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

`justify-content: space-between`

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


`justify-content: space-around`


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

`justify-content: space-evenly`


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659351310156/U-wTIXDGp.png align="left")

### align-content

This property displaces the items according to `cross-axis`. We have taken a `flex-direction: row` so in the upcoming examples the displacement will occur in y-axis.

`align-content: flex-start`

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

`align-content: flex-end`

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

`align-content: center`


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

`align-content: stretch`


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

### align-items

This property aligns the flex lines. It defines how the flex items should distribute vertically on the current line.  It is for items in a single row. Major difference between `align-items` and `align-content` is that `align-content doesn't interfere with items in a row but with rows itself.  

- `stretch`:  Flex items are stretched to take up the leftover space.
- `flex-start/start/self-start`:  Flex items are placed at the start of the vertical or cross axis.  
- `flex-end/end/self-end`:  Flex items are placed at the end of the vertical or cross axis.  
- `center`:  Flex items are placed in the center along with the cross or vertical axis.
- `baselines`:  Flex items are aligned such as their baselines align.

### Other Propeties

`Order`: This property decides the order in which elements are positioned. by default the elements have a order of 0. So, if we want to bring something to front we can assign it a lower value like `order:-1` or if we want to push something to the end we can assign it a higher value.
```css
.blacklogo{
order:-1
}
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659352975853/3dtwto1fAy.png align="left")
```css
.redlogo{
order: 6
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659353068947/61-LOPAqa.png align="left")
In the above examples we pushed the red logo at the last by give it a higher enough value. And brought the black logo in the front by applying it an lower enough value

`align-self`: It can be used to override the align-items by applying it to an individual element.