За допомогою властивостей justify-self і justify-items можна контролювати вирівнювання елементів, сітки по осі рядка. Властивість justify-self вирівнює вміст одного елемента, а justify-items – всіх елементів в сітці.
justify-self
Вирівнює поточний елемент відносно вертикальної осі. Не успадковується. Застосовується до: вмісту всередині окремого елемента. Значення за замовчуванням: auto.
- start Вирівнює вміст по лівій частині області.
- end Вирівнює вміст по правій частині області.
- center Вирівнює вміст по центру області.
- stretch Заповнює всю ширину області (за замовчуванням).
Щоб вирівняти відразу всі елементи в контейнері, слід використовувати його властивість justify-items
align-self
Вирівнює поточний елемент відносно горизонтальної осі.
Вміст можна також вирівнювати по осі колонки. З допомогою align-self це можна робити для одного елемента сітки, за допомогою align-items – для всіх.
center — вирівнює елемент по центру зони
stretch — розтягує елемент по вертикалі на все вільне місце (значення за умовчуванням)
justify-content і align-content
Як і з попередніми властивостями, по осі рядка сітку можна вирівняти за допомогою justify-content, а по осі стовпця за допомогою align-content.
Обидва властивості застосовуються до контейнера сітки і крім звичайних значень start, end, center і stretch приймають space-around, space between і space-evenly.
space-around робить рівні відступи між треками сітки і половину інтервалу між зовнішніми краями сітки і контейнером;
- space between робить рівні відступи між треками сітки і прибирає відстань між зовнішніми краями сітки і контейнером;
- space-evenly робить рівні відступи між треками сітки, а також між зовнішніми краями сітки і контейнером.
Обидва властивості justify-content та align-content за замовчуванням задані в start. Елементи сітки в демо нижче вирівняні за допомогою наступного CSS коду:
.container {
justify-content: space-around;
align-content: space-evenly;
}