Flexbox: ejes, justify/align, gap, flex-grow

Domina los dos ejes de Flexbox para alinear, centrar y distribuir tus elementos en las maquetaciones del día a día.

9 min · 3 preguntas

Barra de navegación, fila de tarjetas, formulario alineado: Flexbox es la herramienta cotidiana para la maquetación en una dimensión. Todo se basa en dos ejes: el eje principal (definido por flex-direction, horizontal por defecto) y el eje transversal, perpendicular al primero. justify-content distribuye los elementos a lo largo del eje principal; align-items los alinea en el eje transversal. Recuerda este dúo: resuelve la mayoría de los casos. Tomemos una barra de navegación clásica.

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

Unas pocas declaraciones convierten esta lista en una barra profesional: space-between empuja el logo a la izquierda y el botón a la derecha, align-items: center alinea verticalmente elementos de diferentes alturas, y gap separa los enlaces sin márgenes que gestionar.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Ejercicio mental: si cambias .navbar a flex-direction: column, ¿qué hace justify-content: space-between? Ahora distribuye los elementos verticalmente, porque el eje principal ha rotado. Esa es la trampa clásica de Flexbox: justify-content y align-items no significan "horizontal" y "vertical", sino "eje principal" y "eje transversal". Otro caso de uso imprescindible: centrar contenido a la perfección.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow distribuye el espacio libre restante entre los elementos. Caso concreto: una maquetación con una barra lateral fija y contenido que ocupa todo lo demás. flex: 0 0 240px bloquea la barra lateral (no crece ni se encoge), mientras que flex-grow: 1 deja que el contenido absorba todo el espacio disponible.

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

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. Con flex-direction: column, ¿qué controla justify-content?
   • La alineación horizontal de los elementos
   • La alineación vertical, porque el eje principal se ha vuelto vertical
   • El espaciado entre líneas de texto
2. ¿Qué combinación centra un elemento tanto horizontal como verticalmente en un contenedor flex?
   • text-align: center y vertical-align: middle
   • justify-content: center y align-items: center
   • margin: 0 auto en el contenedor
3. En un contenedor flex, .a tiene flex-grow: 2 y .b tiene flex-grow: 1. ¿Qué ocurre?
   • .a siempre es exactamente el doble de ancho que .b
   • .a recibe el doble del espacio libre restante que .b
   • .b se oculta en favor de .a