Назад Вперед Зміст

Властивість align-self

Властивість align-self задає вирівнювання вздовж поперечної осі для окремо взятого flex-елемента. По суті, align-self — це властивість align-items, але для конкретного елемента.

align-self: stretch; align-self: stretch;

Елемент розтягується по розміру рядка контейнера вздовж поперечної осі.

align-self: flex-start; align-self: flex-start;

Елемент розташовується на початку рядка контейнера (початок поперечної осі). Для елементів сітки макета (grid-елементи) допускається використання скороченого значення start, для флекс-елементів необхідно використовувати повне значення flex-start.

align-self: flex-end; align-self: flex-end;

Елемент розташовується в кінці рядка контейнера (кінець поперечної осі). Для елементів сітки макета (grid-елементи) допускається використання скороченого значення end, для флекс-елементів необхідно використовувати повне значення flex-end.

align-self: center; align-self: center;

Елемент розташовується по центру рядка контейнера (посередині поперечної осі).

align-self: baseline; align-self: baseline;

Елемент розташовується по його базовій лінії рядка контейнера.

Приклад

Назад Вперед Зміст