Hasta ahora has estilizado elementos uno por uno. Cambias colores, ajustas tamaños, retocas márgenes. Todo va bien... hasta que llega la pregunta que separa la calma del sufrimiento eterno:
¿Cómo coloco varios elementos uno al lado del otro sin pelearme con CSS durante dos horas?
Durante años, la respuesta fue una mezcla de float, inline-block, tablas usadas para cosas que no eran tablas y un montón de trucos que solo entendía la persona que los escribió (y solo durante quince minutos).
La respuesta moderna y civilizada se llama Flexbox.
Flexbox es un sistema de layout pensado para distribuir elementos dentro de un contenedor. Su superpoder es repartir el espacio disponible de forma inteligente entre los hijos, sin que tengas que calcular medidas a mano ni rezar para que encajen.
Cuando activas Flexbox en un elemento padre, sus hijos dejan de comportarse como bloques sueltos y empiezan a obedecer las reglas del contenedor: pueden ponerse en fila, separarse de forma uniforme, centrarse, estirarse o encogerse según el espacio disponible.
Todo empieza con una sola línea:
Eso convierte al elemento .contenedor en un contenedor flex, también llamado flex container.
Antes de poner display: flex, los div se apilan uno debajo de otro como ladrillos. Es lo natural de los elementos de bloque.
En cuanto activas Flexbox, ocurren tres cosas a la vez:
De repente, alinear y repartir espacio deja de ser una ceremonia oscura.
Esto es lo más importante que vas a leer sobre Flexbox, y mucha gente lo olvida en su primera semana:
No aplicas display: flex a cada item. Lo aplicas una sola vez al contenedor que los agrupa, y los hijos cambian su comportamiento automáticamente. Es como encender la luz de una habitación: no enciendes cada objeto, enciendes el espacio donde están todos.
Si alguna vez ves que "Flexbox no funciona", la pregunta correcta casi siempre es: ¿le puse display: flex al padre, no al hijo?
Flexbox no sustituye todo CSS, pero brilla en escenarios cotidianos como:
Para layouts más complejos con filas y columnas a la vez, en unas lecciones veremos su hermano mayor: Grid.
Convierte .contenedor en un contenedor flexible usando display: flex. Observa cómo los tres .item que están dentro pasan de estar apilados a colocarse uno al lado del otro automáticamente.
Acabas de abrir la puerta al layout moderno...