🧰 Flexbox & Grid свойства выравнивания

🧰 Flexbox & Grid свойства выравнивания#

#

Flexbox#

Контейнер с display: flex:

Свойство

Ось

Описывает что-то вроде

Примеры значений

justify-content

Main-axis (основная ось: строка или колонка)

выравнивание элементов вдоль основной оси (горизонтально, если flex-direction: row)

flex-start, center, flex-end, space-between, space-around, space-evenly (MDN Web Docs)

align-items

Cross-axis (перпендикулярная основная ось)

выравнивание всех элементов по поперечной оси

stretch (по умолчанию), center, flex-start, flex-end, baseline (MDN Web Docs)

align-content

Cross-axis, когда много строк (flex-wrap)

как распределить свободное вертикальное пространство между строками

flex-start, center, flex-end, space-between, space-around, space-evenly, stretch (MDN Web Docs)

Также у элементов Flexbox можно задавать:

Свойство

Для кого

Что делает

align-self

для конкретного flex-элемента

переопределяет align-items только для этого элемента по поперечной оси

Grid#

Grid даёт больше возможностей, т.к. есть и две оси, и более точечное управление.

Свойство

Контейнер или элемент

Ось / область

Что делает

align-items

grid-контейнер

block-ось (вертикально, если пишем по-английски «block direction»)

выравнивает все элементы в клетках по вертикали (или по направлению block) внутрях их grid area (MDN Web Docs)

justify-items

контейнер

inline-ось (горизонтально)

выравнивание содержимого внутри клеток по горизонтали (MDN Web Docs)

align-self / justify-self

отдельный grid-элемент

аналогично, переопределяют align-items или justify-items для конкретной ячейки (MDN Web Docs)

justify-content

контейнер

inline-ось

выравнивание самих треков/колонок в пределах всего grid-контейнера, если grid меньше по ширине контейнера (MDN Web Docs)

align-content

контейнер

block-ось

выравнивание строк или треков внутри grid если есть лишнее пространство по высоте контейнера (MDN Web Docs)

place-items

контейнер

shorthand для align-items + justify-items (MDN Web Docs)

place-content

контейнер

shorthand для align-content + justify-content (MDN Web Docs)

🔗 Документация и статьи#

  • MDN на русском — Flexbox: выравнивание и распределение элементов “Flexbox — основы выравнивания” разделы. (MDN Web Docs)

  • MDN на русском — Grid Layout, раздел “Box-alignment in grid layout” (выравнивание элементов в сетке) (MDN Web Docs)

  • Руководство “How To Use CSS Grid Properties to Justify and Align Content and Items” на DigitalOcean — подробное, с примерами. (англ., но хороший язык, примеры наглядные) (DigitalOcean)

Contents