Что такое 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, спасибо за чтение.