Flex-grow

“жадность” отдельно взятого flex-блока

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

Пример 1:

Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера

Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные

Пример 2:

Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера

Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

Flex-shrink

фактор “сжимаемости” отдельно взятого flex-блока

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

Flex

Короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

/* т.е.... */

.my-flex-block{

flex-grow:12;

flex-shrink:3;

flex basis: 30em;

}

/* это то же самое, что... */

.my-flex-block{

flex: 12 3 30em;

}

Пример

Align-self

Выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items)

flex-start: flex-блок прижат к началу поперечной оси

flex-end: flex-блок прижат к концу поперечной оси

center: flex-блок располагаются в центре поперечной оси

baseline: flex-блок выравнен по baseline

stretch (значение по умолчанию): flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.

Order