Пустое пространство между элементами тоже нужно распределять. Это делается в двух направлениях — вдоль оси, по которой расставлены элементы (т.е. вдоль строки/колонки), и поперёк.

Регулировка вдоль строки либо колонки задаётся свойством justify-content . Название пришло из механики, где юстировку начинают с выравнивания деталей вдоль главной оси конструкции (например, объектива).

• flex-start : сначала идут флекс-элементы, за ними — оставшееся пустое пространство. Если значение flex-direction — row , все флекс-элементы прижмутся к левому краю контейнера. А справа окажется пустота.

Если flex-direction: column , элементы идут сверху вниз. И свойство justify-content: flex-start соберёт флекс-элементы сверху, а пустое пространство окажется снизу.

• flex-end : сначала идёт пустое пространство, а к концу контейнера прижаты элементы. При flex-direction: row , элементы окажутся справа, а всё пустое пространство — слева. При flex-direction: row-reverse — наоборот.

• center: флекс-элементы собраны посередине, а пустое пространство распределено поровну с двух сторон от них.

• space-between: первый элемент прижат к началу контейнера, последний — к концу, а остальные расставлены между ними с одинаковыми промежутками. Подходит для меню, растянутого во всю ширину страницы.

• space-around: всё пустое пространство делится на равные промежутки. Каждый флекс-элемент получает отступы по обе стороны, равные этому промежутку. Так между флекс-элементами оказывается отступ в 2 промежутка, а перед первым и после последнего элементов — в 1 промежуток.

• space-evenly: все отступы равной величины. И между элементами, и между границами контейнера и первым и последним элементами.