Выравнивание элементов гибкого контейнера по левому краю

В мобильном меню список значков социальных сетей упорядочивается с помощью flexbox. Чтобы обеспечить равный интервал, используется justify-content: space-around. Однако, когда строки содержат более трех элементов, они выравниваются по центру, а не по левому краю.

Затруднение

Проблема возникает из-за того, что justify-content: space- вокруг равномерно распределяет предметы с промежутками половинного размера на каждом конце. Когда оставшееся пространство отрицательное или существует один элемент, он ведет себя как центр. Это приводит к нежелательному поведению по центру в данном сценарии.

Решение

Чтобы выровнять элементы, оставшиеся на переносе, justify-content: space-between — это отвечать. Этот вариант обеспечивает равномерное распределение, но в случае отрицательного свободного места или одного элемента в строке он ведет себя как flex-start, который выравнивает элементы по левому краю.

Пример кода

Замена justify-content: space-around на justify-content: space-between решает проблему выравнивания. Кроме того, к контейнеру можно добавить отступы слева и справа, чтобы имитировать эффект пространства вокруг.

Дальнейшие соображения

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