Alineación en flex en CSS

Justificar sobre el eje principal, alinear sobre el eje transversal.

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.header .account {
  margin-inline-start: auto;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Cómo funciona

1. justify-content: space-between separa los extremos.
2. align-items alinea a los hijos a lo largo del eje transversal.
3. margin-inline-start: auto empuja a un hijo hasta el otro extremo.

Palabras clave y builtins usados aquí

• display
• gap
• rem
• vh

El intento, en números

Líneas

17

Caracteres a escribir

234

Tokens

52

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →