Содержание
- Основы Flexbox
- Как использовать flexbox
- Схема расположения
- Отрегулируйте выравнивание
- Размер гибкости
- Зачем мне его использовать?
Flexbox или Flexible Box Layout - это мощный модуль макета CSS, который дает веб-дизайнерам и разработчикам эффективный и простой способ компоновки, выравнивания и распределения элементов в контейнере. Он решает многие проблемы компоновки, которые мы пытались решить долгое время.
Основы Flexbox
В своей основной форме flexbox состоит из двух элементов: гибкого контейнера (или гибкого родительского элемента) и гибких элементов (гибких дочерних элементов). Гибкий контейнер - это содержащий элемент (например, div) с учетом свойства отображения сгибать. Элементы Flex являются дочерними элементами гибкого контейнера, которыми можно управлять с помощью различных свойств отображения.
Гибкие контейнеры и гибкие элементы обладают собственным набором свойств, которые можно комбинировать различными способами для создания ряда сложных макетов. Элементы внутри гибкого контейнера можно расположить по горизонтали или вертикали, выровнять и распределить различными способами, а также растянуть или сжать, чтобы соответствовать доступному пространству. Все эти параметры позволяют легко создавать адаптивные макеты.
Как использовать flexbox
Чтобы начать использовать flexbox, вам нужно сначала создать свой гибкий контейнер (родительский элемент, который будет содержать ваши гибкие элементы). В этом примере мы будем использовать div блокировать. Прежде чем стилизовать элемент, добавим еще три div блоки внутри нашего гибкого контейнера, чтобы действовать как гибкие элементы. На этом этапе предметы будут сложены.
Установив дочерние блоки div, мы можем установить для свойства display родительского контейнера значение сгибать.
Контейнер Flex {display: flex; }
Схема расположения
Направление макета - это просто направление, в котором ваши элементы будут распределяться. Направление гибкого контейнера по умолчанию: строка, который будет отображать дочерние элементы по горизонтали. Вы можете переключить макет на вертикальный, установив направление на столбец.
Контейнер Flex {display: flex; flex-direction: ряд; } Контейнер Flex {display: flex; flex-direction: столбец; }
Какое бы направление вы ни задали для своего гибкого контейнера, оно называется его «основным» направлением, в то время как другое направление, которое вы не выбрали, становится «перекрестным». Таким образом, по умолчанию основное направление будет горизонтальным, а поперечное - вертикальным.
Flexbox также позволяет перевернуть макет. При инвертировании дочерние элементы гибкого контейнера будут располагаться справа налево (если направление равно строка) или снизу вверх (если направление столбец ).
Контейнер Flex {display: flex; flex-direction: строка-реверс; } Контейнер Flex {display: flex; flex-direction: обратный столбец; }
Это может пригодиться, если вы хотите перевернуть макет на небольших экранах.
Например, предположим, что на экранах рабочего стола вы хотите отображать текст в левой части экрана, а изображение - в правой (см. Изображение доски для серфинга выше). На мобильном устройстве это переместит изображение под текстом. Изменив направление, вы можете убедиться, что изображение появляется над текстом.
Отрегулируйте выравнивание
Настройки Flexbox также предоставляют вам два разных метода выравнивания содержимого: по вертикали и по горизонтали. Вот ваши варианты горизонтального выравнивания для элементов внутри гибкого контейнера:
гибкий старт: Элементы, расположенные ближе к началу строки (слева, если вы не изменили макет в обратном порядке)
центр: Элементы по центру строки
гибкий конец: Элементы, расположенные ближе к концу строки (справа, если вы не изменили макет в обратном порядке)
пространство между: Элементы равномерно распределены по строке.
пространство вокруг: Элементы равномерно распределены по строке, с равным пространством по обе стороны от каждого элемента.
Итак, код может выглядеть так:
Гибкий контейнер - пространство вокруг
Вот ваши варианты вертикального выравнивания для элементов в гибком контейнере:
гибкий старт: Элементы выровнены по верхнему краю строки
центр: Элементы располагаются по центру строки
гибкий конец: Элементы выровнены по нижней части строки
протяжение: Элементы растянуты по высоте строки
исходный уровень: Элементы выровнены по их базовым линиям (воображаемая линия, на которой находится текст)
Код может выглядеть так:
Центр гибких контейнеров
По умолчанию дочерние элементы гибкого контейнера всегда будут пытаться уместиться на одной строке. Если вы хотите изменить это, вы можете добавить сворачивать атрибут. Это позволяет детям переходить к новой строке, если у них заканчивается место.
Контейнер Flex {display: flex; flex-wrap: обертка; }
Элементы Flex также получают свои собственные свойства на основе Flex. Когда элемент помещается внутри гибкого контейнера, он автоматически становится гибким дочерним элементом, и ему предоставляется собственный набор стилей CSS на основе гибкости. Эти стили управляют размером, выравниванием и порядком отображения.
Размер гибкости
Дочерние элементы Flex могут изменять свою ширину или высоту (в зависимости от направления макета контейнера), чтобы заполнить доступное пространство.
Webflow предоставляет вам три предустановленных варианта гибкого изменения размеров: сжимать при необходимости, заполнять пустое пространство и не сжимать. Обратите внимание, что каждый дочерний элемент может иметь свои собственные настройки, что позволяет использовать множество вариантов дизайна.
Flex Item flex-shrink: число>; гибкий рост: число>; гибкая основа: длина>
Давайте посмотрим, что делает каждый из этих вариантов:
- При необходимости усадите: Изменяет размер элемента в зависимости от его ширины / высоты или содержимого. Элемент не станет больше, чем нужно, но может уменьшиться до минимального размера, чтобы предотвратить переполнение.
- Заполните пустое место: Позволяет элементу расширяться, чтобы заполнить все доступное пространство внутри его родительского элемента. Если вы установите это для всех элементов в гибком контейнере, они будут расширяться, занимая равное количество пустого пространства.
- Не сжимайтесь: Изменяет размер элемента в зависимости от его ширины / высоты или содержимого, но не позволяет ему уменьшаться, даже если это вызовет переполнение
Элементы Flex также могут иметь свои собственные настройки выравнивания, которые переопределяют выравнивание по умолчанию, установленное их родительским контейнером Flex. Эти выравнивания ведут себя так, как объяснялось ранее.
Центр Flex Item
По умолчанию элементы гибкости отображаются в том же порядке, в каком они появляются в исходном коде. С помощью flexbox вы можете переопределить это поведение, чтобы элементы отображались именно в том порядке, в котором вы хотите.
Здесь вы можете использовать четыре основных варианта:
- Авто: Значение по умолчанию, при котором элементы упорядочиваются так, как они есть в источнике.
- Первый: Элемент появляется первым в своем гибком контейнере
- Последний: Элемент отображается последним в своем гибком контейнере
- Обычай: Вы можете настроить порядок отображения вашего товара.
Пользовательский порядок можно определить как число, которое указывает порядок, в котором гибкий элемент появляется внутри гибкого контейнера.
Элемент Flex {порядок: целое число>; }
Зачем мне его использовать?
Я рада, что вы спросили! Использование flexbox позволяет легко создавать адаптивные макеты, которые когда-то было очень сложно (или невозможно) создать с помощью старых модулей макета CSS.
Взгляните на примеры на изображении ниже, многие из которых вы, вероятно, уже видели в Интернете. Почти все они потребуют значительного количества CSS (особенно для разных размеров экранов), но для достижения с помощью flexbox потребуется всего несколько простых строк. Чтобы увидеть эти примеры в действии, посетите flexbox.webflow.com.
