align-selfВластивість є суб-властивість модуля Flexible Box Layout.
Це дозволяє замінити align-itemsзначення для конкретних елементів гнучкості.
align-selfПриймає ті ж значення , 5 в якості align-items:
flex-start: край поля поперечного старту розміщується на лінії перехресного стартуflex-end: поперечний край поля елемента розміщений на поперечному рядкуcenter: елемент центрований по поперечній осіbaseline: елементи вирівняні, як вирівняно їх базову лініюstretch(за замовчуванням): розтягніть для заповнення контейнера (все ще дотримуйтесь мінімальної ширини / максимальної ширини)
Синтаксис
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Демо
Наступна демонстрація демонструє, як елемент може вирівнюватися в гнучкому контейнері залежно від align-selfзначення:
- Для першого елемента встановлено значення
flex-start - Для другого елемента встановлено значення
flex-end - Для третього елемента встановлено значення
center - Для четвертого елемента встановлено значення
baseline - Для 5-го пункту встановлено значення
stretch
Дивіться демонстрацію вирівнювання саморучки Pen від CSS-Tricks (@ css-tricks) на CodePen.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Для отримання додаткової інформації про змішування синтаксисів, щоб отримати найкращу підтримку браузера, зверніться до цієї статті (CSS-хитрощі) або цієї статті (DevOpera).