Fundamentos de flexbox en CSS

Un contenedor flex convierte a sus hijos en una fila que puedes controlar.

.toolbar {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Cómo funciona

1. display: flex acomoda a los hijos sobre el eje principal.
2. gap los espacia sin márgenes en los hijos.
3. flex-direction cambia el eje principal a vertical.

Palabras clave y builtins usados aquí

• display
• gap
• rem

El intento, en números

Líneas

12

Caracteres a escribir

145

Tokens

38

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

Siguiente →