¿Cómo usar flexbox para maquetar elementos en la…

Flexbox (o Flexible Box Layout) es un módulo de CSS diseñado para crear diseños flexibles de elementos en un contenedor, permitiendo distribuir fácilmente el espacio y alinear los elementos, incluso cuando sus tamaños son desconocidos o cambian dinámicamente.

La concepto principal de Flexbox es el contenedor flex y sus elementos flex.

Propiedades para el contenedor flex (display: flex;):

flex-direction: Define la dirección en que se colocan los elementos flex en el contenedor (eje principal).
- row (por defecto): horizontal, de izquierda a derecha.
- row-reverse: horizontal, de derecha a izquierda.
- column: vertical, de arriba hacia abajo.
- column-reverse: vertical, de abajo hacia arriba.
flex-wrap: Define si los elementos flex se envuelven en una nueva(s) línea(s) si no caben en una sola línea.
- nowrap (por defecto): todos en una línea.
- wrap: envuelve en nuevas líneas.
- wrap-reverse: envuelve en nuevas líneas en orden inverso.
justify-content: Alinea los elementos flex a lo largo del eje principal.
- flex-start (por defecto): al principio del eje principal.
- flex-end: al final del eje principal.
- center: en el centro del eje principal.
- space-between: distribución uniforme con espacios entre los elementos.
- space-around: distribución uniforme con espacios alrededor de los elementos.
- space-evenly: distribución uniforme con espacios iguales entre y alrededor de los elementos.
align-items: Alinea los elementos flex a lo largo del eje transversal (perpendicular al principal).
- stretch (por defecto, si los elementos no tienen altura/ancho definidos): estira los elementos en altura/ancho del eje transversal.
- flex-start: al principio del eje transversal.
- flex-end: al final del eje transversal.
- center: en el centro del eje transversal.
- baseline: alineación según la línea base del texto.
align-content: Alinea las líneas de elementos flex a lo largo del eje transversal cuando hay envoltura de líneas (flex-wrap: wrap). Funciona de manera similar a justify-content pero para las líneas.
- stretch (por defecto): estira las líneas.
- flex-start: líneas al principio del eje transversal.
- flex-end: líneas al final del eje transversal.
- center: líneas en el centro del eje transversal.
- space-between: distribución uniforme de líneas con espacios entre ellas.
- space-around: distribución uniforme de líneas con espacios alrededor.
gap, row-gap, column-gap: Define los espacios entre los elementos flex (en un valor único o separados para filas y columnas).

.flex-container {
  display: flex; /* Hace que el elemento sea un contenedor flex */
  flex-direction: row; /* Los elementos se colocan en horizontal */
  flex-wrap: wrap; /* Los elementos se envuelven en una nueva línea */
  justify-content: center; /* Los elementos se alinean en el centro del eje principal */
  align-items: center; /* Los elementos se alinean en el centro del eje transversal */
  gap: 10px; /* Espacio de 10px entre los elementos flex */
}

Propiedades para los elementos flex (hijos directos del contenedor flex):

order: Define el orden en que se colocan los elementos en el contenedor (por defecto 0). Los valores menores aparecen primero.
flex-grow: Define cuánto puede crecer un elemento respecto a otros en el espacio disponible. Por defecto 0.
flex-shrink: Define cuánto puede encogerse un elemento si hay poco espacio. Por defecto 1.
flex-basis: Tamaño base del elemento antes de distribuir el espacio libre. Puede ser en px, %, rem, auto, etc. (por defecto auto).
flex: Propiedad abreviada para flex-grow, flex-shrink, flex-basis (ejemplo: flex: 1 1 0;).
align-self: Sobrescribe la alineación del elemento a lo largo del eje transversal, definida por align-items en el contenedor. Toma los mismos valores.

.flex-item {
  order: 2; /* Este elemento será el segundo, independientemente de su posición en HTML */
  flex-grow: 1; /* Este elemento ocupará el espacio restante */
  flex-shrink: 0; /* Este elemento no se encogerá */
  flex-basis: 100px; /* Tamaño base de 100px */
  align-self: flex-start; /* Alineación en el inicio del eje transversal */
}

.another-item {
  flex: 1 1 auto; /* Forma abreviada: grow: 1, shrink: 1, basis: auto */
}

Flexbox permite crear diversos diseños, desde alineaciones simples hasta estructuras más complejas y adaptativas, controlando la distribución del espacio y la alineación de los elementos dentro del contenedor.

¿Cómo usar flexbox para maquetar elementos en la página?