~~1 771~~ 0 20-03-2019, 00:45

align-items - Выравнивание по вертикальной оси

Элементы Flex могут быть выровнены по поперечной оси текущей строки контейнера flex, аналогично justify-content, но в перпендикулярном направлении - align-items устанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные flex-элементы. Функция align-self позволяет переопределить это выравнивание по умолчанию для отдельных элементов flex.

(Для анонимных flex-элементов align-self всегда соответствует значению align-items в связанном с ним flex-контейнере.)

Если какое-либо из полей поперечной оси гибкого элемента является align-self, не имеет никакого эффекта.

На абсолютно позиционированных элементах значение auto вычисляется само по себе. Во всех других элементах значение auto для align-self вычисляется до значения align-items на родительском элементе или растягивается, если у элемента нет родительского элемента.

Синтаксис написания:

{align-items: start;}

align-items

Возможные варианты написание:

/* Basic keywords */ 
align-items: normal; 
align-items: stretch; 

/* Positional alignment */ 
/* align-items does not take left and right values */
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; 

/* 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;

Больше о поддержке браузерами - https://developer.mozilla.org/