Simple guide of Flexbox in Real Life

Flexbox is an interesting way of layout web, at least more interesting that float's and other techniques.

So, in this article I explain to you how use flexbox in real life

The first action

The first action what you should do, it's writing display:flex in the father container, then you should writing some other lines of code using properties like flex-direction and others that now I will tell you.

Flex-Direction is so basic but it's important

This property establish the direction in which our child elements are shown, we having:

row: this value order our child elements in rows from left to right
row-reverse: this value order our child elements in rows from right to left
column: this value order our child elements in rows from up to down
column-reverse: this value order our child elements in rows from down to top

Small mention to the order property

So, this property is so useful for order our child item through numbers ID but I've never used this property, with order correctly your elements in the HTML it's enough.

The grow property, this is really important

Besides being important, this property it's so useful in the Real Life()

With this property we can establish the size of our child items so easy, assign numerical values and the elements can shrink or grow according to the highest or lowest value, lowest to shrink, highest to grow.

A taste of the flexibility of flexbox

Early PD: In this article I talk about properties most used in Real Life, if I forget any, let me know in the comments.

The King of Flexbox justify-content

So, we gonna talking real important things, this property is the King and father of the other properties, it's so important and atractive that me it's the best property in Flexbox.

I gonna explication to you how works this property through two image:

PD: Sorry this article is Part #1, in two days I gonna published the second part of Flexbox in Real Life