Пошук уроків, статей та іншого контенту
Перевизначайте індивідуальне вирівнювання окремого елемента властивістю align-self.
align-selfВластивість align-self задає вирівнювання одного flex- або grid-елемента вздовж поперечної осі.
Вона перевизначає значення align-items, задане для батьківського контейнера.
.container {
display: flex;
align-items: center;
}
.item {
align-self: flex-start;
}У цьому прикладі всі дочірні елементи центруються за поперечною віссю, але .item вирівнюється на початку цієї осі.
align-self у FlexboxНапрямок поперечної осі залежить від flex-direction:
за flex-direction: row поперечна вісь вертикальна;
за flex-direction: column поперечна вісь горизонтальна.
За замовчуванням значення flex-direction — row, тому найчастіше align-self відповідає за вертикальне вирівнювання.
.item {
align-self: flex-start;
}Елемент вирівнюється на початку поперечної осі.
.item {
align-self: flex-end;
}Елемент вирівнюється в кінці поперечної осі.
.item {
align-self: center;
}Елемент розташовується по центру поперечної осі.
.item {
align-self: stretch;
}Елемент розтягується вздовж поперечної осі, якщо для відповідного розміру не задано явне значення.
.item {
align-self: baseline;
}Елемент вирівнюється за базовою лінією тексту.
.item {
align-self: auto;
}Елемент використовує значення align-items батьківського контейнера. Це значення є типовим.
У контейнері всі картки вирівняні по центру. Остання картка має індивідуальне вирівнювання — вона притиснута до нижнього краю контейнера.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self у Flexbox</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
background: #eef2ff;
}
.cards {
display: flex;
align-items: center;
gap: 16px;
width: min(90%, 720px);
min-height: 260px;
padding: 24px;
border: 2px dashed #6366f1;
border-radius: 16px;
background: white;
}
.card {
flex: 1;
padding: 24px 16px;
border-radius: 12px;
color: white;
text-align: center;
background: #4f46e5;
}
.card--top {
align-self: flex-start;
background: #0f766e;
}
.card--bottom {
align-self: flex-end;
background: #be123c;
}
</style>
</head>
<body>
<main class="cards">
<article class="card card--top">
Верхній елемент
</article>
<article class="card">
Елемент по центру
</article>
<article class="card card--bottom">
Нижній елемент
</article>
</main>
</body>
</html>Батьківський контейнер має:
.cards {
display: flex;
align-items: center;
}Тому звичайна картка розташована по центру вертикально. Окремі картки змінюють це правило:
.card--top {
align-self: flex-start;
}
.card--bottom {
align-self: flex-end;
}align-itemsalign-items задає спільне правило для всіх дочірніх елементів:
.container {
display: flex;
align-items: center;
}align-self задає виняток для конкретного елемента:
.special-item {
align-self: flex-end;
}Якщо align-self не вказано або воно має значення auto, елемент успадковує поведінку align-items.
.container {
display: flex;
align-items: center;
}
.item {
align-self: auto;
}Тут .item також буде вирівняний по центру.
align-self і flex-direction: columnКоли головна вісь стає вертикальною, поперечна вісь стає горизонтальною:
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
align-self: flex-start;
}У цьому випадку .item переміститься до лівого краю контейнера, оскільки початок поперечної горизонтальної осі — це ліва сторона.
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
align-self: flex-end;
}Тепер елемент переміститься до правого краю.
Напрямок також залежить від властивості direction. Для звичайного документа з напрямком зліва направо flex-start відповідає лівій стороні, а flex-end — правій.
stretchstretch розтягує елемент уздовж поперечної осі, якщо його розмір у цьому напрямку не заданий явно.
.container {
display: flex;
align-items: flex-start;
height: 240px;
}
.item {
align-self: stretch;
}За напрямку row елемент розтягнеться по висоті контейнера.
Однак явна висота не дасть елементу розтягнутися:
.item {
height: 80px;
align-self: stretch;
}У такому випадку висота 80px уже задана, тому stretch не змінить її.
baselinebaseline вирівнює елементи за базовою лінією їхнього тексту. Це корисно, коли елементи мають різні розміри шрифту або містять заголовки різної висоти.
.toolbar {
display: flex;
align-items: center;
gap: 12px;
}
.toolbar__title {
align-self: baseline;
font-size: 28px;
}
.toolbar__button {
align-self: baseline;
}Кнопка й заголовок будуть вирівняні за рядком тексту, а не за геометричним центром своїх блоків.
align-self у CSS Gridalign-self також працює з елементами CSS Grid. У Grid воно вирівнює окремий елемент у межах його grid-області за вертикальною віссю.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 16px;
}
.grid__item--bottom {
align-self: end;
}Усі grid-елементи будуть вирівняні по центру своїх областей, крім .grid__item--bottom, який буде притиснутий до нижнього краю власної області.
Для Grid часто використовують коротші значення:
.item {
align-self: start;
}
.item {
align-self: end;
}
.item {
align-self: center;
}У Flexbox також можна зустріти start і end, але flex-start та flex-end чіткіше описують поведінку саме flex-елементів.
align-self відрізняється від justify-selfЦі властивості відповідають за різні напрямки:
align-self — поперечна вісь;
justify-self — головна вісь у Grid.
Для Flexbox justify-self зазвичай не використовується для вирівнювання flex-елементів. У Flexbox розподіл елементів уздовж головної осі контролює justify-content.
.container {
display: flex;
align-items: center;
}
.item {
align-self: flex-start;
}Тут align-self змінює лише поперечне вирівнювання .item, але не його положення вздовж головної осі.
align-self працюватиме у звичайному потоціВластивість працює для flex- і grid-елементів. Вона не вирівнює звичайний дочірній елемент у батьківському контейнері без display: flex або display: grid.
.container {
display: flex;
}
.item {
align-self: flex-end;
}align-self не завжди означає вертикальне вирівнювання. При flex-direction: column воно вирівнює елемент горизонтально.
Завжди спочатку визначайте напрямок flex-контейнера:
.container {
display: flex;
flex-direction: column;
}align-selfЯкщо однакове вирівнювання потрібне всім дочірнім елементам, краще використовувати align-items:
.container {
display: flex;
align-items: flex-start;
}align-self призначений для індивідуальних винятків.
stretch перезапише розмірstretch не розтягує елемент, якщо відповідний розмір задано явно:
.item {
height: 100px;
align-self: stretch;
}Щоб розтягування працювало, приберіть явну висоту або ширину, яка відповідає поперечній осі.
align-self задає індивідуальне вирівнювання одного flex- або grid-елемента.
Воно перевизначає align-items батьківського контейнера.
Основні значення: auto, flex-start, flex-end, center, stretch, baseline.
У Flexbox напрямок дії властивості залежить від flex-direction.
У Grid align-self вирівнює елемент у межах його grid-області.
Якщо правило однакове для всіх елементів, використовуйте align-items, а align-self — для окремих винятків.