This content originally appeared on DEV Community and was authored by Kevin Coto??
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??
This content originally appeared on DEV Community and was authored by Kevin Coto??
Kevin Coto?? | Sciencx (2021-05-17T23:15:40+00:00) Simple guide of Flexbox in Real Life?. Retrieved from https://www.scien.cx/2021/05/17/simple-guide-of-flexbox-in-real-life%f0%9f%94%a5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.