Что такое align items в css

Что такое align items в css

Свойство align-items

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

stretch : значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера

flex-start : элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера

flex-end : элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера

center : элементы выравниваются по центру flex-контейнера

baseline : элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

align-items в Flexbox и CSS3

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:

align-items и column в Flexbox и CSS3

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение "auto":

auto : значение по умолчанию, при котором элемент получает значение от свойства align-items , которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch .

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch; . Однако каждый из элементов переопределяет это поведение:

CSS align-items Property

Center the alignments for all the items of the flexible <div> element:

Definition and Usage

The align-items property specifies the default alignment for items inside the flexible container.

Tip: Use the align-self property of each item to override the align-items property.

Default value: stretch
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.alignItems="center" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

CSS свойство align-items css3

CSS свойство align-items css3производит выравнивание всех элементов внутри флекс контейнера вдоль поперечной оси, или производит выравнивание всех элементов макета сетки по оси столбца grid-контейнера.

Для того, чтобы произвести выравнивание всех элементов макета сетки по оси строки, вы можете воспользоваться свойством justify-items.

Обращаю Ваше внимание на то, что если элемент не является флекс, или grid-контейнеромом, то свойство align-items css3не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS "Верстка по Flexbox (работа с контейнерами)".

Схематичное отображение работы свойства align-items css3отображено на следующем изображении:

Схематичное отображение работы CSS свойства align-items

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end , для флекс элементов необходимо использовать полные значения flex-start и flex-end .

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

Свойство Chrome Firefox Opera Safari IExplorer Edge
align-items alt="css3" />(флекс элементы) 21.0 20.0 12.1 9.0
7.0
-webkit-
11.0 12.0
align-items alt="css3" />(элементы сетки) 54.0* 52.0 44.0 10.3 10.0*
-ms-
16.0
12.0
-ms-

Значения свойства

Значение Описание
stretch Флекс элементы растягиваются по размеру контейнера вдоль поперечной оси, элементы сетки макета растягиваются вдоль столбца. Это значение по умолчанию.
center Элементы располагаются по центру строки контейнера (середина поперечной оси, или оси столбца).
flex-start Элементы располагаются в начале строки контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start , для флекс элементов необходимо использовать полное значение flex-start
flex-end Элементы располагаются в конце строки контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end , для флекс элементов необходимо использовать полное значение flex-end .
baseline Элементы распологаются по их базовой линии.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

В этом примере мы разместили блочный флекс контейнер, внутри которого мы разместили пять элементов <div>, которым задали ширину равную 20% от ширины родительского элемента.

С помощью свойства align-content alt="css3" />указали, что флекс элементы располагаются по центру контейнера (середина поперечной оси). Кроме того, с помощью псевдокласса :hover указали, что при наведении на наш контейнер значение свойства align-items alt="css3" />изменяется на baseline , в результате чего флекс элементы распологаются по их базовой линии.

Пример использования свойства align-items (для флекс контейнера). Пример использования свойства align-items (для флекс контейнера).

В следующем примере мы рассмотрим использование свойства align-items css3для grid-контейнеров:

В этом примере мы разместили пять строчных grid-контейнеров шириной 30% от родительского элемента <body> внутри которых мы разместили по восемь элементов <div>. Для элемента <body> мы указали, что он является многострочным флекс контейнером.

С помощью свойства grid для всех строчных grid-контейнеров мы указываем значение auto , которое определяет, что размер строк определяется размером контейнера и размером содержимого элементов в строке. Через косую черту с помощью функциональной нотации repeat() мы размещаем в макете сетки по четыре столбца в каждом контейнера, используя допустимое значение длины в "гибких" единицах измерения fr. В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

С помощью свойства align-items css3мы для каждого строчного grid-контейнера определяем как происходит выравнивание всех элементов макета сетки по оси столбца grid-контейнера:

  • Для первого grid-контейнера мы установили значение stretch — элементы сетки макета растягиваются вдоль столбца.
  • Для второго grid-контейнера мы установили значение start — элементы располагаются в начале строк контейнера.
  • Для третьего grid-контейнера мы установили значение end — элементы располагаются в строк строк контейнера.
  • Для четвертого grid-контейнера мы установили значение center — элементы располагаются по центру строки контейнера.
  • Для пятого grid-контейнера мы установили значение baseline — элементы распологаются по их базовой линии .

Обратите внимание, что для демонстрации отличия значений start и baseline мы указали для четырех элементов определенный класс, благодаря которому с помощью свойства font-size увеличиваем размер шрифта.

Пример использования свойства align-items (для grid-контейнера). Пример использования свойства align-items (для grid-контейнера). CSS свойства

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *