El modelo de diseño Flexbox en CSS está compuesto por dos componentes principales: el contenedor (padre) y los elementos flexibles (hijos). La orientación de los elementos se define mediante el eje principal (main axis) y el eje transversal (cross axis), los cuales cambian de posición dependiendo de la configuración directional.
Configuración del Contenedor Flex
Para activar Flexbox, se utiliza la propiedad display: flex; o display: inline-flex;. Las propiedades aplicadas al contenedor controlan la distribución general de los hijos.
Dirección de los ejes (flex-direction)
Establece cómo se disponen los elementos a lo largo del eje principal:
row: Orden horizontal de izquierda a derecha (predeterminado).row-reverse: Orden horizontal de derecha a izquierda.column: Apilamiento vertical de arriba hacia abajo.column-reverse: Apilamiento vertical de abajo hacia arriba.
Alineación en el eje principal (justify-content)
Distribuye el espacio libre a lo largo del eje principal. Es crucial saber qué eje es el principal según el flex-direction establecido:
flex-start: Agrupa los elementos al inicio del contenedor (predeterminado).flex-end: Agrupa los elementos al final del contenedor.center: Centra el bloque de elementos.space-between: Distribuye el espacio uniformemente entre los elementos, sin espacio en los bordes.space-around: Espacio equidistante entre elementos, incluyendo la mitad de ese espacio en los bordes del contenedor.
Control de desbordamiento y multilínea (flex-wrap)
Por defecto, Flexbox intenta comprimir los elementos para que quepan en una sola línea. Si se permite el salto de línea, el comportamiento cambia:
nowrap: Mantiene todo en una sola línea, reduciendo el tamaño de los hijos si es necesario (predeterminado).wrap: Permite que los elementos pasen a la siguiente línea cuando no caben.wrap-reverse: Los elementos saltan de línea en orden inverso.
Al usar wrap junto con justify-content: space-around, la última línea incompleta puede lucir desalineada rsepecto a las anteriores. Una alineación a la izquierda (flex-start) suele ser más predecible visualmente en estos casos, aunque pueda dejar un espacio libre al final.
Alineación en el eje transversal (align-items y align-content)
align-items controla la alineación de los elementos en una sola línea a lo largo del eje transversal. La propiedad stretch (predeterminada) expande los elementos para llenar el contenedor, pero requiere que los hijos no tengan una altura o anchura fija definida para que el efecto sea visible.
flex-start: Alinea al inicio del eje transversal.flex-end: Alinea al final del eje transversal.center: Centra los elementos en el eje transversal.stretch: Rellena el espacio disponible del contenedor.baseline: Alinea las líneas base del texto de los elementos.
align-content distribuye el espacio entre múltiples líneas. Solo tiene efecto si flex-wrap está activado y hay espacio sobrante en el eje transversal.
flex-start: Líneas agrupadas al inicio.flex-end: Líneas agrupadas al final.center: Líneas centradas.space-between/space-around: Distribuyen el espacio entre líneas, similar a justify-content.stretch: Las líneas se expanden para cubrir el contenedor.
Atajo de dirección y ajuste (flex-flow)
Combina flex-direction y flex-wrap en una sola declaración para simplificar el código.
.contenedor-principal {
/* Equivalente a flex-direction: column; flex-wrap: wrap; */
flex-flow: column wrap;
}
Propiedades de los Elementos Hijos
Los elementos individuales dentro del contenedor flex pueden ser ajustados de manera independiente para alterar su comportamiento respecto al resto.
Reparto de espacio (flex)
Define cómo se reparte el espacio disponible entre los elementos. Si se asigna un valor numérico (por ejemplo, flex: 1) a varios hijos sin dimensiones fijas, estos se repartirán el espacio equitativamente. Aumentar el valor numérico aumenta la proporción de espacio extra asignado a ese eelmento específico.
Alineación individual (align-self)
Permite sobrescribir la alineación del eje transversal establecida por align-items en el contenedor padre para un elemento específico. Su valor predeterminado es auto, el cual hereda la configuración del padre. Los valores disponibles son los mismos que align-items.
.caja-destacada {
align-self: center; /* Ignora el align-items del contenedor */
}
Orden visual (order)
Modifica el orden de aparición de los elementos en pantalla sin alterar la estructura del DOM. Todos los elementos tienen un order de 0 por defecto. Asignar números negativos los mueve hacia el inicio, y números positiovs hacia el final. A diferencia de z-index, esta propiedad controla el orden en el flujo del documento, no la superposición en profundidad.
.elemento-prioritario {
order: -1; /* Aparece primero visualmente */
}