Simple guide of Flexbox in Real Life🔥

Flexbox is an interesting way to make layout At least better -as I see- compared to float's and other techniques.

So, in this article I'll explain how to use flexbox in real life🔥

The first action

The first step is writing display:flex in the father container, then you should write some other lines of code using properties like flex-direction and others that I tell you about next.

Flex-Direction is so basic but it's important

This properti sets the direction in which our child elements are shown. We have these:

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 useful to order our child item through numbers ID but I've never used this property, ordering your elements correctly in the HTML is'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, assigning 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 write about the most used properties used in Real Life if I forget any, let me know in the comments.

The King of Flexbox:justify-content🤴🏽

So, let's talk about important things, this property is the King and father of the other properties, it's so important and attractive that for me it's the best property in Flexbox.

I'm going to explain to yoy how this property works, thorugh two images:




PD: Sorry, this article is just part #1, in two days I'm going to publish the second part of Flexbox in Real Life🔥📚