# Unravelling Flex-Box
#### Flexbox can be overwhelming but a deep understanding makes it handy for making designing web pages faster.
Imagine four elements present in a webpage. These elements are in a vertical top to bottom design in an HTML structure. As a CSS designer, everyone has trouble aligning them in a horizontal position let's say in a **Navigation Bar**.
Any page in a web browser has two axes: The main axis and a cross axis. For elements placed on the main axis, you want to shift it into a cross axis. **Difficult right?**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659717865429/bDsKiNlXQ.png align="left")
Enter, **FLEX-BOX** the new display method, that allows you to do quick work of it.
## Flex is applied on the parent container to align the child elements in the direction you want.
For example: Look at the following snippet of code.
```
Document
```
which gives out the following output...
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659718916205/xUG_dV4NS.png align="left")
[image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659718523723/fpk1CfFF2.png align="left")
To align these items on the main axis, all you need to do is apply **flex.**
```
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659718973835/136mDMi1t.png align="left")
Fairly easy. **Flex**allows you to change the directions of elements easily inside an HTML structure.
Certain facts about FLEX
Flex allows you to change the orientations of elements:
>#### 1. Flex-direction: Row;
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659719709381/grJq48skO.png align="left")
It's a default direction but anyhow if you want you can change what you want.
>#### 2. Flex-direction: Row-reverse;
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659719787716/po7479wC_.png align="left")
Allows you to reverse the positions of elements in a row but in reverse order.
>#### 3. Flex-direction: Column;
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659719842587/qywMMs2DQ.png align="left")
Allows you to place the elements in a column direction.
>#### 4. Flex-direction: Column-reverse;
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659720048317/TQnPVoNVW.png align="left")
Allows you to reverse the positions of elements in a column but in reverse order.
Explore more about flex to design websites in an interesting way. Keep learning.
