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-items и align-self¶
Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:
- stretch : значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
- flex-start : элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
- flex-end : элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
- center : элементы выравниваются по центру flex-контейнера
- baseline : элементы выравниваются в соответствии со своей базовой линией
Выравнивание при расположении в строку:
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px #ccc solid; height: 5em; > .flex-start align-items: flex-start; > .flex-end align-items: flex-end; > .center align-items: center; > .baseline align-items: baseline; > .flex-item text-align: center; font-size: 1em; padding: 1.2em; color: white; > .largest-item padding-top: 2em; > .color1 background-color: #675ba7; > .color2 background-color: #9bc850; > .color3 background-color: #a62e5c; > .color4 background-color: #2a9fbc; > style> head> body> h3>Flex-starth3> div class="flex-container flex-start"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Flex-endh3> div class="flex-container flex-end"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Centerh3> div class="flex-container center"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Baselineh3> div class="flex-container baseline"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2 largest-item"> Flex Item 2 div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> body> html> 
Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:
1 2 3 4 5 6
.flex-container display: flex; border: 1px #ccc solid; flex-direction: column; width: 12em; > 
Свойство align-self¶
Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение auto :
- auto : значение по умолчанию, при котором элемент получает значение от свойства align-items , которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch .
- stretch
- flex-start
- flex-end
- center
- baseline
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
html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container display: flex; border: 1px #ccc solid; justify-content: space-between; align-items: stretch; height: 12em; > .flex-item text-align: center; font-size: 1em; padding: 1.2em; color: white; > .item1 background-color: #675ba7; align-self: center; > .item2 background-color: #9bc850; align-self: flex-start; > .item3 background-color: #a62e5c; align-self: flex-end; > .item4 background-color: #2a9fbc; align-self: center; > style> head> body> h3>Align-selfh3> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div class="flex-item item4">Flex Item 4div> div> body> html> Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch; . Однако каждый из элементов переопределяет это поведение:
align-self
Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К флекс-элементу |
| Анимируется | Нет |
Синтаксис
align-self: auto | flex-start | flex-end | center | baseline | stretch| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
auto Берёт родительское значение align-items или stretch , если нет родителя. flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.
Песочница
flex-start flex-end center baseline stretch
.parent < display: flex; >.e2 < align-self: >; >
Пример
Объектная модель
Объект.style.alignSelf
Примечание
Safari до версии 9 поддерживает свойство -webkit-align-self .
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Flexible Box Layout Module Level 1 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 11 | 13 | 29 | 12.1 | 6.1 | 9 | 28 |
| 4.4 | 28 | 12.1 | 7.1 | 9.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- Выравнивание с помощью флексбоксов
- Свойства flex-элементов
Практика
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- gap
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- row-gap
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
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