Свойство align-items
Свойство align-items задает выравнивание элементов вдоль поперечной оси для flex блоков и по вертикальной оси для гридов. Применяется к родительскому элементу.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| flex-start | Блоки прижаты к началу поперечной (вертикальной) оси. |
| flex-end | Блоки прижаты к концу поперечной (вертикальной) оси. |
| center | Блоки стоят по центру поперечной (вертикальной) оси. |
| baseline | Элементы выравниваются по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв ‘ц’ , ‘д’ , ‘р’ , ‘щ’ . |
| stretch | Блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width , если они заданы. Если же задана ширина и высота для элементов — stretch будет проигнорирован. |
Значение по умолчанию: stretch .
Пример . Значение stretch
Сейчас главная ось направлена слева направо, а по поперечной оси элементы растянуты на всю высоту:
#parent < display: flex; align-items: stretch; flex-direction: row; border: 1px solid #696989; >#parent > div < border: 1px solid #696989; >
Пример . Значение stretch + размеры элемента
Сейчас для элементов задана ширина и высота, поэтому значение stretch для свойства align-items будет проигнорировано:
#parent < display: flex; align-items: stretch; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение flex-start без размеров элемента
Сейчас элементы будут прижаты к верху:
#parent < display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; >#parent > div < border: 1px solid #696989; >
Пример . Значение flex-start + размеры элемента
Сейчас элементы по прежнему будут прижаты к верху, однако у них будет заданная ширина и высота:
#parent < display: flex; align-items: flex-start; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение flex-end + размеры элемента
Сейчас элементы будут прижаты к низу:
#parent < display: flex; align-items: flex-end; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение center + размеры элемента
Сейчас элементы будут стоять по центру по поперечной оси (в данном случае по вертикали):
#parent < display: flex; align-items: center; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение center, элементы разного размера
Сейчас элементы имеют разный размер по высоте (сейчас они раздвигаются текстом, но можно задать и height ), ширина у всех одинаковая, так как задано свойство width :
#parent < display: flex; align-items: center; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; border: 1px solid #696989; >
Пример . Значение baseline, элементы разного размера
А вот так выглядит выравнивание по базовой линии:
#parent < display: flex; align-items: baseline; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 130px; line-height: 1; border: 1px solid #696989; >
Пример . Выравнивание по началу вертикальной оси в гриде
Давайте выравним наши элементы внутри ячеек по началу вертикальной оси:
#parent < display: grid; align-items: flex-start; grid-template-columns: 100px 100px; 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; >
А теперь посмотрим на наш грид в отладчике браузера:
Пример . Выравнивание по центру вертикальной оси в гриде
А теперь выравним наши элементы в ячейках по центру вертикальной оси:
#parent < display: grid; align-items: center; grid-template-columns: 100px 100px; 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; >
Давайте посмотрим на отображение грида в отладчике:
Пример . Выравнивание по концу вертикальной оси в гриде
Снова изменим выравнивание элементов, на этот раз по концу вертикальной оси:
#parent < display: grid; align-items: end; grid-template-columns: 100px 100px; 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 < >
А теперь посмотрим как выглядит наш грид через отладчик:
Смотрите также
- свойство 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 — items
Работает перпендикулярно justify — content , выравнивает флекс-элементы по дополнительной оси.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 11 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство для выравнивания элементов внутри контейнера по поперечной оси.
Пример
Скопировать ссылку «Пример» Скопировано
Мысленно можно провести горизонтальную линию через центр флекс-контейнера и каждого из флекс-элементов. Свойство align — items со значением center совместит центры родителя и каждого из элементов.
.container display: flex; align-items: center;>.container display: flex; align-items: center; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Работа этого свойства похожа на работу vertical — align для строчно-блочных элементов.
Напомним, что поперечная ось всегда идёт перпендикулярно основной оси. Если флекс-элементы выстроены в ряд, то align — items управляет выравниванием по вертикали.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Возможные значения
Скопировать ссылку «Возможные значения» Скопировано
- stretch (значение по умолчанию) — элементы растягиваются вдоль поперечной оси так, чтобы заполнить всего родителя.
- flex — start или start — элементы выстраиваются у начала поперечной оси. Разница между ними лишь в том, что второе значение «уважает» направление чтения выбранного языка.
- flex — end или end — элементы выстраиваются у конца поперечной оси. Разница между первым и вторым значениями аналогична предыдущему пункту.
- center — элементы выстраиваются по центру поперечной оси.
- baseline — элементы выравниваются по базовой линии текста. «Базовая линия» — baseline — воображаемая линия, проходящая по нижнему краю знаков шрифта (без учёта выносных элементов).
Это может быть сложно понять сразу, поэтому мы сделали демку. Обратите внимание, что вне зависимости от размера шрифта все блоки выравниваются по базовой линии первой строки.
Доступные значения при работе с гридами смотрите тут Гайд по grid.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Стандартное значение stretch очень удобно, если вы делаете двухколоночный макет. Раньше приходилось при помощи разных костылей добиваться одинаковой высоты, а теперь достаточно сделать контейнер флексом, и колонки по умолчанию будут одной высоты.
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
- Chrome 66, поддерживается 66
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 12.1, поддерживается 12.1
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Если флекс-элементы выстроены в несколько колонок, то выравнивание по поперечной оси будет применяться к каждой строке отдельно.
Свойство align-items: baseline
Ещё одно значение свойства align-items — это baseline . Если задать его контейнеру, то флекс-элементы будут выравниваться по базовой линии текста в них. Эта воображаемая линия проходит по нижней части букв.
Если выровнять флекс-элементы по базовой линии, то они выстроятся так, чтобы текст в них был как бы на «одной строке».
Чтобы лучше понять поведение baseline , сравним его с другим значением — flex-start .
Вся теория и выполнение задания доступны по подписке
Подписка — это:
После подписки вы получите доступ:
- теория тренажёров без ограничений;
- доступ ко всем платным тренажёрам;
- интересные и сложные вызовы для практики;
- безлимитные проверки испытаний.
Бесплатные материалы:
- Конспект части «Флексбокс. Знакомство»
- Статья «Примеры использования флексбоксов»
- Видео «Кому нужны флексы»
align-items
Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
Краткая информация
| Значение по умолчанию | stretch |
|---|---|
| Наследуется | Нет |
| Применяется | К флекс-контейнеру |
| Анимируется | Нет |
Синтаксис
align-items: 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 раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
| Значение | Положение | Описание |
|---|---|---|
| flex-start |  |
Флексы выравниваются в начале поперечной оси контейнера. |
| center |  |
Флексы выравниваются по линии поперечной оси. |
| flex-end |  |
Флексы выравниваются в конце поперечной оси контейнера. |
| stretch |  |
Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера. |
| baseline |  |
Флексы выравниваются по их базовой линии. |
Песочница
flex-start flex-end center baseline stretch
Пример
Результат данного примера показан на рис. 1. За счёт использования значения stretch у атрибута align-items блоки получаются одинаковой высоты, несмотря на разное содержимое.
Рис. 1. Блоки одинаковой высоты
Объектная модель
Объект.style.alignItems
Примечание
Safari до версии 9 поддерживает свойство -webkit-align-items .
Спецификация
| Спецификация | Статус |
|---|---|
| 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-контейнера
- Создание медиа-объектов
- Точки между слов
Практика
- Кролик внизу
- Кролик внизу 2
- Кролик внизу 3
Справочник 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