Flexbox. Свойства flex элементов

Свойство order

Управляет порядком, в котором располагаются flex-элементы внутри flex-контейнера. Для элементов задаем нужный порядок

.flex__item_1{
  order: 2;
}
.flex__item_2{
  order: 1;
}

Свойство align-self

Переопределяет для конкретного flex-элемента выравнивание вдоль поперечной оси (направление зависит от значения свойства flex-direction).  Значения:

auto (по умолчанию) - flex-элемент растягивается на весь размер поперечной оси flex-контейнера.

flex-start - flex-элементы прижимаются к началу поперечной оси.

flex-end - flex-элементы прижимаются к концу поперечной оси.

center - flex-элементы располагаются по центру поперечной оси.

Свойство flex-basis

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

.flex__item{
  flex-basis: 500px;
}

Свойство flex-grow

Определяет возможность элемента увеличиваться в размере, при необходимости заполняя весь flex-контейнер. 0 запрещено. 1 разрешено. 

.flex__item{
  flex-grow: 1;
}

Свойство flex-shrink

Определяет возможность элемента уменьшаться в размере, при необходимости заполняя весь flex-контейер. 0 запрещено. 1 разрешено. 

.flex__item{
  flex-shrink: 1;
}

Свойство flex. Сокращенная запись для flex-grow, flex-shrink и flex-basis

Определяет возможность элемента уменьшаться и увеличиваться в размере, при необходимости заполняя весь flex-контейнер (0 запрещено. 1 разрешено). А так же задаёт базовый размер. 

.flex__item{
  flex: 1 1 500px;
}

Игра-тренажер для изучения flexbox: https://flexboxfroggy.com/

Шпаргалка 1: https://fls.guru/flexbox.html

Шпаргалка 2: https://tpverstak.ru/flex-cheatsheet/

Более подробная статья: https://habr.com/ru/post/528672/