En esta cuarta clase del curso de Flexbox, aprenderemos cómo alinear todos los elementos dentro de un contenedor flex tanto en el eje horizontal como en el vertical.
Posicionar elementos en una sección de la web, siempre ha generado quebraderos de cabeza. Da igual si los queremos centrados, alineados a uno de los lados, con espacios entre ellos, o alrededor de los mismos. Nunca ha sido fácil. En estos casos, siempre terminábamos utilizando floats, márgenes, y paddings. Para lograr el efecto deseado, con resultados no demasiado profesionales en demasiadas ocasiones.
Esto con flexbox se acabó. Este módulo de CSS nos provee de un montón de propiedades que nos permitirán componen layouts horizontalmente de tal forma que queden tal y como queramos. ¡Vamos a ver cómo!
¡Ya lo tenemos! ¿Has visto la potencia de flexbox? Es espectacular. En el vídeo hemos visto todo lo que podemos hacer respecto a la organización de filas en nuestro layout.
Da igual lo que necesitemos: con flexbox no hay límites, pues siempre dispondrás de una propiedad que te ayudará a lograr aquello que necesitas,
Justificar elementos, centrarlos, conseguir espacio entre los mismos o alrededor de los mismos… ya no es ningún secreto con flexbox.
En la siguiente clase, la quinta de este curso, seguiremos viendo más propiedades de este estupendo módulo de CSS. Concretamente, aprenderemos cómo alterar el orden de nuestros ítems flex con una sola propiedad.
Recuerda que si tienes alguna duda acerca de lo explicado en esta lección, tienes a tu disposición la pestaña de soporte de la intranet. ¡Nos vemos!
Todos los capítulos de este curso:
- Curso de Flexbox #1. Introducción
- Curso de Flexbox #2. Dirección
- Curso de Flexbox #3. Filas
- Curso de Flexbox #4. Alineación
- Curso de Flexbox #5. Orden
- Curso de Flexbox #6. Tamaño
- Curso de Flexbox #7. Factor de crecimiento
- Curso de Flexbox #8. Factor de decrecimiento
- Curso de Flexbox #9. Alineación particular
- Curso de Flexbox #10. Layout con Flexbox