align-self
Выравнивает один элемент поперёк главной оси, перекрывая `align-items` контейнера.
Синтаксис
align-self: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| auto | keyword | Берёт значение `align-items` контейнера (по умолчанию). |
| center | flex-start | flex-end | keyword | Как те же значения `align-items`. |
| stretch | keyword | Растягивается поперёк строки. |
Примеры
Каждый элемент выровнен по-своему:
<style>
.row { display: flex; gap: 6px; height: 100px; background: whitesmoke; }
.row div { padding: 6px; background: khaki; }
</style>
<div class="row">
<div>stretch</div>
<div style="align-self: flex-start;">start</div>
<div style="align-self: center;">center</div>
<div style="align-self: flex-end;">end</div>
</div>Примечания
В grid есть ещё justify-self — он выравнивает один элемент по горизонтали внутри его ячейки. Во flexbox justify-self не работает — вместо него используйте margin-left: auto.
См. также
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
- order — Меняет видимый порядок flex- или grid-элемента.
- justify-items — Выравнивает элементы сетки по горизонтали внутри их ячеек.
В учебнике
- Flex-элементы — Как управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.