Dominar Flexbox es fundamental para construir layouts modernos y responsivos con CSS. A través de unas pocas propiedades puedes controlar la dirección, la distribución del espacio y el orden de los elementos dentro de un contenedor, sin necesidad de cálculos manuales ni floats.
¿Cómo funciona la dirección en Flexbox?
Cuando declaras un contenedor como display: flex, automáticamente sus hijos se colocan en fila horizontal. Esa es la dirección por defecto, equivalente a escribir flex-direction: row.
Flex direction [01:30] es la propiedad que define el eje principal del contenedor:
flex-direction: row — los elementos se distribuyen de izquierda a derecha.flex-direction: column — se apilan de arriba hacia abajo.flex-direction: row-reverse — van de derecha a izquierda (3, 2, 1).flex-direction: column-reverse — se apilan de abajo hacia arriba.
Cambiar la dirección es especialmente útil en diseños responsivos donde, por ejemplo, una barra horizontal en escritorio necesita convertirse en una lista vertical en móvil.
¿Cómo se justifican los elementos con Flexbox?
La propiedad justify-content [02:28] controla la distribución de los elementos a lo largo del eje principal (horizontal en row, vertical en column).
justify-content: start — agrupa todo al inicio; es el valor por defecto.justify-content: end — empuja los elementos hacia el final del contenedor.justify-content: space-between — el primer elemento toca el borde izquierdo, el último toca el derecho, y el espacio restante se reparte equitativamente entre ellos [03:00].justify-content: space-around — cada elemento recibe el mismo margen a ambos lados, creando separación uniforme incluso en los extremos [03:28].
Estas variantes permiten distribuir tarjetas, botones o secciones sin recurrir a márgenes fijos.
¿Qué diferencia hay entre space-between y space-around?
Con space-between los extremos quedan pegados a los bordes del contenedor, mientras que con space-around hay espacio visible entre cada elemento y los bordes. La elección depende del diseño visual que necesites.
¿Cómo se alinean los elementos en el eje cruzado?
Mientras justify-content trabaja en el eje principal, align-items [04:05] opera en el eje perpendicular. Si tu dirección es row, align-items controla la posición vertical.
Para notar su efecto necesitas que el contenedor tenga más altura que su contenido; de lo contrario, no habrá espacio donde mover los elementos.
align-items: center — centra los hijos verticalmente.align-items: start — los envía hasta la parte superior.align-items: end — los coloca en la parte inferior.align-items: stretch — los estira para que ocupen toda la altura disponible [05:00].align-items: baseline — alinea los elementos según la línea base de su texto, útil cuando hay tipografías de diferentes tamaños [05:20].
¿Cuándo usar baseline en lugar de center?
Si dentro de tus elementos hay textos con tamaños distintos y quieres que las letras queden a la misma altura visual, baseline es la opción correcta. Con center los contenedores se centran como cajas, pero las líneas de texto pueden quedar desalineadas.
¿Cómo reordenar elementos con la propiedad order?
Flexbox permite alterar el orden visual sin modificar el HTML mediante la propiedad order [05:50]. Cada elemento recibe un valor numérico y se muestra de menor a mayor:
css
.elemento-a { order: 3; }
.elemento-b { order: 1; }
.elemento-c { order: 10; }
En el ejemplo de la clase, al asignar order: 1 al segundo elemento y order: 10 al tercero, el resultado visual cambia por completo respecto al orden del marcado HTML. Esto resulta muy práctico en diseño responsivo: puedes mostrar un sidebar antes del contenido principal en móvil y después en escritorio, solo cambiando el valor de order dentro de un media query.
Flexbox se ha convertido en una herramienta imprescindible para cualquier desarrollador frontend. Si ya lograste manejar dirección, justificación, alineación y orden, el siguiente paso es combinarlo con media queries para crear interfaces que se adapten a cualquier pantalla. ¿Qué propiedad de Flexbox te resulta más útil en tus proyectos?
