SHANUKI CSS · Flexbox — Parte 2: Control fino de cada ítem · Ciencias de la Computación

Varias líneas con align-content

Cuando un contenedor tiene flex-wrap: wrap y sus ítems ocupan más de una línea, aparece un nuevo problema: ¿cómo se reparten esas líneas dentro del contenedor? Esa es la pregunta que responde align-content.

🚀 Este es el Recurso 2 de 2 sobre Flexbox: acá profundizas el control fino de cada ítem: varias líneas, crecer, encogerse, tamaño de partida, excepciones individuales y orden. El Recurso 1 cubrió el contenedor flexible, sus dos ejes y cómo envolverlo y espaciarlo.

🧱 align-content — alinear varias líneas

Cuando hay varias líneas de ítems (gracias a flex-wrap: wrap), align-content distribuye esas líneas como grupo dentro del contenedor, a lo largo del eje transversal. Si solo hay una línea, align-content no tiene ningún efecto visible: necesita espacio sobrante en el eje transversal y más de una línea para notarse.

.contenedor {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* reparte las líneas, no los ítems */
}

Valor	Qué hace
`stretch`	Las líneas se estiran para ocupar todo el alto disponible (valor por defecto)
`flex-start`	Todas las líneas juntas al inicio
`center`	Todas las líneas juntas, centradas
`flex-end`	Todas las líneas juntas al final
`space-between`	Primera y última línea en los bordes, espacio parejo entre el resto
`space-around`	Espacio igual alrededor de cada línea

🧩 ¿Lo entendiste? · Cada valor de align-content con su efecto

1 · Arrastrar y soltar: align-content

Las líneas se estiran para llenar el alto →

Primera y última línea en los bordes →

Todas las líneas juntas, centradas →

🔍 align-content vs. align-items

Es fácil confundirlas porque las dos actúan en el eje transversal, pero cada una trabaja a una escala distinta: align-items alinea los ítems dentro de su línea; align-content alinea las líneas completas dentro del contenedor.

💡 Regla práctica: si tu contenedor tiene una sola línea de ítems, olvídate de align-content — no vas a ver ningún cambio. Se activa recién con flex-wrap: wrap y espacio sobrante para repartir entre líneas.

🔍 align-items → ítems dentro de una línea. align-content → líneas completas dentro del contenedor. Ambas necesitan espacio sobrante para notarse.

✅ Repaso rápido · Opción múltiple

2 · Opción múltiple: align-content

⚙️ Prueba align-content en vivo

Este contenedor tiene seis tarjetas con flex-wrap: wrap y suficiente alto como para que se noten varias líneas. Cambia align-content y observa cómo se reparten las líneas completas.

align-content

1

2

3

4

5

6

🎯 PRÁCTICA · Reparte una galería de varias líneas

En .galeria, agrega display: flex; y flex-wrap: wrap; para que las tarjetas ocupen varias líneas.
Agrega align-content: space-between; para que la primera y la última línea queden pegadas a los bordes.
Ejecuta y confirma que las líneas quedaron repartidas con espacio parejo entre ellas.

/ HTML

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

Crecer y encogerse

Hasta ahora alineaste ítems, pero nunca controlaste el tamaño de cada uno por separado. flex-grow y flex-shrink deciden qué ítem crece más cuando sobra espacio, y cuál se encoge más cuando falta.

📈 flex-grow — crecer para llenar el espacio

flex-grow es un número que indica cuánto "apetito" tiene un ítem por el espacio sobrante. Por defecto vale 0: ningún ítem crece. Si le pones 1 a un ítem, ese ítem absorbe todo el espacio libre.

💡 Si dos ítems tienen flex-grow: 1, se reparten el espacio sobrante en partes iguales. Si uno tiene flex-grow: 2 y el otro flex-grow: 1, el primero crece el doble que el segundo.

.tarjeta-ancha {
  flex-grow: 1; /* este ítem absorbe el espacio libre */
}

🧩 ¿Lo entendiste? · De menor a mayor apetito por el espacio

1 · Ordenar: flex-grow, de menos a más espacio absorbido

Ordena los ítems de menor a mayor cantidad de espacio sobrante que absorben.

📉 flex-shrink — encogerse cuando falta espacio

flex-shrink es el opuesto de flex-grow: decide cuánto se encoge un ítem cuando el contenedor es más chico que la suma de sus contenidos. Por defecto vale 1: todos los ítems se encogen por igual. Con 0, un ítem se niega a encogerse, sin importar cuánto falte el espacio.

