Зміст:
Align-self – це CSS-властивість, яка дозволяє перевизначати значення, задане властивістю align-items для окремого елемента всередині гнучкого контейнера. Це дозволяє точно контролювати позиціонування елемента по вертикалі усередині контейнера.
За допомогою властивості align-self можна задати позицію елемента в стовпці контейнера, варіюючи між його колишнім положенням (по вертикалі), за умовчанням заданою властивістю align-items, і вирівнюванням за іншими певними значеннями (flex-start, flex-end, center, baseline та stretch), які визначають його вертикальне вирівнювання.
Ця властивість підходить для використання в ситуаціях, коли потрібно підправити вертикальне позиціонування окремого елемента всередині гнучкого контейнера. Наприклад, ви можете використовувати align-self, щоб вирівняти елементи по центру вертикально або витягнути їх на всю висоту контейнера.
| Flex-елемент | Значення align-self | Результат |
|---|---|---|
| flex-start | flex-start | Елемент вирівнюється по верхньому краю контейнера |
| flex-start | flex-end | Елемент вирівнюється по нижньому краю контейнера |
| center | flex-start | Елемент вирівнюється вертикальним центром контейнера |
| center | flex-end | Елемент вирівнюється по верхньому краю контейнера |
| flex-end | flex-start | Елемент вирівнюється по нижньому краю контейнера |
| flex-end | flex-end | Елемент вирівнюється по нижньому краю контейнера |
| stretch | flex-start | Елемент розтягується по всій висоті контейнера |
| stretch | flex-end | Елемент розтягується по всій висоті контейнера |
Що робить Align-Self?
Властивість CSS align-self вирівнює flex-елементи по поточній flex-лінії, перевизначаючи значення властивості align-items . Якщо у будь-якого flex-елемента margin у поперечній осі виставлений в auto, то align-self ігнорується.
Чим відрізняється align-items від Align-Self?
У чому відмінність align-items від align-self? Я так зрозумів різницю тільки в тому, що перший вирівнює по осі перпендикулярному контейнеру, а другий вирівнює по поперечній осі.
Що робить align?
Властивість align-items задає вирівнювання елементів уздовж поперечної осі для flex блоків і вертикальної осі для гридів. Застосовується до батьківського елемента.
У чому різниця між Align-Items та align-content?
Відмінність align-content від align-items align-items вирівнює елементи всередині флекс-контейнера, а align-content – ряди. За замовчуванням у align-content значення stretch – тобто ряди флекс-елементів розтягуються, і вільний простір ділиться між ними навпіл.