Выравните элементы используя свойство justify-content
Иногда flex элементы в контейнере flex не заполняют все пространство в контейнере. Обычно хочется сказать CSS, как выровнять и раздвинуть элементы flex определенным образом. К счастью, свойство justify-content имеет несколько вариантов для этого. Но сначала, перед тем, как рассмотреть эти варианты, необходимо понять важную терминологию. Вот полезное изображение, показывающее строку, иллюстрирующую приведенные ниже концепции. Напомним, что установка flex контейнера в качестве строки помещает flex элементы бок о бок слева направо. Flex контейнер, установленный в качестве столбца, размещает flex элементы вертикально сверху вниз. Направление расположения flex элементов называется главной осью . Для строки это горизонтальная линия, проходящая через каждый элемент. А для столбца главная ось - вертикальная линия через элементы. Существует несколько вариантов того, как перемещать flex элементы вдоль линии, являющейся главной осью. Одним из наиболее часто используемых является justify-content: center; , который выравнивает все flex элементы по центру внутри flex контейнера. Другие варианты включают:
-
flex-start: располагает элементы к началу flex контейнера. Для строки это подталкивает элементы к левой стороне контейнера. Для столбца это подталкивает элементы к верхней стороне контейнера. -
flex-end: располагает элементы к концу flex контейнера. Для строки это подталкивает элементы к правой части контейнера. Для столбца это подталкивает элементы к нижней части контейнера. -
space-between: выравнивает элементы по центру главной оси, распеределяя оставшееся пространство между элементами. Первый и последний элементы располагаются вплотную к краям flex контейнера. Например, в строке первый элемент находится у левой стороны контейнера, последний элемент находится у правой стороны контейнера, а остальные элементы между ними расположены равномерно. -
space-around: аналогичноspace-between, но первый и последний элементы не привязаны к краям контейнера, пространство распределяется вокруг всех элементов
Пример помогает показать это свойство в действии. Добавьте свойство justify-content CSS в элемент #box-container и присвойте ему значение center. Бонус
Попробуйте другие параметры для свойства justify-content в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение center является единственным, которое пройдет эту задачу.