Utilidades · Layout
Alignment (alineación)
Controla texto, ejes de flex, contenido de grid y elementos individuales mediante familias explícitas y variantes responsivas.
Flex explícito
.flex-* distribuye el eje principal y .items-* controla el transversal.
Grid en dos niveles
.grid-* mueve el conjunto y .grid-items-* alinea sus elementos.
Nueve breakpoints
Las familias principales admiten variantes desde 640px hasta 6016px.
Código + resultado
Compara modos de alineación
Selecciona una composición para ver qué eje y qué conjunto de elementos modifica.
<div class="display-flex flex-start items-center">
<span>A</span><span>B</span><span>C</span>
</div>
<div class="display-flex flex-center items-center">
<span>A</span><span>B</span><span>C</span>
</div>
<div class="display-flex flex-between items-center">
<span>A</span><span>B</span><span>C</span>
</div>
<div class="display-grid grid-center grid-items-center">
<span>A</span><span>B</span><span>C</span>
</div>
<div class="display-grid place-center">
<span>A</span><span>B</span><span>C</span>
</div>
Mapa del sistema
Siete familias de alineación
Primero identifica el contexto y después decide si quieres mover el grupo completo, todos sus hijos o un único elemento.
.text-*.flex-* o .items-*.grid-*, .grid-items-* o .place-*Texto
.text-*HorizontalLas líneas de texto
- Se aplica en
- Elemento que contiene el texto
- Propiedad
text-align- Ejemplo
.text-center
Opciones: left · center · right · justify
Flex
.flex-*Eje principalEl grupo completo de hijos
- Se aplica en
- Contenedor flex
- Propiedad
justify-content- Ejemplo
.flex-between
Opciones: start · center · end · between · around · evenly
.items-*Eje transversalTodos los hijos
- Se aplica en
- Contenedor flex
- Propiedad
align-items- Ejemplo
.items-center
Opciones: start · center · end · stretch
.self-*Eje transversalUn único hijo
- Se aplica en
- Elemento hijo
- Propiedad
align-self- Ejemplo
.self-end
Opciones: start · center · end · stretch
Grid
.grid-*Ambos ejesEl conjunto de pistas
- Se aplica en
- Contenedor grid
- Propiedad
justify-content + align-content- Ejemplo
.grid-center
Opciones: start · center · end · between · around · evenly
.grid-items-*Eje de bloqueLos elementos de todas las celdas
- Se aplica en
- Contenedor grid
- Propiedad
align-items- Ejemplo
.grid-items-center
Opciones: start · center · end · stretch
.place-*Ambos ejesContenido y elementos a la vez
- Se aplica en
- Contenedor grid
- Propiedad
place-content + place-items- Ejemplo
.place-center
Opciones: start · center · end
Variantes responsivas
Nueve puntos de activación
El breakpoint se inserta entre la familia y el valor: .flex-768-center o .grid-items-1280-end.
640min-width.flex-640-center768min-width.flex-768-center1024min-width.flex-1024-center1280min-width.flex-1280-center1536min-width.flex-1536-center1920min-width.flex-1920-center2560min-width.flex-2560-center3840min-width.flex-3840-center6016min-width.flex-6016-center.place-start, .place-center y .place-end sólo existen como variantes base en el CSS actual.Referencia
Clases disponibles
Las variantes responsivas repiten los mismos valores de cada familia en los nueve breakpoints.
| Clases | Propiedad | Valores | Contexto |
|---|---|---|---|
.text-{valor} | text-align | left, center, right, justify | Cualquier bloque de texto. |
.flex-{valor} | justify-content | start, center, end, between, around, evenly | Contenedor flex. |
.items-{valor} | align-items | start, center, end, stretch | Contenedor flex. |
.self-{valor} | align-self | start, center, end, stretch | Hijo de flex o grid. |
.grid-{valor} | justify-content + align-content | start, center, end, between, around, evenly | Contenedor grid. |
.grid-items-{valor} | align-items | start, center, end, stretch | Contenedor grid. |
.place-{valor} | place-content + place-items | start, center, end | Principalmente grid. |
Recomendaciones
Buenas prácticas de alineación
Activa el layout
Una clase de alineación no cambia por sí sola el elemento a flex o grid.
Identifica el eje
En flex, usa .flex-* para el eje principal y .items-* para el transversal.
Usa self con criterio
Reserva .self-* para excepciones puntuales dentro de un conjunto alineado.
Responsive progresivo
Define primero el comportamiento móvil y sobrescríbelo sólo en los breakpoints necesarios.