Tutorial: Flexbox paso a paso - alinea cajas sin sufrir

Antes de Flexbox, centrar una caja verticalmente en CSS era casi un rito de iniciación (con trucos raros de position: absolute y matemáticas de más). Ya no. Respira.

Paso 1: convierte un contenedor en flex

<div class="barra">
  <div class="logo">Mi Sitio</div>
  <div class="enlaces">Inicio | Artículos | Tutoriales</div>
</div>

.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

Con una sola línea (display: flex) tus hijos directos pasan de apilarse verticalmente a alinearse en fila. justify-content controla el eje horizontal, align-items el vertical.

Paso 2: alinea tarjetas en fila con espacio uniforme

<div class="tarjetas">
  <div class="tarjeta">HTML</div>
  <div class="tarjeta">CSS</div>
  <div class="tarjeta">JavaScript</div>
</div>

.tarjetas {
  display: flex;
  gap: 1rem;
}

.tarjeta {
  flex: 1;
  padding: 2rem;
  background: #101e27;
  border-radius: 0.5rem;
  text-align: center;
}

gap agrega espacio entre las tarjetas sin necesidad de márgenes manuales (adiós, margin-right en todos lados menos en la última tarjeta).

Paso 3: haz que se acomoden en columna en pantallas pequeñas

@media (max-width: 600px) {
  .tarjetas {
    flex-direction: column;
  }
}

Con una línea más, tus tarjetas pasan de fila a columna cuando la pantalla es angosta. Flexbox no resuelve todos tus problemas existenciales, pero sí los de alineación.

¿Qué acabas de aprender?

• Cómo activar Flexbox con display: flex.
• Cómo alinear elementos horizontal y verticalmente.
• Cómo cambiar de fila a columna según el tamaño de pantalla.