Invierte en tu educación con el precio especial

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

11d

23h

13m

40s

8

Organiza fácilmente tu layout con Flexbox 😉

¿Has visto lo difícil que resulta acomodar el contenido en una página web? 🤔 ¿No crees que nuestra vida sería mejor si existiera una herramienta que nos permita hacer esto más fácil? Te tengo una excelente noticia, ¡sí existe!
.
Uno de nuestros problemas más grandes como desarrolladores web es acomodar cada elemento con CSS, esto es un trabajo difícil si usamos únicamente display: block y display: inline-block.
.
La forma de acomodar elementos antes con CSS se basaba únicamente en esas reglas, un poco de tablas y el uso de una propiedad extraña llamada float: left donde rogábamos que nada se rompiera 😩.

Entonces, ¿cómo puedo acomodar elementos fácilmente?

Afortunadamente, CSS ha sido bueno con nosotros y nos regaló una hermosa herramienta llamada Flexbox. Dicha herramienta nos permite acomodar elementos dentro de nuestras páginas de una forma muy fácil que casi parece magia, ¡incluso podemos alinear nuestros elementos verticalmente!
.
Al día de hoy existe otra herramienta maravillosa llamada CSS Grid la cual, en combinación con Flexbox, hacen un equipo increíble, sin embargo, en este tutorial nos centraremos en el funcionamiento de Flexbox para alinear elementos 😉.
.
¡Bien! Ahora que ya sabes qué es Flexbox, ¡manos al código! 🛠

¡Genial! Ahora ya sabes lo maravilloso que es Flexbox y lo mucho que nos facilita la vida, has adquirido un nuevo superpoder y ahora te resultará mucho más fácil alinear elementos en tus páginas 😉.
.
Flexbox ofrece muchas más posibilidades, aquí hemos visto lo más básico así que te invito a investigar más sobre esta herramienta, seguro que encuentras cosas muy interesantes que nos puedas compartir en los comentarios 👀. Adicionalmente, te invito a que mires mi tutorial ¡Aplica tus conocimientos de Flexbox para maquetar un sitio web! en donde estaremos maquetando un sitio web usando Flexbox, te ayudará a complementar lo aprendido aquí, ¡no te lo pierdas! 😎.
.
Estaré pendiente de los comentarios por si tienes alguna duda, recuerda que puedes aprender más cosas como estas suscribiéndote a mi canal donde estaré subiendo cosas interesantes. 💚

Enlaces relacionados

Explicación profunda de Flexbox en Mozilla Developers

Escribe tu comentario
+ 2