La propiedad abreviada flex en CSS

Crecer, encoger y base, y los tres valores que vale la pena memorizar.

.sidebar {
  flex: 0 0 16rem;
}

.content {
  flex: 1 1 0;
  min-width: 0;
}

.icon {
  flex: 0 0 1.5rem;
}

.spacer {
  flex: 1 1 auto;
}

Cómo funciona

1. flex: 1 significa crecer por igual e ignorar el ancho del contenido.
2. flex: 0 0 auto se niega a crecer o encogerse.
3. flex-basis le gana a width en un elemento flex.

Palabras clave y builtins usados aquí

• flex
• rem

El intento, en números

Líneas

16

Caracteres a escribir

128

Tokens

46

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →