Align items css что это

Выравнивание элементов. 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-items: baseline

Ещё одно значение свойства align-items — это baseline . Если задать его контейнеру, то флекс-элементы будут выравниваться по базовой линии текста в них. Эта воображаемая линия проходит по нижней части букв.

Если выровнять флекс-элементы по базовой линии, то они выстроятся так, чтобы текст в них был как бы на «одной строке».

Чтобы лучше понять поведение baseline , сравним его с другим значением — flex-start .

Вся теория и выполнение задания доступны по подписке

Подписка — это:

После подписки вы получите доступ:

• теория тренажёров без ограничений;
• доступ ко всем платным тренажёрам;
• интересные и сложные вызовы для практики;
• безлимитные проверки испытаний.

Бесплатные материалы:

• Конспект части «Флексбокс. Знакомство»
• Статья «Примеры использования флексбоксов»
• Видео «Кому нужны флексы»

align-items¶

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Демо¶

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

/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ align-items: center; /* Pack items around the center */ align-items: start; /* Pack items from the start */ align-items: end; /* Pack items from the end */ align-items: flex-start; /* Pack flex items from the start */ align-items: flex-end; /* Pack flex items from the end */ align-items: self-start; align-items: self-end; align-items: left; /* Pack items from the left */ align-items: right; /* Pack items from the right */ /* Baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: unset; 

Значения¶

Значение	Положение	Описание
flex-start		Флексы выравниваются в начале поперечной оси контейнера.
center		Флексы выравниваются по линии поперечной оси.
flex-end		Флексы выравниваются в конце поперечной оси контейнера.
stretch		Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.
baseline		Флексы выравниваются по их базовой линии.

Значение по-умолчанию: stretch

Применяется к флекс-контейнеру

Объектная модель: object.style.alignItems

Спецификации¶

Поддержка браузерами¶

Описание и примеры¶

 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>align-itemstitle> style> .flex-container  display: flex; align-items: stretch; /* Растягиваем */ > .flex-item  margin-left: 1rem; /* Расстояние между блоков */ padding: 10px; /* Поля вокруг текста */ width: 33.333%; /* Ширина блоков */ > .flex-item:first-child  margin-left: 0; > .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-items .

См. также¶

• Свойство align-self

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
• :any-link
• :autofill
• :blank
• :buffering
• :checked
• :default
• :defined
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :has()
• :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-end-end-radius
• border-end-start-radius
• border-image
• border-image-outset
• 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-start-end-radius
• border-start-start-radius
• 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-variant-caps
• font-weight
• gap
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• inline-size
• 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-block-size
• max-height
• max-inline-size
• max-width
• min-block-size
• min-height
• min-inline-size
• 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-decoration-thickness
• 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
• text-underline-position
• 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