Свойство 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
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 выравнивает флекс-элементы текущей строки, переписывая значение 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-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- 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-block-size
- 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
CSS свойство align-self указывает, каким образом будет выравниваться flex-элемент по вертикали, внутри flex-контейнера. Оно работает аналогично свойству align-items, отличие заключается в том, что align-items применяется ко всем элементам и задаётся для flex-контейнера. А align-self применяет к конкретному элементу.
Примечание: align-self переопределяет выравнивание для данного flex-элемента, заданное свойством align-items.
| Значение по умолчанию: | auto |
|---|---|
| Применяется: | к flex-элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.alignSelf=»center»; |
Синтаксис
align-self: auto|stretch|center|flex-start|flex-end|baseline;
Значения свойства
| Значение | Описание |
|---|---|
| auto | Значение по умолчанию. Указывает, что значение наследуется от свойства align-items. |
| stretch | flex-элемент растягивается, занимая всю доступную высоту. |
Примечание: если у элемента определено свойство max-height, то заданная максимальная высота не изменяется. В этом случае элемент занимает заданную ему высоту и располагается по верхней границе контейнера.
Примечание: если flex-элемент занимает больше вертикального пространства, чем высота контейнера, то элемент сместится так, чтобы переполнение было одинаковым сверху и снизу.