DEV Community

Cover image for Simple guide of Flexbox in Real Life🔥
Kevin Coto🚀💡
Kevin Coto🚀💡

Posted on • Edited on

6 2

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:
alt text


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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (2)

Collapse
 
zahirinatzuke profile image
Yohan González

muy útil es post, sigue así. 💪👍

Collapse
 
kevincoto profile image
Kevin Coto🚀💡

Gracias por el comentario positivo, un abrazo, me encantaría leer posts sobre PHP, voy a seguirlo y esperar que hable sobre el tema, un saludo.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more