Flex Your Design Skills With Flexbox 💪

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: . 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.

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.

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;

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.

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.

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 😃