Tabla de contenido

Si has intentado centrar un div con CSS y terminaste con dolor de cabeza, este artículo es para ti. CSS Flexbox es el modelo de diseño que cambió para siempre la forma en que alineamos y distribuimos elementos en la web.

¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un módulo de CSS que permite distribuir el espacio entre los elementos de un contenedor y alinearlos de manera eficiente, incluso cuando su tamaño es desconocido o dinámico.

Antes de Flexbox, hacer cosas aparentemente simples como centrar un elemento vertical y horizontalmente requería trucos poco elegantes con margin: auto, position: absolute y valores negativos. Con Flexbox, todo eso se simplifica enormemente.

Activar Flexbox en un contenedor

Para activar Flexbox solo necesitas una línea de CSS en el contenedor padre:

.contenedor {
  display: flex;
}

CSS

Sí, así de sencillo. Todos los elementos hijos directos de ese contenedor se convierten automáticamente en flex items y empiezan a comportarse de forma flexible.

Dirección del eje principal

Flexbox trabaja sobre dos ejes: el eje principal y el eje cruzado. La dirección del eje principal se controla con flex-direction:

.contenedor {
  display: flex;
  flex-direction: row; /* Por defecto: izquierda a derecha */
}

CSS

Los valores posibles son:

  • row: elementos en fila de izquierda a derecha (valor por defecto)
  • row-reverse: elementos en fila de derecha a izquierda
  • column: elementos en columna de arriba hacia abajo
  • column-reverse: elementos en columna de abajo hacia arriba

Alinear elementos con justify-content

justify-content controla cómo se distribuyen los elementos a lo largo del eje principal:

.contenedor {
  display: flex;
  justify-content: center;
}

CSS

Los valores más usados son:

  • flex-start: elementos al inicio (por defecto)
  • flex-end: elementos al final
  • center: elementos centrados
  • space-between: espacio igual entre elementos, sin espacio en los extremos
  • space-around: espacio igual alrededor de cada elemento
  • space-evenly: espacio exactamente igual entre todos los elementos y los extremos

Alinear elementos con align-items

align-items controla la alineación en el eje cruzado (perpendicular al eje principal):

.contenedor {
  display: flex;
  align-items: center;
}

CSS

Los valores más usados son:

  • stretch: los elementos se estiran para ocupar todo el eje cruzado (por defecto)
  • flex-start: elementos al inicio del eje cruzado
  • flex-end: elementos al final del eje cruzado
  • center: elementos centrados en el eje cruzado
  • baseline: elementos alineados por su línea de texto base

Propiedades para los hijos

Además de las propiedades del contenedor, los flex items (hijos) también tienen sus propias propiedades:

.item {
  flex-grow: 1;
}

CSS

La forma más común de usarlos es con la propiedad abreviada flex:

.item {
  flex: 1; /* equivale a flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

CSS

align-self: Permite sobreescribir el align-items del contenedor solo para ese elemento:

.item-especial {
  align-self: flex-end;
}

CSS

Ejemplo práctico: barra de navegación

Uno de los usos más comunes de Flexbox es construir barras de navegación. Aquí un ejemplo completo:

<!-- HTML -->
<nav class="navbar">
  <div class="logo">8devmx</div>
  <ul class="menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">Cursos</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

HTML

/* CSS */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #0a0a0f;
}

.menu {
  display: flex;
  gap: 2rem;
  list-style: none;
}

CSS

Con apenas unas pocas líneas logramos que el logo quede a la izquierda y el menú a la derecha, perfectamente centrados de forma vertical.

Flexbox es una de las herramientas más poderosas y más usadas en el desarrollo frontend moderno. Una vez que lo dominas, verás que el posicionamiento en CSS deja de ser un dolor de cabeza.