CSS Academy · Lección

Justify-Content y Align-Items

Distribuya los elementos en los ejes principal y transversal mediante justify-content y align-items.

Justify-Content y Align-Items es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

Dos propiedades de alineación clave

Las dos propiedades de alineación de flex más utilizadas son:

justify-content — alinea los elementos a lo largo del eje principal
align-items — alinea los elementos a lo largo del eje transversal

justify-content: flex-start

flex-start (predeterminado) agrupa los elementos hacia el inicio del eje principal. En la dirección row, los elementos se alinean a la izquierda.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

Centra los elementos a lo largo del eje principal. Es la técnica clásica para centrar horizontalmente con Flexbox.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Agrupa los elementos hacia el final del eje principal (el lado derecho en la dirección row).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Distribuye los elementos con el mismo espacio entre ellos. El primer elemento queda al inicio y el último, al final; no hay espacio en los bordes.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Coloca el mismo espacio alrededor de cada elemento. Los elementos de los bordes reciben la mitad del espacio de los espacios interiores. Visualmente, los bordes tienen la mitad de relleno que el espacio entre los elementos.

justify-content: space-evenly

Todos los espacios, incluidos los de los bordes, son iguales. A diferencia de space-around, el relleno de los bordes es igual a los espacios entre los elementos.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (Predeterminado)

stretch (predeterminado) hace que todos los elementos flex llenen el tamaño transversal del contenedor. En un contenedor en fila, todos los elementos adquieren la misma altura.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Centra los elementos en el eje transversal. En un contenedor en fila, los centra verticalmente. Es la solución clásica para el centrado vertical.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start y flex-end

flex-start alinea los elementos con el borde inicial del eje transversal (la parte superior en una fila). flex-end los alinea con el borde final del eje transversal (la parte inferior en una fila).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Alinea los elementos para que coincidan sus líneas base de texto. Resulta útil cuando los elementos tienen distintos tamaños de fuente, pero deben verse alineados.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Comprobación rápida

¿Qué combinación centra perfectamente un elemento flex tanto horizontal como verticalmente dentro de su contenedor?

Resumen

justify-content distribuye los elementos a lo largo del eje principal con valores como flex-start, center y space-between. align-items coloca los elementos en el eje transversal con stretch, center y flex-start. Juntas, estas propiedades controlan la alineación en ambos ejes.

Preguntas frecuentes

¿La lección «Justify-Content y Align-Items» es gratis?

Sí — el texto completo de «Justify-Content y Align-Items» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Justify-Content y Align-Items»?

Distribuya los elementos en los ejes principal y transversal mediante justify-content y align-items. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Justify-Content y Align-Items»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a CSS Academy