Flex Your Design Skills With Flexbox 💪
Tags: css, design
Published: 2020-04-09 15:21:37

#Flexbox

Flexbox *(Flexible Box Layout Module)*  is a a trendy way to make your design flexible without the need of using tricky positioning tricks or float.

##Why Flexbox

Flexbox is ideal for times where you need to **re-order elements on certain circumstances, or if you want to scale your elements vertically, horizontically or if you want to align your elements**.

##Terminology

To use the flexbox you will first need to know about 2 core elements:

- The **flex container** which is the outter element embracing all other elements.
- The **flex item** which are the elements inside of the flex-container

##Flexbox rules

###Order

To change the order of the elements that you got inside the flex container you will need to use **order: <number>**. Elements with the same number will be positioned as they would have been positioned by default. Lower numbers than other numbers are positioned to the left if we have a row orientation and to the top if we got a column orientation. We will analyze these further down below.

{% codepen https://codepen.io/thanasismpalatsoukas/pen/jObOBEP %}

###Flex-grow

**Flex-grow** is used to specify which elements will take up more space
inside the container than other elements. **By default the flex-grow value is 0** which means that the elements will not take up the remaining space of the flex container. *Let's take an example where we got 3 elements and all got flex-grow: 1*. All elements will take up the same remaining space of the flex-container, but if one element has flex-grow: 2 it will take twice as much remaining space as its other siblings.

{% codepen https://codepen.io/thanasismpalatsoukas/pen/OJyJpMY %}

###Flex-direction

Flex direction comes in handy when you want to **reverse the order of your flex items** or if you want to **totally change their orienation from a row to a column**. To do that you can select one of the following option:

```
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
```

{% codepen https://codepen.io/thanasismpalatsoukas/pen/BaoaWKX %}

###Flex wrap

You may be wondering at that point *"What if i got items inside a flex-container and i want to have more than one row for my items?"*. Well flex-wrap got us covered as you can do exactly that by using: ```flex-wrap: wrap``` or ```flex-wrap: wrap-reverse```This will make elements that need some space to go to a new row so that they aren't squished together.

{% codepen https://codepen.io/thanasismpalatsoukas/pen/LYpYWWr %}

###Flex shrink

Although flex-shrink looks a lot like flex-grow *(They are very close cousins)*, they do sligtly differeny things. While flex-grow let's elements take up the remaining space of the flex container flex-shrink **let's items with higher flex-shrink numbers sacrifise more of their own personal space to give it to other siblings around**. Flex shrink truly is the *good guy* here.

{% codepen https://codepen.io/thanasismpalatsoukas/pen/oNjNWVx %}

##Conclusion:

Flexbox is a great tool for making a robust layout. It can be best used with:

- Scalling horizontically.
- Scalling vertically.
- Re ordering elements.
- Flexible designs.

Hope to see you here on part 2 😃