¿Que es FlexBox?

Flexbox (o Flexible Box Layout) es una herramienta de CSS que te ayuda a organizar elementos en una página web de forma flexible y ordenada, como si fueran piezas de un rompecabezas que se ajustan automáticamente. Imagina que tienes una caja llena de objetos (como bloques de Lego) y quieres que se alineen en una fila, columna, o que se distribuyan equitativamente sin mucho esfuerzo. ¡Eso hace Flexbox! Flexbox es ideal para:

• Alinear elementos horizontal o verticalmente.
• Hacer que los elementos se ajusten al espacio disponible.
• Crear diseños que se vean bien en pantallas grandes y pequeñas.

¿Cómo funciona flexbox?

Flexbox trabaja con dos partes principales:

• Contenedor flexible: (<div> u otro elemento con display: flex;): Es la caja que contiene los elementos.
• Elementos hijos (los elementos dentro del contenedor): Son los objetos que Flexbox organiza.

Para usar Flexbox, aplicas la propiedad display: flex; al contenedor, y luego usas otras propiedades para controlar cómo se distribuyen los hijos.

Propiedades principales de Flexbox

1. Propiedad del contenedor: display
   Activa Flexbox en el contenedor. Valor: flex: (organiza los hijos en filas o columnas).

   .contenedor {
       display: flex;
   }

2. Propiedad del contenedor: flex-direction
   Define si los elementos se alinean en una fila (horizontal) o columna (vertical).
   Valores:
   • row: Fila (de izquierda a derecha, predeterminado).
   • column: Columna (de arriba abajo).
   • row-reverse: Fila, pero al revés..
   • row-reverse: Columna, pero al revés.

   .contenedor {
       display: flex;
       flex-direction: column;
   }

3. Propiedad del contenedor: justify-content
   Controla cómo se distribuyen los elementos a lo largo del eje principal (horizontal si es fila, vertical si es columna).
   Valores:
   • start: Elementos al inicio.
   • end: Elementos al final.
   • center: Elementos centrados.
   • space-between: Espacio igual entre elementos.
   • space-around: Espacio alrededor de cada elemento.
   • space-evenly: Espacio alrededor y entre los elementos.

   .contenedor {
       display: flex;
       justify-content: center;
   }

4. Propiedad del contenedor: align-items
   Alinea los elementos en el eje secundario (vertical si es fila, horizontal si es columna). Para utilizar esta instrucción, debemos definir si o si el alto de la página con height
   Valores:
   • start: Arriba (o izquierda en columna).
   • end: Abajo (o derecha).
   • center: Centrado.
   • stretch: Estira los elementos para llenar el espacio (predeterminado).

   .contenedor {
       display: flex;
       align-items: end;
   }