CSS свойство align-self
Свойство align-self устанавливает выравнивание отдельно взятого флекс-элемента внутри контейнера по высоте (по перпендикулярной оси).
CSS синтаксис
align-self: auto | stretch | center | flex-start | flex-end | baseline;
Возможные значения
| Значение | Описание |
|---|---|
| auto | Значение по умолчанию. Флекс-элемент наследует значение свойства align-items родительского элемента, либо принимает значение stretch, если у него нет родительского элемента. |
| stretch | Флекс-элемент растягивается на всю высоту контейнера, при этом учитываются поля и отступы. |
| center | Флекс-элемент выравнивается по центру контейнера. |
| flex-start | Флекс-элемент выравнивается относительно верхнего края (начала) контейнера. |
| flex-end | Флекс-элемент выравнивается относительно нижнего края (конца) контейнера. |
| baseline | Флекс-элемент выравнивается по базовой линии. |
Пример использования
Устанавливаем выравнивание для одного из флекс-элементов внутри флекс-контейнера
#myBlueDiv < -webkit-align-self: center; /* Safari 7.0+ */ align-self: center; >
Свойство align-self
Свойство align-self задает выравнивание вдоль поперечной оси для отдельно взятого flex-блока и по вертикальной оси для отдельного элемента в гриде. По сути данное свойство представляет собой свойство align-items , но для конкретного блока.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| flex-start | Блок прижат к началу поперечной оси. |
| flex-end | Блок прижат к концу поперечной оси. |
| center | Блок стоит по центру поперечной оси. |
| baseline | Блок выравнивается по своей базовой линии. Базовая линия ( англ. baseline , или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв ‘ц’ , ‘д’ , ‘р’ , ‘щ’ . |
| stretch | Блок растянут, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width , если они заданы. Если же задана ширина и высота для элемента — stretch будет проигнорирован. |
| auto | Блок будет выровнен так, как задано в свойстве align-items . |
Значение по умолчанию: auto .
Пример . Значение stretch
В данном примере всем блокам задано значение flex-start (свойство align-items ), а третьему блоку — align-self в значении stretch :
#parent < display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; height: 100px; >#parent > div < min-width: 100px; border: 1px solid #696989; >#elem < align-self: stretch; >
Пример . Значение flex-end
В данном примере всем блокам для свойства align-items задано значение flex-start , а третьему блоку — align-self в значении flex-end :
#parent < display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; height: 100px; >#parent > div < min-width: 100px; border: 1px solid #696989; >#elem < align-self: flex-end; >
Пример . Выравнивание по началу вертикальной оси в гриде
Давайте установим выравнивание для первого элемента по началу вертикальной оси:
#parent < display: grid; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >#elem1 < align-self: start; >
Пример . Выравнивание по центру вертикальной оси в гриде
Давайте установим выравнивание первого элемента по центру вертикальной оси:
#parent < display: grid; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >#elem1 < align-self: center; >
Пример . Выравнивание по концу вертикальной оси в гриде
Давайте установим выравнивание для нашего первого элемента в гриде по концу вертикальной оси:
#parent < display: grid; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >#elem1 < align-self: end; >
Смотрите также
- свойство flex-direction ,
которое задает направление осей flex блоков - свойство justify-content ,
которое задает выравнивание по главной оси - свойство align-items ,
которое задает выравнивание по поперечной оси - свойство flex-wrap ,
которое многострочность flex блоков - свойство flex-flow ,
сокращение для flex-direction и flex-wrap - свойство order ,
которое задает порядок flex блоков - свойство align-self ,
которое задает выравнивание одного блока - свойство flex-basis ,
которое задает размер конкретного flex блока - свойство flex-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow , flex-shrink и flex-basis
align-self¶
Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items . Если у какого-либо flex-элемента margin в поперечной оси выставлен в auto , то align-self игнорируется.
Демо¶
Flexbox и выравнивание
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
/* Keyword values */ align-self: auto; align-self: normal; /* Positional alignment */ /* align-self does not take left and right values */ align-self: center; /* Put the item around the center */ align-self: start; /* Put the item at the start */ align-self: end; /* Put the item at the end */ align-self: self-start; /* Align the item flush at the start */ align-self: self-end; /* Align the item flush at the end */ align-self: flex-start; /* Put the flex item at the start */ align-self: flex-end; /* Put the flex item at the end */ /* Baseline alignment */ align-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch; /* Stretch 'auto'-sized items to fit the container */ /* Overflow alignment */ align-self: safe center; align-self: unsafe center; /* Global values */ align-self: inherit; align-self: initial; align-self: unset; Значения¶
Значение по-умолчанию: auto
Применяется к: флексам, гридам
Берёт родительское значение align-items или stretch , если нет родителя.
Элемент выравнивается в начале поперечной оси контейнера.
Элемент выравнивается в конце поперечной оси контейнера.
Элемент выравнивается по центральной линии на поперечной оси.
Элемент выравнивается по базовой линии текста.
Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.
Спецификации¶
- CSS Box Alignment Module Level 3
- CSS Flexible Box Layout Module
Поддержка браузерами¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
html> head> meta charset="utf-8" /> title>align-itemstitle> style> .flex-container display: flex; align-items: flex-start; height: 160px; /* Высота контейнера */ > .flex-item margin-left: 1rem; /* Расстояние между блоками */ padding: 10px; /* Поля вокруг текста */ width: 33.333%; /* Ширина блоков */ > .flex-item:first-child margin-left: 0; > .flex-item:hover align-self: stretch; /* Растягиваем при наведении */ > .item1 background: #f0ba7d; > .item2 background: #cae2aa; > .item3 background: #a6c0c9; > style> head> body> div class="flex-container"> div class="flex-item item1"> Фенек — лисица, живущая в пустынях Северной Африки. Имеет достаточно миниатюрный размер и своеобразную внешность с большими ушами. div> div class="flex-item item2"> Корсак — хищное млекопитающее рода лисиц. div> div class="flex-item item3"> Лисица — хищное млекопитающее семейства псовых, наиболее распространённый и самый крупный вид рода лисиц. div> div> body> html> Примечание¶
Safari до версии 9 поддерживает свойство -webkit-align-self .
См.также¶
- Свойство align-items
CSS свойство align-self
CSS свойство align-self используется для выравнивания выбранных элементов текущей флекс-линии и переопределения значений свойства align-items .
Свойство игнорируется, если для какого-либо flex-элемента установлено свойство margin со значением «auto».
Свойство align-self имеет те же значение, что и свойство align-items:
Синтаксис
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> section < display: flex; align-items: center; height: 120px; padding: 10px; background: #99caff; > div < height: 60px; background: #1c87c9; margin: 5px; > div:nth-child(1) < align-self: flex-start; background: #8ebf42; > style> head> body> h2>Пример свойства align-self h2> p>Для первого блока установлено свойство align-self со значением "flex-start". p> section> div>Box #1 div> div>Box #2 div> div>Box #3 div> section> body> html>Пример, где использованы три блока. Второй блок установлен при помощи значения «flex-end»:
Пример
html> html> head> title>Заголовок документа title> style> section < display: flex; align-items: center; height: 120px; padding: 10px; background: #99caff; > div < height: 60px; background: #1c87c9; margin: 5px; > div:nth-child(2) < align-self: flex-end; background: #8ebf42; > style> head> body> h2>Пример свойства align-self h2> p>Для второго блока установлено значение "flex-end". p> section> div>Box #1 div> div>Box #2 div> div>Box #3 div> section> body> html>Значения
| Значение | Описание |
|---|---|
| auto | Элемент наследует свойство align-items его родительского контейнера. Значение по умолчанию. |
| stretch | Элемент растягивается таким образом, чтобы заполнить контейнер. |
| center | Элементы расположены в центре контейнера. |
| flex-start | Элементы расположены в начале контейнера. |
| flex-end | Элементы расположены в конце контейнера. |
| baseline | Элементы выравниваются по базовой линии контейнера. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 29.0+ 21-28 -webkit- |
28.0+ | 9.0+ 6.1-8.0 -webkit- |
12.1+ |