📦~Flexbox~📦 {"Java","HTML","CSS"}
Tags: beginners, webdev, css, frontend
Published: 2023-07-23 00:32:37

<img width="100%" style="width:100%" src="https://gifdb.com/images/high/let-s-go-let-s-do-this-dwight-schrute-781hy0bq8jb4kr64.gif">


Just like the name 'Flex'~'Box', **Flexibility** in the given **Box(flex container)** .

I think it's a self explanatory word, to provide us with the flexibility in our layout and make it more responsive. 
The main purpose of this post is to get familiarized with the **main properties** of Flexbox. There are many more out there to explore but that will be a little bit too much if I go through all of them.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExajVydGE0dThvbGkxdzJtcmJxZWpwazVodTd4bm1qODAxbXVzN2Z0YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/DR1WJs5BlozM20aKzr/giphy.gif">

Once you master it, I think the rest of the properties are just as easy as it gets.

**5 Most basic properties** of Flexbox, that is what we are going to dive into...

To make this happen, firstly we need to let the container apply its default value to distribute their children on its own including size and space between them.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdjd3NzY3enhvZXJ1bzB0M2Mya2txcHhza3hlMGY0MjJ4b25kZjV2OCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/6w7om6Tz73sbAIifEM/giphy.gif">

**_No.☝🏼-display:flex_**

The default value of Flexbox is the block property of the children elements. 
Here is the 3 span flex items; with its **default value(Display:Block)**

**Block VS Flex:**
<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZzBqbHZzamRrZjF3ZW9zYnlxcnY4YjFqcW5sa2pocWF3cGV4Z2N4aiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7KuKAgdc3PTwQP2wy1/giphy.gif">

Did you notice the effect of Display:Flex?
By simply applying Display:Flex, elements expanded to their available space in the container. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ftxmfx832o5zileh0bx.png)

_**No.✌🏼-flex:direction**_

A Flexbox container has two axes: Main Axis & Cross Axis

By default, elements are arranged along the main axis, from left to right. This is why the elements are laid horizontally once display:flex has been applied and on the other hand flex:direction rotates the main axis.
  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3ce7n6fst0vzukfpcr5.png)

This property is used to change the direction of the elements. The default value is set to **row** and additional value can be set to row-reverse, column, column-reverse.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t550hrmx9lnj4g00bvf.png)

**Row VS Column:**
<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWIxZ3k3dGk4M3h6MGI1dG0zYTRsdjk0dHI4OTNidTVnc2lkcTVtaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gfY6v3xx0acXkqvGWq/giphy.gif">



Here the main axis moved from a horizontal to a vertical position.

Now let's reverse the elements 🔄
There are two options for that: row:reverse & column:reverse

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/628wr2y7qr8lnyw7u1x0.png)
<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWYwNnJsN3NjbnpyYThwd2drdnczaGtrOXk4dGxmdzN3NzV5NmZxbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dgV7v42wOkAt5rA5Yr/giphy.gif">

**_No.❸-Justify Content_**

For this property 'main axis' is the playground, all the movement is around the main axis only.
The default value for this is flex-start and additional values are flex-end, flex-center, space-between, space-around, and space-evenly.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWh3dXZmcmxqNGtkZ2duZTBrZWJpZjJxM3YzaXUycjRlOHBoN2w3biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/edlCLkzc2fwO0voM3S/giphy.gif">

**_No.4️⃣ Align Items:_**

Align items is comparable to justify-content but it operates along the cross-axis. It automatically defaults to stretch and additional values are flex-start, flex-end, center, and baseline.
Remember, the start, end, and center operate the same as justify-content but on the cross-axis. Whereas stretch makes items take entire space of the cross-axis. 
For the baseline, flexbox items align themselves at the baseline of the cross-axis. If there is a text tag on the items, then the text will be aligned to the horizontal line.    

for the centering of elements and to meet the main-axis and cross-axis intercept point. 

flex-direction:row ; justify-content:center ; align-items:center
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ly9kf96qtwvw0d03qtfg.png)
flex-direction:column ; justify-content:centre ; align-items:centre
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlfus5nbxzvgeltjej45.png)


**_No.⑤ Flex wrap:_**

To avoid overflowing the items issue this can be a cheat code, if the item's size is too big for the available space, it will overflow and that is where this code comes in handy. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x62nn5uive2ewg1adv90.png)

I was going to discuss only 5 properties but couldn't resist the temptation of sharing the fun one!
sorry..!!
<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWg2ODNkcHp2anRrZzBmemd4ZGU2NHFyMXF2dDN5M3RhdjhveW16MSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/V0pgOqWSwBRxSItnpp/giphy.gif">

and probably the most useful one.

**Align-Self**
Align-self gives freedom to **manually** manipulate any of the particular items from the multiple items.
Align-self property accepts flex-start, flex-end, center, baseline, and stretch.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smuqz2nv2yim6vvj1ktj.png)



========================================================

"You are here that means You are making a difference."

Until next time...
Happy Coding..!!


If you liked the post, pls do hit💖