Why should I need to use Flexbox?

Flexbox is an easy practice to change the way my elements are displayed. During years, we have been considering how many pixels or rems should I give to display the content into the box. This is not necessary with Flexbox.

We have been measuring the width and the height of the blocks, we have been working with properties such as inline or inline-block to display the content in the box. With Flexbox this is not necessary.

Let´s see it in a clear way why Flexbox is an easy practice to display the elements into the box.

First of all, we should add a specific property to our element.

This property is display and the value is flex;

display: flex;

Once we are sure that we want to work with Flexbox, we should know that Flexbox consists of the Flex-Container and Flex-Items.

What is Flex-Container?

Flex-container is the element with the property display set to flex. The element is transformed at the same time as the property is given. This container is also called Parent and encloses one or several items.

What is Flex-Item?

The Flex-items are the elements inside the flex container. They are also called Children.

We have to make sure that Flex-items or Children must be direct children of their Parents or Flex-container properties.

flex container square happiness

Before diving into the subject, we must be clear that flex-box works on two axes.

Main axis and Cross axis.

It does not mean to be horizontal or vertical. It depends on the value of the flex-direction property we use: row or column. Flex-direction defines the main axis and therefore determines the behaviour of Flex-items.

flex-direction: row; (main axis will be horizontal)

flex-direction: column; (main axis will be vertical)

flex-direction square

Now, let´s see in a few words which properties can be applied using Flexbox:

Flex-container can support:

flex-direction: this property defines the direction of the axis along the items are placed in the flex container.

The values are:

row or column
row-reverse or column-reverse.

flex-wrap: it defines whether flex items are placed into a single line or, on the contrary, can be wrapped onto multiple lines.

The values are:

wrap or nowrap.

flex-flow: it is a shorthand property for flex-direction and flex-wrap individual properties.

justify-content: it defines how the browser can distribute the space between flex items or around items along the main axis of the container.

The values are:

start, center, space-between, space-around, space-evenly.

align-items: it defines how the browser can distribute the space between content items or around content items along the cross-axis of the container.

The values are:

stretch, center, start, end.

align-content: it is a combination of align-items and justify-content within the flex-box container.

The values are:

start, center, space-between, space-around.

Flex-items can support:

order: this property can have different values. The default value for order is 0.

flex-grow: it has an initial value=0. If we increase the value of one element, it will use the remaining space available.

flex-shrink: the default value=1. If we add value 0 to one element it will not become smaller.

flex-basis: it defines the size of one element depending on the main axis. It is not the width or the height, it can be both depending on the flex direction.

align-self: the difference with align-items is that it allows us to define the position of a single element.

flex: is a shorthand of flex-grow + flex-shrink + flex-basis (0 1 auto).