CSS Academy · Lección

Flex Wrap y Align-Content

Permita que los elementos flex pasen a varias líneas y alinee esas líneas mediante align-content.

Flex Wrap y Align-Content es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.

flex-wrap: nowrap (Predeterminado)

De forma predeterminada, los elementos flex no se ajustan. Si los elementos superan el ancho del contenedor, se encogen o se desbordan en lugar de pasar a una línea nueva.

flex-wrap: wrap

Con flex-wrap: wrap, los elementos que desbordan el eje principal pasan a una línea nueva (o a una columna nueva en la dirección de columna). Cada línea resultante se comporta como un pequeño contenedor flex independiente.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse ajusta los elementos en la dirección transversal opuesta: las líneas nuevas aparecen arriba (en la dirección de fila) en lugar de abajo.

Patrón de tarjetas ajustables

Un diseño clásico de tarjetas adaptables en el que las tarjetas pasan a la fila siguiente a medida que se reduce la ventana gráfica:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content para varias líneas

align-content controla el espacio entre las líneas ajustadas en el eje transversal. No tiene efecto cuando solo hay una línea. Sus valores reflejan los de justify-content.

Valores de align-content

Valores disponibles:

flex-start — agrupa las líneas hacia el inicio del eje transversal
flex-end — las agrupa hacia el final del eje transversal
center — centra las líneas
space-between — deja el mismo espacio entre las líneas
space-around — deja el mismo espacio alrededor de las líneas
stretch — las líneas se expanden para llenar el espacio (predeterminado)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items frente a align-content

Diferencia:

align-items — alinea los elementos dentro de cada línea flex
align-content — alinea las propias líneas flex dentro del contenedor

gap en Flexbox

La propiedad gap (antes grid-gap) añade un espacio uniforme entre los elementos flex sin utilizar márgenes. Funciona tanto para los espacios entre filas como para los espacios entre columnas.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Ajuste adaptable sin media queries

Permita automáticamente tantas columnas como quepan utilizando un tamaño ideal fijo. No se necesitan media queries:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Abreviatura flex-flow

flex-flow combina flex-direction y flex-wrap en una sola declaración:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Ajuste de líneas frente a Grid

Para diseños bidimensionales complejos con filas y columnas definidas, CSS Grid resulta más apropiado. El ajuste de líneas de Flexbox es más adecuado para contenido unidimensional que casualmente fluye en varias líneas.

Comprobación rápida

¿Qué propiedad alinea las propias líneas ajustadas cuando un contenedor flex tiene varias filas?

Resumen

flex-wrap: wrap permite que los elementos pasen a líneas nuevas. align-content controla el espacio entre estas líneas en un contenedor de varias líneas. Utilice gap para mantener un espaciado uniforme. Combine flex: 1 1 250px con flex-wrap para crear cuadrículas de tarjetas adaptables sin media queries.

Preguntas frecuentes

¿La lección «Flex Wrap y Align-Content» es gratis?

Sí — el texto completo de «Flex Wrap y Align-Content» 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 «Flex Wrap y Align-Content»?

Permita que los elementos flex pasen a varias líneas y alinee esas líneas mediante align-content. 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 3 de 4.

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

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