.align
Activa el contexto flex del grupo.
Align
Align reúne los helpers de composición flex del sistema: dirección, alineación, distribución y comportamiento de agrupación.
Qué resuelve este módulo
El módulo Align resuelve la composición horizontal y vertical de grupos de elementos usando flexbox. Su objetivo no es construir layout completo, sino organizar conjuntos de elementos dentro de una misma fila o columna.
Aquí viven los helpers para alinear, distribuir, cambiar dirección, activar wrap y construir agrupaciones consistentes sin recurrir a reglas ad hoc dentro del proyecto.
Clases principales
.align-row / .align-col
Define dirección horizontal o vertical.
.justify-*
Controla la distribución en el eje principal.
.items-*
Controla la alineación en el eje cruzado.
.wrap / .nowrap
Define si el grupo puede partirse en varias líneas.
.gap-*
Se combina con align para separar elementos sin márgenes manuales.
Ejemplo básico
Item 01
Item 02
Item 03
<div class="align justify-between items-center gap-2 wrap">
<span>Item 01</span>
<span>Item 02</span>
<span>Item 03</span>
</div>Dirección del grupo
A
B
C
<div class="align align-row gap-2 wrap">...</div>
A
B
C
<div class="align align-col gap-2">...</div>Distribución horizontal
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Alineación vertical
A
B
C
A
B
C
A
B
C
Uso responsive
Align puede combinarse con variantes responsive para cambiar la dirección o la distribución según el viewport.
<div class="align align-col md:align-row justify-between items-center gap-2">
...
</div>Casos de uso comunes
Header
Logo, navegación y botón de menú.
Grupo de botones
CTAs alineados con gap uniforme.
Metadatos
Autor, fecha, categoría o estado en una misma línea.
Toolbars
Acciones rápidas o filtros en dashboard.
Qué no debe resolver align
- No debe sustituir el módulo de layout.
- No debe usarse para construir columnas complejas cuando ya existe grid.
- No debe reemplazar spacing con márgenes manuales entre hijos.
- No debe mezclarse con soluciones específicas del proyecto dentro del framework.
Errores comunes
Usarlo como layout completo
Align organiza grupos, pero no reemplaza containers, grid o proportions.
No usar gap
Si el grupo necesita separación, debe resolverse con gap y no con márgenes dispersos.
Forzar una fila en móvil
Muchos grupos necesitan cambiar a columna en pantallas pequeñas.
Confundir justify con items
Uno trabaja sobre el eje principal y el otro sobre el eje cruzado.
Siguiente paso
Continúa con width para revisar los helpers de ancho y lectura del sistema.