El modelo de caja flexible, comúnmente conocido como Flexbox, es un estándar de diseño unidimensional en CSS que permite distribuir el espacio entre los elementos de una interfaz y mejorar sus capacidades de alineación, incluso cuando el tamaño de los elementos es dinámico o desconocido.

Fundamentos del Contenedor Flex

Para activar este modelo, es necesario definir un contenedor padre con la propiedad display: flex o display: inline-flex. Los elementos que se encuentran directamente dentro de este contenedor se convierten automáticamente en "flex items" (elementos flexibles).

1. flex-direction

Esta propiedda establece el eje principal del contenedor, determinadno la dirección en la que se despliegan los elementos hijos.

.contenedor-dinamico {
 /* Opciones: row | row-reverse | column | column-reverse */
 flex-direction: row; 
}

• row: Orientación horizontal de izquierda a derecha (por defecto).
• row-reverse: Horizontal, pero con el origen a la derecha.
• column: Orientación vertical de arriba hacia abajo.
• column-reverse: Vertical, comenzando desde la base.

2. flex-wrap

Define si los elementos deben mantenerse en una sola línea o pueden saltar a nuevas líneas si el espacio es insuficiente.

.zona-flexible {
 /* Opciones: nowrap | wrap | wrap-reverse */
 flex-wrap: wrap;
}

3. flex-flow

Es un atajo (shorthand) que combina flex-direction y flex-wrap en una sola declaración.

.mi-layout {
 flex-flow: column wrap;
}

4. justify-content

Controla la alineación de los elementos a lo largo del eje principal (main axis).

.barra-navegacion {
 /* Opciones: flex-start | flex-end | center | space-between | space-around | space-evenly */
 justify-content: space-between;
}

• center: Los elementos se agrupan en el centro.
• space-between: El primer elemento queda al inicio y el último al final, distribuyendo el espacio restante proporcionalmente.
• space-around: Distribuye el espacio de modo que cada elemento tenga el mismo margen a sus lados.

5. align-items

Gestiona la alineación de los elementos en el eje transversal (cross axis) de la línea actual.

.seccion-centrada {
 /* Opciones: flex-start | flex-end | center | baseline | stretch */
 align-items: center;
}

6. align-content

Se utiliza cuando existen múltiples líneas de elementos (gracias a flex-wrap: wrap). Alinea las líneas dentro del contenedor, de forma similar a como justify-content alinea los elementos individuales.

Propiedades de los Elementos Hijos (Flex Items)

Además de las reglas del contenedor, podemos aplicar estilos específicos a cada elemento individual para personalizar su comportamiento.

1. order

Altera el orden de aparición visual de un elemento sin modificar el HTML. El valor por defecto es 0.

.item-prioritario {
 order: -1; /* Aparecerá antes que los demás */
}

2. flex-grow

Especifica el factor de crecimiento de un elemento. Determina qué parte del espacio libre disponible en el contenedor debe asignarse a ese elemento.

.columna-principal {
 flex-grow: 2; /* Crecerá el doble que otros elementos con valor 1 */
}

3. flex-shrink

Indica la capacidad de un elemento para reducir su tamaño cuando el contenedor es más pequeño que la suma de sus hijos. Un valor de 0 evita que el elemento se encoja.

4. flex-basis

Define el tamaño inicial de un elemento antes de que se distribuya el espacio restante. Puede ser un valor en píxeles, porcentaje o auto.

5. flex (Atajo)

Es la forma recomendada para declarar flex-grow, flex-shrink y flex-basis simultáneamente.

.tarjeta-producto {
 /* grow | shrink | basis */
 flex: 1 0 200px;
}

6. align-self

Permite a un elemento individual anular la alineación definida por align-items en el padre.

.boton-inferior {
 align-self: flex-end;
}