¿Para qué se utiliza Flexbox?

Flexbox se utiliza para crear diseños flexibles y adaptativos en CSS. Permite alinear y distribuir fácilmente los elementos dentro del contenedor, ajustando automáticamente sus tamaños y posiciones según el espacio disponible.

Conceptos básicos de Flexbox:

• Contenedor Flex: Elemento al que se le aplica display: flex; o display: inline-flex;. Contiene los elementos flex.
• Elementos Flex: Hijos directos del contenedor flex.

Flexbox permite controlar:

• La dirección de disposición de los elementos (flex-direction).
• La transferencia de elementos a la siguiente línea/columna (flex-wrap).
• La alineación de los elementos a lo largo del eje principal (justify-content).
• La alineación de los elementos a lo largo del eje transversal (align-items para elementos individuales y align-content para varias filas/columnas).
• El orden de visualización de los elementos (order).
• La distribución del espacio libre entre los elementos (flex-grow, flex-shrink, flex-basis).

Ejemplo de uso básico:

.contenedor {
  display: flex;
  justify-content: center; /* Alineación centrada horizontalmente */
  align-items: center; /* Alineación centrada verticalmente */
}

.elemento {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="contenedor">
  <div class="elemento"></div>
  <div class="elemento"></div>
  <div class="elemento"></div>
</div>