Flexbox. Свойства flex items

По умолчанию элементы flex располагаются в исходном порядке. Однако свойство order управляет порядком их появления в гибком контейнере.

.item {
  order: 5; /* default is 0 */
}

Элементы с одинаковым порядком возвращаются в исходный порядок.
 

flex-grow

Определяет способность гибкого элемента расти при необходимости. Принимает значение без единицы, которое служит пропорцией. Оно определяет, какое количество свободного места внутри гибкого контейнера должен занимать элемент.

Если для всех элементов flex-grow установлено значение 1, оставшееся место в контейнере будет распределено поровну между всеми дочерними элементами. Если для одного из дочерних элементов установлено значение 2, то он займет в два раза больше места, чем все остальные (или, по крайней мере, попытается это сделать).
 

.item {
  flex-grow: 4; /* default 0 */
}

Отрицательные числа недействительны.
 

flex-shrink

Это определяет способность гибкого элемента сжиматься при необходимости.

.item {
  flex-shrink: 3; /* default 1 */
}

Отрицательные числа недействительны.
 

flex-basis

Определяет размер элемента по умолчанию до распределения оставшегося пространства. Это может быть длина (например, 20%, 5rem и т. д.) или ключевое слово. Ключевое слово auto означает «посмотреть на свойство width или height» (что временно делалось ключевым словом main-size, пока не было устаревшим). Ключевое слово content означает «определять размер на основе содержимого элемента» - это ключевое слово пока не очень хорошо поддерживается, поэтому его трудно протестировать, и еще труднее узнать, что делают его собратья max-content, min-content и fit-content.

.item {
  flex-basis:  | auto; /* default auto */
}

Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется на основе значения flex-grow. См. график
 

flex

Это сокращённая запись для свойств flex-grow, flex-shrink и flex-basis, объединённых вместе. Второй и третий параметры (flex-shrink и flex-basis) являются необязательными. По умолчанию значение равно 0 1 auto, но если вы задаёте его одним числовым значением, например flex: 5;, то это меняет flex-basis на 0%. Таким образом, это эквивалентно записи:
flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.
 

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Рекомендуется использовать это сокращенное свойство, а не задавать отдельные свойства. Это сокращение устанавливает другие значения интеллектуально.
 

align-self

Это позволяет переопределить выравнивание по умолчанию (или указанное align-items) для отдельных элементов flex.

Для понимания доступных значений см. пояснения к align-items.
 

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Обратите внимание, что float, clear и vertical-align не влияют на гибкий элемент.