Пошук уроків, статей та іншого контенту
Вирівнюйте flex-елементи вздовж поперечної осі за допомогою властивості align-items.
Flex-контейнер має дві осі:
головна вісь — напрямок розташування flex-елементів;
поперечна вісь — перпендикулярний напрямок.
Напрямок головної осі визначає властивість flex-direction:
для flex-direction: row головна вісь горизонтальна, а поперечна — вертикальна;
для flex-direction: column головна вісь вертикальна, а поперечна — горизонтальна.
Властивість align-items вирівнює всі дочірні flex-елементи вздовж поперечної осі.
.container {
display: flex;
align-items: center;
}align-items потрібно задавати flex-контейнеру, а не окремим елементам.
align-itemsstretchЗначення за замовчуванням:
.container {
display: flex;
align-items: stretch;
}Елементи розтягуються вздовж поперечної осі та займають доступний простір контейнера.
Для горизонтального flex-контейнера це означає, що елементи можуть розтягуватися по висоті:
<div class="container">
<div class="item">Перший елемент</div>
<div class="item">Другий елемент</div>
</div>.container {
display: flex;
align-items: stretch;
height: 180px;
border: 2px solid #333;
}
.item {
padding: 16px;
background-color: #bde0fe;
border: 1px solid #219ebc;
}Якщо для елемента задано height, розтягування не змінить цю висоту:
.item {
height: 60px;
}flex-startЕлементи вирівнюються на початку поперечної осі:
.container {
display: flex;
align-items: flex-start;
}Для напрямку row елементи притискаються до верхнього краю контейнера.
flex-endЕлементи вирівнюються в кінці поперечної осі:
.container {
display: flex;
align-items: flex-end;
}Для напрямку row елементи притискаються до нижнього краю контейнера.
centerЕлементи розташовуються по центру поперечної осі:
.container {
display: flex;
align-items: center;
}Це зручний спосіб вирівняти вміст вертикально по центру в горизонтальному flex-контейнері.
baselineЕлементи вирівнюються за базовою лінією тексту:
.container {
display: flex;
align-items: baseline;
}Це корисно, коли поруч розташовані тексти різного розміру й потрібно вирівняти саме рядки тексту.
У наступному прикладі всі елементи мають різну висоту, але їхні центри вирівнюються по вертикалі:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>align-items</title>
<style>
.container {
display: flex;
align-items: center;
gap: 16px;
width: 500px;
height: 220px;
padding: 16px;
border: 2px solid #333;
background-color: #f1f1f1;
}
.item {
padding: 20px;
background-color: #90e0ef;
border: 2px solid #0077b6;
border-radius: 8px;
}
.item--small {
height: 30px;
}
.item--medium {
height: 70px;
}
.item--large {
height: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item--small">Малий</div>
<div class="item item--medium">Середній</div>
<div class="item item--large">Великий</div>
</div>
</body>
</html>Змініть align-items: center на інші значення й порівняйте результат:
align-items: flex-start;
align-items: flex-end;
align-items: stretch;
align-items: baseline;align-items із напрямком columnЯкщо контейнер має напрямок column, головна вісь стає вертикальною, а поперечна — горизонтальною:
.container {
display: flex;
flex-direction: column;
align-items: center;
}У цьому випадку align-items: center вирівнює елементи по горизонталі.
<div class="container">
<div class="item">Перший</div>
<div class="item">Другий</div>
<div class="item">Третій</div>
</div>.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 400px;
padding: 20px;
border: 2px solid #333;
}
.item {
padding: 12px 24px;
background-color: #caffbf;
}Тут align-items не вирівнює елементи вертикально, бо вертикальна вісь є головною. Для неї використовується justify-content.
align-items застосовується до всіх елементів контейнера. Якщо один елемент потрібно вирівняти інакше, використовуйте align-self:
.container {
display: flex;
align-items: center;
}
.item--special {
align-self: flex-start;
}У цьому прикладі всі елементи будуть по центру, крім .item--special, який буде розташований на початку поперечної осі.
<div class="cards">
<article class="card">
<h2>HTML</h2>
<p>Структура вебсторінки.</p>
<button type="button">Детальніше</button>
</article>
<article class="card">
<h2>CSS</h2>
<p>Стилізація елементів.</p>
<button type="button">Детальніше</button>
</article>
<article class="card">
<h2>Flexbox</h2>
<p>Зручне розташування елементів.</p>
<button type="button">Детальніше</button>
</article>
</div>.cards {
display: flex;
align-items: center;
gap: 20px;
min-height: 240px;
padding: 20px;
background-color: #f5f5f5;
}
.card {
width: 180px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: white;
}У цьому прикладі картки вирівнюються по центру вертикальної поперечної осі контейнера.
align-items працює лише тоді, коли батьківський елемент має display: flex або display: inline-flex.
Властивість вирівнює елементи по поперечній осі, а не завжди вертикально.
Напрямок поперечної осі залежить від flex-direction.
Для помітного ефекту контейнер часто має мати вільний простір уздовж поперечної осі.
Значення stretch може не проявитися, якщо елементи мають власну ширину або висоту.
Неправильно:
.item {
align-items: center;
}Правильно:
.container {
display: flex;
align-items: center;
}align-items вирівняє елементи горизонтальноДля контейнера з flex-direction: row:
justify-content працює вздовж горизонтальної головної осі;
align-items працює вздовж вертикальної поперечної осі.
.container {
display: flex;
justify-content: center; /* горизонтальне вирівнювання */
align-items: center; /* вертикальне вирівнювання */
}flex-direction: columnУ контейнері з напрямком column поперечна вісь горизонтальна:
.container {
display: flex;
flex-direction: column;
align-items: center; /* вирівнювання по горизонталі */
}Перевірте, чи не використовується значення stretch за замовчуванням. Якщо елементи потрібно розташувати по центру, явно задайте:
.container {
align-items: center;
}align-items вирівнює всі flex-елементи вздовж поперечної осі.
Поперечна вісь залежить від flex-direction.
Для row поперечна вісь зазвичай вертикальна.
Для column поперечна вісь зазвичай горизонтальна.
Основні значення: stretch, flex-start, flex-end, center і baseline.
align-items задається flex-контейнеру.
Для вирівнювання одного окремого елемента використовується align-self.