Вирівнювання за допомогою флексбоксів

9 червня 2022 р.197

Вирівнювання є великою частиною флексбоксів. Крім звичайних властивостей вирівнювання в CSS, є властивості, які були спеціально розроблені для флексбоксів. Однак у міру розвитку специфікації стало ясно, що різні властивості вирівнювання, розроблені спеціально для флексбоксів, також можна застосовувати і до інших моделей. Таким чином, було створено новий модуль CSS, спеціально призначений для вирівнювання блоків усередині їх контейнерів при використанні блокової верстки, верстки таблиць, верстки флексами та версти сітками.

Ось основні властивості цієї специфікації, пов'язані з флексбоксами.

Властивість align-items

Властивість align-items вказує значення align-self за промовчанням для всіх флекс-елементів, що беруть участь у контексті форматування флекс-контейнера.

<!doctype html>
<title>Приклад</title> <style> .wrapper { display: flex; align-items: center; background-color: beige; height: 100vh; } 
.wrapper > div { padding: 20px; font-size: 4vw; color: white; } 
.red { background: orangered; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; } 
body { margin: 0; }
</style> <div class="wrapper"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>

У цьому прикладі ми застосовуємо align-items: center до флекс-контейнера, тому всі флекс-елементи вирівнюються по центру осі блоку.

Оскільки це налаштування по замовчуванням, будь-який з флекс-елементів може перевизначити вирівнювання за допомогою властивості align-self.

Властивість align-self

Властивість align-self вирівнює блок усередині блоку, що містить його, вздовж осі блоку, осі колонки або перехресної осі.

<!doctype html>
<title>Приклад</title> <style> .wrapper { display: flex; align-items: center; background-color: beige; height: 100vh; } 
.wrapper > div { padding: 20px; font-size: 4vw; color: white; } 
.red { background: orangered; align-self: flex-start; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; align-self: flex-end; } 
body { margin: 0; }
</style> <div class="wrapper"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>

Тут у червоного флекс-елемента встановлено значення flex-start, а у синього значення flex-end. Це переміщає червоний елемент на початок, а синій — на кінець. Однак ми не встановили значення зеленого елемента. Тому він використовує значення за промовчанням, яке в даному випадку встановлюється як center за допомогою align-items для флекс-контейнера.

Властивість justify-content

Властивість justify-content вирівнює весь вміст флекс-контейнера по головній осі. p>

У цьому прикладі ми використовуємо значення space-between, що призводить до однакового проміжку між елементами, кожен з яких вирівняний щодо свого краю.

<!doctype html>
<title>Приклад</title> <style> .wrapper { display: flex; justify-content: space-between; background-color: beige; height: 100vh; } 
.wrapper > div { padding: 20px; font-size: 4vw; color: white; } 
.red { background: orangered; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; } 
body { margin: 0; }
</style> <div class="wrapper"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>

Властивість align-content

Властивість align-content схожа на justify-content, за винятком того, що align-content вирівнює вздовж поперечної осі.

<!doctype html>
<title>Приклад</title> <style> .wrapper { display: flex; flex-wrap: wrap; align-content: space-between; background-color: beige; height: 100vh; } 
.wrapper > div { padding: 10px; width: 60%; font-size: 4vw; color: white; } 
.red { background: orangered; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; } 
body { margin: 0; }
</style> <div class="wrapper"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>

Властивість place-content

Властивість place-content є скороченням для justify-content та align-content.

<!doctype html>
<title>Приклад</title> <style> .wrapper { display: flex; flex-wrap: wrap; place-content: space-between center; background-color: beige; height: 100vh; } 
.wrapper > div { padding: 10px; width: 60%; font-size: 4vw; color: white; } 
.red { background: orangered; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; } 
body { margin: 0; }
</style> <div class="wrapper"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>

margin

Ви можете використовувати margin для флекс-елементів. Ось приклад застосування margin: auto до флекс-елементу, навіть після того, як він був вирівняний за допомогою інших властивостей вирівнювання.

<!doctype html>
<title>Приклад</title> <style> .wrapper { display: flex; align-items: center; justify-content: center; background-color: beige; height: 100vh; } 
.wrapper > div { padding: 20px; font-size: 4vw; color: white; } 
.red { background: orangered; align-self: flex-start; margin: auto; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; align-self: flex-end; } 
body { margin: 0; }
</style> <div class="wrapper"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>