CSS
Revisa el modelo común de alineación en Flexbox y Grid mediante justify, align, place, self y gap sobre los ejes disponibles.
CSS Box Alignment unifica propiedades para alinear items y distribuir espacio en Grid, Flexbox y otros contextos.
.container {
display: grid;
place-items: center;
}justify-* → inline/main axis según contexto
align-* → block/cross axis según contextoNo memorices “horizontal” y “vertical”: los ejes cambian con writing mode y flex-direction.
.grid {
justify-items: stretch;
align-items: center;
}Alinea items dentro de sus grid areas.
.grid {
justify-content: center;
align-content: start;
}Alinea el conjunto de tracks cuando la grid ocupa menos que el container.
.item {
justify-self: end;
align-self: center;
}Sobrescribe la alineación del item.
En Flexbox, justify-self normalmente no aplica porque el main-axis distribution pertenece al container; usa auto margins u otra estrategia.
place-items: center start;
place-content: start space-between;
place-self: center;El primer valor corresponde a align y el segundo a justify. Si hay uno, se reutiliza según la shorthand.
stretch expande el auto size dentro del espacio disponible. Min/max constraints y intrinsic sizes pueden limitarlo.
.form-row {
display: grid;
grid-template-columns: 10rem 1fr;
align-items: baseline;
}Alinea contenido textual según baselines, útil con labels y controles.
justify-content: safe center;Safe evita una alineación que provoque pérdida de contenido por overflow cuando el algoritmo lo permite.
.container {
gap: 1rem 2rem;
}Primer valor row gap; segundo column gap.
Gap funciona en Grid, Flexbox y multicolumn, pero el significado de cada eje depende del layout.
Los porcentajes pueden resolverse de forma diferente durante intrinsic sizing y layout final. Evita depender de ellos cuando necesitas una medida estable.
En Flexbox:
.actions__secondary {
margin-inline-end: auto;
}Auto margin absorbe espacio antes de justify-content y puede separar grupos.
¿Por qué align-content puede no cambiar una flex row?
Porque necesita múltiples flex lines y espacio sobrante en cross axis; con una sola línea no hay conjunto de líneas que distribuir.
Multicolumn, floats y shapes cubre layout editorial y flujo alrededor de contenido.