.logo {
  flex-shrink: 0; /* nunca se achica, aunque falte espacio */
}

🧩 ¿Lo entendiste? · Completa flex-shrink

2 · Completar: valores de flex-shrink

/* Todos los ítems se encogen por igual (valor por defecto) */
.a { flex-shrink: ; }

/* Este ítem nunca se encoge, sin importar el espacio disponible */
.b { flex-shrink: ; }

✅ Repaso rápido

Un último repaso antes de probarlo en vivo: recuerda que flex-grow reparte el espacio sobrante, y flex-shrink reparte cuánto se resta cuando falta espacio.

📈📉 flex-grow reparte lo que sobra. flex-shrink reparte lo que falta. Los dos son números, no porcentajes ni píxeles.

✅ Repaso rápido · Opción múltiple

3 · Opción múltiple: crecer y encogerse

⚙️ Prueba grow y shrink en vivo

Ajusta el flex-grow del segundo ítem y observa cómo absorbe el espacio sobrante frente a los otros dos, que se quedan en flex-grow: 0.

flex-grow del ítem B 0

A

B

C

🎯 PRÁCTICA · Una tarjeta principal que crece

En .fila, agrega display: flex; para poner las tres columnas en fila.
En .principal, agrega flex-grow: 1; para que esa columna absorba todo el espacio sobrante.
En .icono, agrega flex-shrink: 0; para que ese ítem nunca se achique.
Ejecuta y confirma que la columna principal se estiró mientras el ícono mantuvo su tamaño.

/ HTML

<div class="fila">
  <div class="icono">🔔</div>
  <div class="principal">Contenido principal</div>
  <div class="icono">⭐</div>
</div>

Tamaño de partida: flex-basis

Antes de repartir el espacio sobrante o el que falta, cada ítem flex necesita un tamaño de partida. Esa es la tarea de flex-basis, y su combinación con grow y shrink tiene un atajo muy usado en la práctica.

📏 flex-basis — el tamaño de partida

flex-basis fija el tamaño que tiene un ítem antes de que se reparta el espacio sobrante o faltante con grow y shrink. Se parece a width, pero está pensado específicamente para ítems flex y tiene prioridad sobre width cuando los dos están presentes.

💡 Con flex-basis: auto (el valor por defecto), el ítem parte del tamaño de su propio contenido o de su width, si tiene una.

.tarjeta {
  flex-basis: 200px; /* arranca en 200px antes de crecer o encogerse */
}

🧩 ¿Lo entendiste? · Cada valor de flex-basis con su efecto

1 · Arrastrar y soltar: flex-basis

Parte del tamaño del contenido o de width →

Arranca en 0, todo el tamaño viene de flex-grow →

Arranca en un tamaño fijo en píxeles →

✂️ El atajo flex: grow shrink basis;

Como grow, shrink y basis casi siempre se declaran juntos, existe un atajo: flex. Escribe los tres valores en ese orden exacto: primero grow, después shrink, y por último basis.

.tarjeta {
  flex: 1 1 200px; /* grow: 1, shrink: 1, basis: 200px */
}

Atajo	Equivale a
`flex: 1;`	flex-grow: 1; flex-shrink: 1; flex-basis: 0;
`flex: auto;`	flex-grow: 1; flex-shrink: 1; flex-basis: auto;
`flex: none;`	flex-grow: 0; flex-shrink: 0; flex-basis: auto (ítem rígido)

🧩 ¿Lo entendiste? · El orden correcto del atajo flex

2 · Ordenar: los tres valores del atajo flex

Ordena los nombres de las propiedades en el mismo orden en que se escriben dentro del atajo flex.

✅ Repaso rápido · Opción múltiple

3 · Opción múltiple: flex-basis y el atajo

⚙️ Prueba flex-basis en vivo

Cambia el flex-basis del ítem B y observa cómo cambia su tamaño de partida, antes de que grow o shrink entren en juego.

flex-basis del ítem B

A

B

C

🎯 PRÁCTICA · Tres columnas con tamaño de partida

En .columnas, agrega display: flex; para poner las tres columnas en fila.
En .col, agrega el atajo flex: 1 1 150px; para que las tres partan de 150px y se repartan el resto por igual.
Ejecuta y confirma que las tres columnas quedaron del mismo ancho, repartiendo el espacio sobrante.

/ HTML

<div class="columnas">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

Excepciones individuales

