Contenedor Flex CSS
La intro de Flexbox convirtió a los padres en contenedores. Esta lección se queda en el contenedor: elige el eje principal, reparte el espacio, alinea en el eje cruzado y envuelve líneas. El crecimiento del ítem (flex-grow, flex-basis) espera a Flex Items.
Kit de herramientas del contenedor flex
📊 Contenedor flex de un vistazo
| Propiedad | Trabajo diario |
|---|---|
flex-direction |
Define el eje principal: row, column o variantes reverse |
justify-content |
Distribuye ítems a lo largo del eje principal |
align-items |
Alinea ítems en el eje cruzado (una línea) |
flex-wrap |
Permite que los ítems pasen a nuevas líneas |
align-content |
Empaqueta varias líneas flex en el eje cruzado |
gap |
Separa ítems (y líneas) sin pelear con margins |
Recuerda: justify viaja por el eje principal; align por el cruzado. Cambia flex-direction a column y esos roles giran con los ejes.
flex-direction — elige el eje principal
Por defecto es row. Usa column para pilas verticales como navs laterales o grupos de formulario. Las variantes reverse voltean el orden visual — comprueba que el orden de lectura siga siendo sensato.
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — distribución en el eje principal
Reparte el espacio libre a lo largo del eje principal: flex-start, center, flex-end, space-between, space-around, space-evenly. Los headers suelen querer space-between.
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — alineación en el eje cruzado
En una sola línea, align-items controla la altura/posición vertical en una fila (o la horizontal en una columna). stretch es el valor por defecto; center es el pegamento diario de UI.
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
Wrap y align-content
Con flex-wrap: wrap, los ítems sobrantes forman nuevas líneas. align-content empaqueta esas líneas cuando hay espacio libre en el eje cruzado — hace poco si el wrap es nowrap.
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
Un hábito de contenedor tranquilo
Primero direction, luego justify, luego align-items, luego wrap si hace falta. Mantén gap para los gutters. Guarda el crecimiento por ítem para la siguiente lección — y deja las rejillas 2D de página para CSS Grid más adelante.
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Pruébalo tú
- Construye un
.stackconflex-direction: columny tres bloques. - Compara
justify-content: space-betweenvscenteren una barra ancha. - Sube
min-heighty pruebaalign-items: stretchvscenter. - Envuelve chips y mira
align-content: flex-start. - Escribe una frase: ¿qué propiedades van en ítems a continuación, no en el contenedor?
Errores comunes
- Intercambiar mentalmente justify y align tras cambiar la dirección
- Usar
row-reversesin revisar el orden de teclado/lectura - Esperar que
align-contentimporte connowrap - Poner
flex-growen el contenedor en lugar de un ítem - Pedir a las props de contenedor Flexbox un layout Grid 2D completo
Resumen
- Las props del contenedor dirigen dirección, distribución, alineación y wrap
flex-directiondefine el eje principaljustify-contentvsalign-itemssiguen principal vs cruzado- Wrap habilita paquetes multilínea;
align-contentempaqueta esas líneas - El crecimiento a nivel de ítem espera a la lección Flex Items
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior