Зміст:
Align-Self – це одне з ключових правил CSS, що дозволяє контролювати вирівнювання елемента всередині контейнера з використанням flexbox.
Коли веб-розробнику потрібно розмістити елементи на сторінці, вирівнювання відіграє важливу роль у створенні естетичного та функціонального інтерфейсу. Використовуючи властивість align-self, можна точно контролювати положення елемента всередині гнучкого контейнера незалежно від інших елементів.
Align-Self дозволяє задавати вирівнювання по вертикалі кожного окремого елемента, незалежно від його батьківського контейнера. Це означає, що розробнику не потрібно створювати додаткові контейнери або використовувати складні комбінації властивостей для досягнення потрібного результату. Натомість, він може просто застосувати align-self до потрібного елемента і задати потрібне вирівнювання: зверху, по центру або знизу.
Особливо корисним це правило стає, коли є справа з адаптивним дизайном. Під час зміни розмірів екрану, елементи можуть автоматично змінювати свою позицію та розмір, і за допомогою align-self розробник може вказати, які саме елементи потрібно вирівнювати та як їх мати у своєму розпорядженні для досягнення оптимального зовнішнього вигляду.
| Для чого використовується Align-Self правило | |
|---|---|
| Align-Self | визначає, як елемент має бути розміщений усередині контейнера, який використовує Flexbox. |
| Значення | auto | flex-start flex-end центр | Baseline | stretch | initial | inherit |
| auto | елемент успадковує значення якості align-self від батька. |
| flex-start | елемент вирівнюється спочатку контейнера. |
| flex-end | елемент вирівнюється до кінця контейнера. |
| center | елемент вирівнюється центром контейнера. |
| baseline | елементи вирівнюються базової лінії контейнера. |
| stretch | елемент розтягується на висоті контейнера. |
| initial | елемент набуває значення за замовчуванням. |
| inherit | елемент успадковує значення якості align-self від батька. |
Для чого потрібна властивість Align-Self?
Властивість CSS align-self вирівнює flex-елементи по поточній flex-лінії, перевизначаючи значення властивості align-items . Якщо у будь-якого flex-елемента margin у поперечній осі виставлений в auto, то align-self ігнорується.
Яке значення за замовчуванням властивість Align-Self?
Значення за замовчуванням: auto .
Чим відрізняється align-items від Align-Self?
У чому відмінність align-items від align-self? Я так зрозумів різницю тільки в тому, що перший вирівнює по осі перпендикулярному контейнеру, а другий вирівнює по поперечній осі.
Що робить align?
Властивість align-items задає вирівнювання елементів уздовж поперечної осі для flex блоків і вертикальної осі для гридів. Застосовується до батьківського елемента.