CSS Flexbox es un modelo de diseño que permite crear diseños de página más eficientes y alineados, especialmente cuando se trata de distribuir espacio entre elementos en un contenedor y alinear contenido. Flexbox es ideal para aplicaciones que requieren un diseño adaptable y flexible.

1. Contenedor Flex: El elemento padre que utiliza display: flex; para activar el modelo Flexbox.
2. Elementos Flex: Los elementos hijos directos del contenedor flex.
3. Eje Principal y Eje Secundario:
   • Eje Principal: El eje principal es el eje a lo largo del cual se colocan los elementos flex. Por defecto, es horizontal.
   • Eje Secundario: El eje perpendicular al eje principal.

1. display: Activa el modo flex en un contenedor.

   .container {
       display: flex;
   }
   

2. flex-direction: Define la dirección del eje principal.

   • row (por defecto): Los elementos se colocan de izquierda a derecha.
   • row-reverse: Los elementos se colocan de derecha a izquierda.
   • column: Los elementos se colocan de arriba a abajo.
   • column-reverse: Los elementos se colocan de abajo a arriba.

   .container {
       flex-direction: row;
   }
   

3. justify-content: Alinea los elementos a lo largo del eje principal.

   • flex-start: Alinea los elementos al inicio del contenedor.
   • flex-end: Alinea los elementos al final del contenedor.
   • center: Centra los elementos.
   • space-between: Distribuye los elementos con espacio entre ellos.
   • space-around: Distribuye los elementos con espacio alrededor de ellos.

   .container {
       justify-content: space-between;
   }
   

4. align-items: Alinea los elementos a lo largo del eje secundario.

   • flex-start: Alinea los elementos al inicio del eje secundario.
   • flex-end: Alinea los elementos al final del eje secundario.
   • center: Centra los elementos en el eje secundario.
   • baseline: Alinea los elementos según su línea base.
   • stretch: Estira los elementos para llenar el contenedor.

   .container {
       align-items: center;
   }
   

5. flex-wrap: Controla si los elementos deben ajustarse o no en una nueva línea.

   • nowrap (por defecto): Todos los elementos se colocan en una sola línea.
   • wrap: Los elementos se ajustan en múltiples líneas.
   • wrap-reverse: Los elementos se ajustan en múltiples líneas en orden inverso.

   .container {
       flex-wrap: wrap;
   }
   

1. flex-grow: Define la capacidad de un elemento para crecer si es necesario.

   .item {
       flex-grow: 1;
   }
   

2. flex-shrink: Define la capacidad de un elemento para encogerse si es necesario.

   .item {
       flex-shrink: 1;
   }
   

3. flex-basis: Define el tamaño inicial de un elemento antes de que el espacio extra se distribuya.

   .item {
       flex-basis: 100px;
   }
   

4. align-self: Permite anular la alineación del eje secundario para un elemento específico.

   .item {
       align-self: flex-end;
   }
   

Aquí tienes un ejemplo de cómo usar Flexbox para crear un diseño simple:

• Contenedor Flex: .container es el contenedor flex que utiliza display: flex;.
• Dirección del Eje: flex-direction: row; coloca los elementos en una fila.
• Justificación del Contenido: justify-content: space-around; distribuye los elementos con espacio alrededor.
• Alineación de Elementos: align-items: center; centra los elementos verticalmente.

Ejercicio: Crea un diseño de galería de imágenes utilizando Flexbox donde las imágenes se ajusten automáticamente al tamaño del contenedor.

Solución:

• Flexibilidad de los Elementos: flex: 1 1 200px; permite que cada elemento crezca y se encoja, con un tamaño base de 200px.
• Ajuste de Línea: flex-wrap: wrap; permite que los elementos se ajusten en múltiples líneas si es necesario.

Flexbox es una herramienta poderosa para crear diseños responsivos y flexibles. Al dominar las propiedades de Flexbox, puedes crear interfaces de usuario que se adapten a diferentes tamaños de pantalla y dispositivos. En el siguiente módulo, exploraremos el diseño de cuadrícula CSS, que ofrece aún más control sobre el diseño de la página.