Статья "The Fundamentals of CSS Alignment" (4 сентября 2025) объясняет, как работают свойства выравнивания в Grid, Flexbox и блочном режиме — и почему больше логики, а не путаницы.
Основные тезисы:
• Есть два уровня: контейнер (content) и элемент (item). Удобные шорткаты:
place-content, place-items, place-self. • В Grid-контейнере элементы выравниваются внутри ячеек или областей, а
1fr может поглотить всё свободное пространство и заблокировать выравнивание. • В Flexbox выравнивание по горизонтали работает группой (через
justify-content). • Для абсолютных элементов (
absolute) работает только place-self. • Чтобы избежать проблем с overflow (например, недоступной областью), используйте
safe, например justify-self: safe center.Читать подробнее: https://css-tip.com/explore/alignment/