Guía Completa de Flexbox

Qué es: Flexbox es un sistema de diseño unidimensional que permite distribuir espacio y alinear elementos dentro de un contenedor, incluso cuando sus dimensiones son desconocidas o dinámicas. El contenedor padre controla la disposición general, mientras que los elementos hijos pueden ajustarse individualmente. Este ejemplo muestra cómo crear un menú de navegación típico.

Qué es: La estructura básica de Flexbox requiere un contenedor padre y elementos hijos. El contenedor se convierte en flex container y sus hijos directos se convierten automáticamente en flex items. Esta es la base sobre la que se construyen todas las demás propiedades de Flexbox.

Qué es: La propiedad display: flex activa el contexto de formateo flex en el contenedor. Una vez aplicada, todos los hijos directos se convierten en flex items y pueden ser controlados mediante las propiedades de Flexbox. Sin esta declaración, ninguna otra propiedad de Flexbox funcionará.

Qué es: La propiedad flex-direction establece la dirección del eje principal del contenedor flex. Define si los elementos se distribuyen en filas o columnas, y en qué dirección. Esta propiedad determina cómo se comportan justify-content y align-items posteriormente.

Qué es: La propiedad flex-wrap controla si los elementos flex deben permanecer en una sola línea o pueden distribuirse en múltiples líneas cuando el espacio del contenedor es insuficiente. Esta propiedad es fundamental para crear diseños responsivos que se adapten al tamaño de la pantalla.

Qué es: La propiedad flex-flow es una forma abreviada que combina flex-direction y flex-wrap en una sola declaración. Permite establecer ambas propiedades simultáneamente, reduciendo la cantidad de código necesario y mejorando la legibilidad.

Qué es: La propiedad justify-content define cómo se distribuye el espacio libre entre los elementos a lo largo del eje principal del contenedor. Controla la alineación horizontal cuando flex-direction es row, o vertical cuando es column. Esta es una de las propiedades más utilizadas de Flexbox.

Qué es: La propiedad align-items define cómo se alinean los elementos flex en el eje transversal (perpendicular al eje principal). Controla la alineación vertical cuando flex-direction es row, o horizontal cuando es column. Esta propiedad afecta a todos los items del contenedor simultáneamente.

Qué es: La propiedad align-content controla el espacio entre las líneas de elementos flex cuando hay múltiples líneas en el contenedor. Solo tiene efecto cuando flex-wrap está activado y hay suficiente espacio vertical. A diferencia de align-items que alinea items dentro de cada línea, align-content alinea las líneas completas.

Qué es: La propiedad gap establece el espacio entre los elementos flex sin necesidad de usar márgenes. Es más limpia que aplicar margin a cada item porque el espacio solo aparece entre elementos, no en los bordes externos. Se puede usar gap para ambos ejes, o row-gap y column-gap para controlarlos individualmente.

Qué es: La propiedad order permite cambiar el orden visual de los elementos flex sin modificar el orden en el HTML. Por defecto, todos los items tienen order: 0. Los items con valores menores aparecen primero. Esta propiedad es útil para reorganizar elementos en diferentes tamaños de pantalla manteniendo el mismo HTML.

Qué es: La propiedad flex-grow define la capacidad de un elemento flex para crecer en relación con los demás items cuando hay espacio extra disponible en el contenedor. El valor es un número sin unidades que actúa como proporción. Por defecto es 0, lo que significa que los items no crecen.

Qué es: La propiedad flex-shrink define la capacidad de un elemento flex para reducirse en relación con los demás items cuando el espacio del contenedor es insuficiente. El valor es un número sin unidades que actúa como proporción. Por defecto es 1, lo que significa que todos los items se reducen proporcionalmente.

Qué es: La propiedad flex-basis define el tamaño inicial de un elemento flex antes de que se distribuya el espacio restante según flex-grow o flex-shrink. Acepta valores en píxeles, porcentajes u otras unidades. Es similar a width o height, pero respeta la dirección del flex container. El valor por defecto es auto.

Qué es: La propiedad flex es una forma abreviada que combina flex-grow, flex-shrink y flex-basis en una sola declaración. Es la forma recomendada de establecer estas propiedades porque el navegador puede calcular valores predeterminados inteligentes. El orden es: flex-grow flex-shrink flex-basis.

Qué es: La propiedad align-self permite sobrescribir la alineación establecida por align-items del contenedor para un elemento individual específico. Acepta los mismos valores que align-items y solo afecta al elemento al que se aplica. Esta propiedad es útil cuando se necesita que un item específico tenga una alineación diferente al resto.