¿Para qué se usa flex en CSS?

Flexbox se utiliza para crear distribuciones unidimensionales de elementos en un contenedor. Permite gestionar la alineación, la distribución del espacio y el orden de los elementos.

Conceptos básicos:

• Contenedor Flex: Elemento padre al que se le asigna display: flex o display: inline-flex.
• Elementos Flex: Elementos hijos del Contenedor Flex.
• Eje Principal: Eje principal del Contenedor Flex. Se define con la propiedad flex-direction. Por defecto es horizontal (row).
• Eje Cruzado: Eje perpendicular al Eje Principal.

Propiedades clave para el Contenedor Flex:

• display: Define que el elemento es un contenedor flex (flex o inline-flex).
• flex-direction: Establece la dirección del eje principal (row, row-reverse, column, column-reverse).
• justify-content: Alinea los elementos flex a lo largo del eje principal (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Alinea los elementos flex a lo largo del eje cruzado (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Define si los elementos flex deben envolver en una nueva línea/columna cuando no hay suficiente espacio (nowrap, wrap, wrap-reverse).

Propiedades clave para los Elementos Flex:

• order: Establece el orden visual del elemento flex (por defecto 0).
• flex-grow: Define cuánto puede crecer un elemento flex en relación con otros (por defecto 0).
• flex-shrink: Define cuánto puede reducirse un elemento flex en relación con otros (por defecto 1).
• flex-basis: Establece el tamaño inicial del elemento flex antes de distribuir el espacio libre (por defecto auto).
• align-self: Sobrescribe la alineación del elemento flex a lo largo del eje cruzado para un elemento específico.

Ejemplo de uso:

.container {
  display: flex;
  justify-content: center; /* Alineación centrada a lo largo del eje principal */
  align-items: center; /* Alineación centrada a lo largo del eje cruzado */
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Esto permite centrar fácilmente los elementos, crear rejillas adaptativas y gestionar el espacio entre los elementos.