Свойство 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
CSS свойство align-items
Свойство align-items выравнивает флекс-элементы внутри контейнера по высоте (по перпендикулярной оси).
CSS синтаксис
align-items: stretch | center | flex-start | flex-end | baseline;
Возможные значения
| Значение | Описание |
|---|---|
| stretch | Значение по умолчанию. Флекс-элементы растягиваются, занимая все пространство контейнера по высоте. |
| center | Флекс-элементы выравниваются по центру контейнера. |
| flex-start | Флекс-элементы выравниваются относительно верхнего края (начала) контейнера. |
| flex-end | Флекс-элементы выравниваются относительно нижнего края (конца) контейнера. |
| baseline | Флекс-элементы выравниваются по базовой линии. |
Пример использования
Устанавливаем выравнивание флекс-элементов по центру флекс-контейнера
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, выравнивание вдоль поперечной оси
Вместо «вертикального» выравнивания во флексбоксе используется свойство для выравнивания элементов вдоль поперечной оси — align-items . Это свойство задаётся для флекс-контейнера.
Его значением по умолчанию является stretch . Именно благодаря этому значению флекс-элементы и растягиваются на всю «высоту» флекс-контейнера. Если флекс-элементам задана высота, то растягиваться они не будут.
Вся теория и выполнение задания доступны по подписке
Подписка — это:
После подписки вы получите доступ:
- теория тренажёров без ограничений;
- доступ ко всем платным тренажёрам;
- интересные и сложные вызовы для практики;
- безлимитные проверки испытаний.
Бесплатные материалы:
- Конспект части «Флексбокс. Знакомство»
- Статья «Примеры использования флексбоксов»
- Видео «Кому нужны флексы»