Para saber más: guía Flexbox

La "Guía Completa de Flexbox" de CSS-Tricks es un recurso exhaustivo que explica en detalle el modelo de diseño flexible en CSS, conocido como Flexbox. Este modelo permite distribuir y alinear elementos dentro de un contenedor de manera eficiente, adaptándose a diferentes tamaños de pantalla y dispositivos.

Contenido principal de la guía:

1. Antecedentes y Terminología Básica: Se introduce el concepto de Flexbox y se explican términos clave como "contenedor flexible" (flex container), "ítems flexibles" (flex items), "eje principal" (main axis) y "eje transversal" (cross axis).

2. Propiedades del Contenedor (Elemento Padre): Se detallan propiedades aplicables al contenedor flexible, incluyendo:

   • display: Define un contenedor como flex o inline-flex.
   • flex-direction: Establece la dirección del eje principal (por ejemplo, fila o columna).
   • flex-wrap: Determina si los ítems flexibles se ajustan en una sola línea o pueden envolver a múltiples líneas.
   • justify-content: Alinea los ítems a lo largo del eje principal.
   • align-items: Alinea los ítems a lo largo del eje transversal.
   • align-content: Alinea las líneas de ítems flexibles cuando hay espacio adicional en el eje transversal.

3. Propiedades de los Ítems Flexibles (Elementos Hijos): Se describen propiedades que afectan a los ítems dentro del contenedor, tales como:

   • order: Controla el orden de aparición de los ítems.
   • flex-grow: Define la capacidad de un ítem para crecer si es necesario.
   • flex-shrink: Establece la capacidad de un ítem para encogerse si es necesario.
   • flex-basis: Especifica el tamaño inicial de un ítem antes de distribuir el espacio restante.
   • align-self: Permite alinear un ítem individual de manera diferente al resto en el eje transversal.

4. Ejemplos y Patrones Comunes: La guía proporciona ejemplos prácticos y patrones de diseño comunes que se pueden lograr con Flexbox, como la creación de menús de navegación, galerías de imágenes y estructuras de página adaptables.

5. Compatibilidad entre Navegadores: Se incluye una tabla de compatibilidad que muestra el soporte de Flexbox en diferentes navegadores y versiones, ayudando a los desarrolladores a entender en qué entornos su código será efectivo.