¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un módulo de CSS diseñado para crear diseños complejos y adaptativos. Permite gestionar la disposición, alineación y distribución del espacio entre los elementos del contenedor, incluso si sus tamaños son desconocidos o dinámicos.

Conceptos básicos de Flexbox:

• Eje principal (main axis): Eje en el que se colocan los elementos. Por defecto, horizontal (de izquierda a derecha).
• Eje transversal (cross axis): Eje perpendicular al eje principal. Por defecto, vertical (de arriba hacia abajo).
• Contenedor (flex container): Elemento en el que se aplican las propiedades de Flexbox (display: flex o display: inline-flex).
• Elementos (flex items): Elementos hijos del contenedor.

Propiedades para el contenedor Flex:

• display: flex o inline-flex
• flex-direction: Define la dirección del eje principal (row, row-reverse, column, column-reverse)
• flex-wrap: Define si los elementos se envuelven en una nueva línea (nowrap, wrap, wrap-reverse)
• justify-content: Alineación de los elementos a lo largo del eje principal (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Alineación de los elementos a lo largo del eje transversal (flex-start, flex-end, center, baseline, stretch)
• align-content: Alineación de las líneas o columnas a lo largo del eje transversal en un contenedor de varias líneas (flex-start, flex-end, center, space-between, space-around, stretch)

Propiedades para los elementos Flex:

• order: Define el orden del elemento en el contenedor
• flex-grow: Define cuánto debe crecer el elemento para ocupar el espacio disponible
• flex-shrink: Define cuánto debe encogerse el elemento si no hay suficiente espacio
• flex-basis: Define el tamaño inicial del elemento antes de distribuir el espacio
• flex: Propiedad abreviada para flex-grow, flex-shrink y flex-basis
• align-self: Sobrescribe la alineación del elemento a lo largo del eje transversal (flex-start, flex-end, center, baseline, stretch, auto)

Ejemplo de uso:

/* Contenedor */
.container {
  display: flex; /* Activa flexbox */
  flex-direction: row; /* Los elementos en fila */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  height: 200px; /* Altura del contenedor */
  border: 1px solid black;
}

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

Flexbox simplifica mucho la creación de diseños adaptativos en comparación con métodos tradicionales (float, inline-block, table).