Una barra de navegación con flex en CSS

Una barra real: marca a la izquierda, enlaces al centro, cuenta empujada a la derecha.

.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  block-size: 3.5rem;
}

.bar .brand {
  flex-shrink: 0;
  font-weight: 700;
}

.bar nav {
  display: flex;
  gap: 1rem;
  margin-inline-end: auto;
}

Cómo funciona

1. Un nav puesto en flex maneja el grupo del medio.
2. gap más un margen auto elimina la necesidad de elementos separadores.
3. flex-shrink: 0 protege la marca de quedar aplastada.

Palabras clave y builtins usados aquí

• display
• gap
• rem

El intento, en números

Líneas

17

Caracteres a escribir

193

Tokens

54

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →