Зміст:
Сучасні CSS-властивості align-items і align-self дозволяють контролювати вирівнювання елементів усередині контейнера. Незважаючи на те, що обидві ці властивості пов'язані з вирівнюванням, у них є відмінності в термінах використання та вплив на елементи.
align-items – це властивість, яка застосовується до контейнеру і дозволяє вирівняти всі елементи всередині нього головною осі. Головна вісь може бути горизонтальною або вертикальною залежно від орієнтації контейнера. Властивість align-items має значення, такі як "flex-start", "flex-end", "center" та "stretch", які визначають положення елементів щодо головної осі контейнера.
align-self, з іншого боку, застосовується до окремим елементам усередині контейнера та дозволяє перевизначити вирівнювання, задане для всіх елементів через властивість align-items. Властивість align-self може мати ті ж значення, що і align-items, і, в основному, використовується для точкового зміни положення окремих елементів усередині контейнера.
Властивість | align-items | align-self |
---|---|---|
Опис | Встановлює вирівнювання всіх елементів контейнера головною осі. | Встановлює вирівнювання конкретного елемента головною осі. |
Застосовується до | Контейнер (наприклад, flex-контейнер або grid-контейнер). | Конкретному елементу (наприклад, flex-елементу або grid-елементу). |
Значення | flex-start, flex-end, center, baseline, stretch | auto, flex-start, flex-end, center, baseline, stretch |
Пріоритет | Високий (рівний вирівнюванню, заданому всередині елемента). | Високий (рівний вирівнюванню, заданому всередині елемента). |
успадковується | Ні | Ні |
align-self Ця властивість аналогічна align-items, має ті ж властивості і працює точно також. Єдина відмінність у тому, що там вирівнювання задається всім елементів (flex item) відразу, а тут, індивідуально кожному за елемента.
Що таке align-items?
CSS властивість align-items вирівнює flex-елементи поточної flex-лінії так само, як і justify-content , але в перпендикулярному напрямку. Докладніше та більше інформації читайте у Використання гнучких блоків CSS.
Чим align-content відрізняється від Align-Items?
Відмінність align-content від align-items align-items вирівнює елементи всередині флекс-контейнера, а align-content – ряди. За замовчуванням у align-content значення stretch – тобто ряди флекс-елементів розтягуються, і вільний простір ділиться між ними навпіл.
Що таке Align Self?
Властивість CSS align-self вирівнює flex-елементи по поточній flex-лінії, перевизначаючи значення властивості align-items . Якщо у будь-якого flex-елемента margin у поперечній осі виставлений в auto, то align-self ігнорується.
Що означає align-items Center?
Властивість align-items зі значенням center поєднає центри батька та кожного з елементів.