Todas las propiedades que viste hasta ahora se escriben en el contenedor y afectan a todos los ítems por igual. align-self y order son distintas: se escriben en un ítem puntual, para que se comporte diferente al resto.

🎯 align-self — anular align-items para uno solo

align-self se escribe directo en un ítem, y anula el align-items que viene del contenedor solo para ese ítem. Acepta los mismos valores que align-items: flex-start, center, flex-end, stretch y baseline.

.contenedor {
  display: flex;
  align-items: flex-start; /* todos arriba, por defecto */
}
.destacado {
  align-self: center; /* solo este ítem se centra */
}

🧩 ¿Lo entendiste? · Completa align-self

1 · Completar: align-self

/* Este ítem se centra, aunque el resto esté arriba */
.destacado { align-self: ; }

/* Este ítem se estira para ocupar todo el alto disponible */
.ancho { align-self: ; }

🔀 order — cambiar el orden visual

order cambia en qué posición aparece un ítem, sin tocar el HTML. Por defecto todos los ítems valen order: 0 y se muestran en el orden en que aparecen en el HTML. Los valores más chicos aparecen primero; los más grandes, después.

⚠️ order solo cambia el orden visual, no el orden real del HTML. Úsalo con cuidado: puede confundir a quienes navegan con teclado o lector de pantalla, porque ellos siguen el orden del HTML.

.va-primero {
  order: -1; /* pasa antes que los que tienen order: 0 */
}

🧩 ¿Lo entendiste? · El orden visual según el valor de order

2 · Ordenar: de -1 a 2, en el orden visual en que aparecen

Ordena estos valores de order en el mismo orden en que aparecerían visualmente en pantalla.

✅ Repaso rápido · Opción múltiple

3 · Opción múltiple: align-self y order

⚙️ Prueba align-self y order en vivo

Cambia el align-self del ítem B para separarlo del resto, y su order para moverlo de posición sin tocar el HTML.

align-self del ítem B order del ítem B

A

B

C

🎯 PRÁCTICA · Destaca y reordena una tarjeta

En .fila, agrega display: flex; y align-items: flex-start; para que las tarjetas arranquen arriba.
En .vip, agrega align-self: center; para que esa tarjeta se centre sola.
En la misma clase, agrega order: -1; para que pase a mostrarse primero.
Ejecuta y confirma que la tarjeta VIP quedó centrada y al frente de las demás.

/ HTML

<div class="fila">
  <div class="tarjeta">1</div>
  <div class="tarjeta">2</div>
  <div class="tarjeta vip">VIP</div>
</div>

¡Arma un panel de precios con una tarjeta destacada! 🚀

Llegó el momento de combinar todo lo que practicaste en este recurso: varias líneas con align-content, crecer y encogerse, el tamaño de partida, y las excepciones individuales de align-self y order.

🎯 MISIÓN: El panel de precios

Vas a maquetar tres tarjetas de precios en fila, con una tarjeta destacada que se nota más que las otras. Tu panel debe tener:

Un contenedor flexible con flex-wrap: wrap; por si la pantalla es chica
Las tres tarjetas con flex: 1 1 160px; para partir del mismo tamaño
La tarjeta .destacada con flex-grow: 2; para que crezca más que las otras
La misma tarjeta con order: -1; para que se muestre primero

🛤️ Flujo de trabajo (método paso a paso)

1

🧱 Activa flexbox en .panel y permite que envuelva.

2

📏 Dale a .tarjeta un tamaño de partida con flex.

3

📈 Haz crecer más a .destacada con flex-grow.

4

🔀 Adelanta a .destacada con order.

5

📥 Ejecuta, ajusta y descarga tu panel.

💻 Tu simulador

El HTML ya está armado con todo lo que necesitas para la misión: tú pones el CSS. Tab inserta 2 espacios.

En .panel, agrega display: flex; y flex-wrap: wrap; para que las tarjetas se acomoden en fila y envuelvan si hace falta.
En .tarjeta, agrega flex: 1 1 160px; para que las tres partan del mismo tamaño.
En .destacada, agrega flex-grow: 2; para que esa tarjeta crezca el doble que las otras.
En la misma clase, agrega order: -1; para que se muestre primero.
Ejecuta, ajusta los detalles y descarga tu panel terminado.

/ HTML

<div class="panel">
  <div class="tarjeta">Básico</div>
  <div class="tarjeta destacada">Pro ⭐</div>
  <div class="tarjeta">Equipo</div>
</div>

📖 Glosario interactivo

Toca cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.