Saltar de línea y crecer en CSS

Dejar que los elementos flex pasen a nuevas líneas y cómo reparten el espacio sobrante.

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
}

.chips > * {
  flex: 0 1 auto;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cards > .card {
  flex: 1 1 16rem;
}

Cómo funciona

1. flex-wrap: wrap permite más de una línea.
2. flex: 1 1 12rem crece, se encoge y parte de una base sensata.
3. align-content espacia las líneas cuando ya hay varias.

Palabras clave y builtins usados aquí

• display
• flex
• gap
• rem

El intento, en números

Líneas

20

Caracteres a escribir

206

Tokens

64

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 48 segundos.

Escribe este fragmento

Paso 3 de 6 en Flexbox; paso 3 de 24 en Flexbox y grid.

← Anterior Siguiente →