Что такое CSS Flexbox?

CSS Flexbox или Flexible Boxes — это новая функция, представленная CSS3, которая помогает нам упорядочивать, выравнивать содержимое и распределять пространство для него в нашем контейнере или на веб-странице эффективно и легко.

Как это используется?

Во-первых, мы даем нашему родительскому контейнеру flex-элементов свойство display и присваиваем значение flex в нашем CSS.

Flexbox работает в основном на основе двух осей:

  • главная ось: это основная ось, вдоль которой располагаются гибкие элементы (в виде строк на странице или столбцов вниз по странице).
  • поперечная ось: это ось, перпендикулярная главной оси.

Примечание. Направление/положение поперечной оси будет меняться в зависимости от направления главной оси и наоборот.

Чтобы указать главную ось, используется flex-direction со значением row (по умолчанию) или столбца. Также можно использовать значения row-reverse и column-reverse.

Иногда, когда элементов слишком много или они достаточно велики, чтобы не поместиться в одну строку, они уменьшаются, что влияет на их индивидуальную ширину. Чтобы избежать этого, внутри нашего CSS используется свойство flex-wrap.

Свойство flex-wrap принимает три значения:

  • nowrap: это значение по умолчанию.
  • обтекание: элементы разбиваются на две или более строк слева направо.
  • wrap-reverse: разделяет элементы справа налево, если они находятся в строке, или снизу вверх в столбце.

Заказать

Элементы Flex имеют первоначальный порядок, который может быть переопределен свойством order. Работает над отдельными элементами.

Основа гибкости

Он используется для установки начального размера элемента.

Flex-grow и Flex-shrink

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

До сих пор мы видели свойства, которые помогают нам изменить макет веб-страницы. Теперь о свойствах, используемых для выравнивания элементов.

Выровнять содержание

Он выравнивает элементы flexbox относительно главной оси. Это следующие значения, которые можно назначить с помощью этого свойства.

  • flex-start (по умолчанию): выравнивает flex-элементы по началу (слева) flex-контейнера (или по верху в случае столбца).
  • flex-end: выравнивает элементы по краю (справа) гибкого контейнера.
  • center: выравнивает элементы по центру.
  • space-between: выравнивает элементы по центру главной оси с промежутками между элементами. Первый и последний элементы помещаются в конец.
  • space-around: похож на space-between, но первый и последний элементы не прикреплены к концам, а промежутки между элементами меньше.
  • равномерно по пространству: похоже на пространство вокруг, но больше места на концах и еще меньше пробелов между элементами.

Выравнивание элементов

Он выравнивает элементы flexbox относительно поперечной оси. Это следующие значения, которые можно назначить с помощью этого свойства.

  • flex-start: выравнивает элементы по началу контейнера.
  • flex-end: выравнивает элементы по краю контейнера.
  • center: выравнивает их по центру контейнера.
  • растяжение (по умолчанию):элементы растягиваются, чтобы заполнить весь контейнер.
  • базовый уровень:базовый уровень – это строка, на которой находится буква.

Приведенные выше свойства можно использовать только для изменения выравнивания всех элементов вместе. Но чтобы сделать это индивидуально, используется свойство с именем align-self.

Выровнять себя

Он используется индивидуально в CSS каждого элемента. Все значения, указанные в свойстве align-items, можно использовать в align-self. Кроме того, он переопределяет выравнивание по умолчанию или эффект свойства align-items.

Это было все о CSS Flexbox, спасибо за чтение.