Что такое Flexbox (и почему вы должны его использовать)

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

Flexbox исправляет это. Это дает вам реальный контроль над тем, как элементы сидят, растягиваются, сокращаются и обертывают внутри контейнера, без постоянной регулировки края и прокладки. В этом руководстве мы разберемся, как работает Flexbox, как он упрощает макеты и как использовать его визуально внутри Divi 5, не написав ни одной строки кода.

Что такое Flexbox

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

Должны ли элементы расти, чтобы заполнить дополнительное место? Установка, когда пространство плотное? Должны ли они завершить следующую линию, когда они больше не подходят? Вы делаете этот выбор с помощью набора свойств, которые вы применяете к контейнеру и его детям. Вот как вы решаете, как ваш макет должен реагировать.

Давайте возьмем практические примеры, чтобы понять это. Скажем, у вас есть три кнопки в горизонтальном ряду. С помощью Flexbox вы можете сосредоточить их все равномерно внутри контейнера:

Решите, что средняя кнопка должна занять больше места, чем другие:

Или вы можете хотеть, чтобы кнопки были автоматически складываться, когда экран становится более уже:

Flexbox делает все это возможным благодаря простым свойствам, таким как Levify-Content, Flex-WRAP и Flex-Row.

Кроме того, он позволяет вам контролировать, как расположены элементы, выровненные по разным осям и визуально упорядочен, не изменяя их фактическое положение в строителе. Вы можете сосредоточить содержимое, подтолкнуть его к верхней или нижней части контейнера, выровнять один элемент иначе от остальных или даже обратить вскрытие всего порядка в точках останова.

Вы можете подумать: не могу ли я уже сделать это с полями и прокладкой?

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

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

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

Как гибкое направление влияет на выравнивание

Одним из первых вариантов, которые вы делаете в Flexbox, является направление, в котором должны течь элементы, будь то в ряду или столбце. Свойство «Гиб-направление» устанавливает это и определяет, как элементы выравниваются, обертывают и помещаются внутри контейнера.

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

Таким образом, основная ось проходит влево направо, когда направление установлено в строке. Это означает, что оправдание контента перемещает элементы по всему строку, а Align-Items контролирует, как они выравнивают вертикально в этом ряду.

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

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

Синтаксис и общие свойства Flexbox

Переключите свойство дисплея контейнера с блока на Flex, чтобы активировать Flexbox. Когда вы делаете это, браузер начинает обращаться с внутренними элементами, такими как ряды, кнопки, карты или значки в виде изгиб.

.container {
display: flex;
}

Оттуда вы используете разные свойства Flexbox для управления поведением. Например, Levify-Content решает, как элементы расположены вдоль основной оси (по умолчанию это установлено на горизонтальное управление: ROW) . Используйте Flex-Start, чтобы выравнивать элементы влево, Flex-end, чтобы подтолкнуть их направо, в центре их центра, или между пространством и пространством, чтобы равномерно распределить их.

По умолчанию Flexbox пытается подготовить все элементы на одной линии. Если их слишком много, они будут сжиматься, чтобы соответствовать на основе их настройки сгибания, и если они не могут сжиматься достаточно, они могут переполнить контейнер. Чтобы предотвратить это, включите Flex-WRAP, чтобы элементы переместились на новую линию вместо того, чтобы втиснуться в одну.

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

Если вам любопытно посмотреть, как они действительно работают игривым, практическим образом, попробуйте Flexbox Froggy. Это забавная маленькая игра, в которой вы применяете настоящий код Flexbox, чтобы перемещать лягушек вокруг пруда. Попутно вы перестаете догадываться и начинаете распознавать именно то, что делает каждое свойство.

Зачем использовать Flexbox

К настоящему времени вы видели, как Flexbox меняет, как макеты реагируют на пространство. Но реальная ценность исходит от того, что этот сдвиг позволяет вам делать легче. Flexbox превращает упорные проблемы макета в простые, многоразовые узоры.

• Упрощенное выравнивание: свойства, такие как оправданный контент и центральный центр или пространственные элементы, не полагаясь на подарки или вспомогательные классы.
• Отзывчивый по умолчанию: предметы естественным образом выращивают, сокращаются или оберните в зависимости от их пространства. Это приводит к более чистым макетам, которые адаптируются без дополнительных точек останова.
• Автоматическое расстояние и размеры: вы контролируете, как элементы делятся пространством с такими свойствами, как Flex-Grow, Flex-Shrink и Flex-Basis, делая жидкость макета вместо фиксированной.
• Перезаряение без изменения HTML: вы можете изменить визуальный порядок элементов, не касаясь HTML. Структура остается чистой, в то время как макет регулирует для разных экранов.
• Меньше взломов макета: вам больше не нужны плавания, Clearfixes или сценарии сопоставления высоты. Flexbox заменяет их с современными, надежными опциями.

И поскольку он поддерживается во всех основных браузерах, Flexbox не только эффективен, но и надежным. Это делает его современным, более надежным выбором для реальных проектов.

Почему Flexbox часто лучше, чем сетка

Grid - еще одна популярная система макета, такая как Flexbox. Тем не менее, оба построены для различных вариантов использования.

Например, сетка предназначена для двухмерных макетов, где вам нужно контролировать как ряды, так и столбцы. Витрины продуктов, галереи изображений и редакционные макеты в журнале являются примерами сетки, так как они полагаются на плотно выровненную структуру по обеим осям.

Вы начинаете с определения сетки: сколько строк и колонн есть, и насколько широким или высоким должен быть каждый. Затем вы помещаете каждый элемент в эту структуру.

Это сетка. Элементы выровнены по обеим осям: ряды и столбцы, с фиксированным интервалом и пропорциями.

Но не каждый макет нуждается в таком уровне планирования.

Большую часть времени разделы пользовательского интерфейса текут в одном направлении. Ряды карт, значок плюс-текстовые блоки и навигационные ссылки следуют одной оси, а не на две. Именно здесь подходит Flexbox.

В макете Flexbox карты выровнены в одном направлении (строка или столбце), а затем обернуты и расположены на основе правил контейнера.

Вам не нужно заранее отображать весь макет. Вы просто говорите контейнеру, как элементы должны вести себя вдоль одной оси, и Flexbox обрабатывает его.

Таким образом, если вы не проектируете что -то, что действительно зависит от жесткой сетки, Flexbox часто будет более быстрым, более простым и более гибким выбором.

Flexbox в Divi 5

Все, что мы узнали до сих пор о Flexbox, отлично, но написание пользовательских CSS для каждого настройки макета - это не то, что вы хотите сделать, особенно если вы создали свой сайт, используя визуальный строитель, такой как Divi.

Вот почему Divi 5 теперь включает в себя встроенные элементы управления Flexbox. Вам больше не нужно переключать вкладки или добавлять CSS вручную. Все это и даже расширенное поведение макета теперь встроено в визуальный строитель, за исключением кодирования и подавляющего бэкэнда.

Подписаться на наш канал на YouTube

Короче говоря, не нужно помнить синтаксис или имена свойств, просто выберите то, что вы хотите от интерфейса. Нажмите на любой раздел, строку или столбец, отправляйтесь на вкладку «Дизайн», и под макетом> Стиль макета , обязательно используйте Flex.

Это открывает новый набор элементов управления макетами. Это основные свойства Flexbox, которые вы обычно пишете в CSS, но теперь в качестве кликабельных параметров. Вы можете проверить изменения в жизни и посмотреть, как реагирует ваш контент.

Так что, даже если вы никогда не записали ни одной строки кода Flexbox, вы ничего не упустите. Divi 5 дает вам тот же контроль макета визуально с тем же уровнем управления, но гораздо больше.

Узнайте все о системе Flexbox от Divi 5

Новые строки структуры

Почему диви, когда у других веб -строителей тоже есть? В то время как многие веб -строители предлагают Flexbox в качестве опции макета, Divi 5 подходит к нему по -разному. Это не функция, наложенная поверх существующей системы; Теперь это ядро того, как работает строитель.

Весь двигатель макета был восстановлен с нуля с Flexbox на основе. В результате поведение макета кажется более последовательным и предсказуемым, потому что оно следует намеренно разработанной логике макета.

Например, когда вы добавляете новый раздел или строку в Divi 5, вы сразу заметите что -то другое. Новые структуры. Каждый теперь работает на Flexbox по умолчанию, что означает, что выравнивание, интервал и отзывчивость обрабатываются более разумно с самого начала.

Вам не нужно будет включать Flex для новых элементов дизайна, которые вы добавляете. И когда вы это сделаете, при редактировании более старой макета инструменты выравнивания и интервалов становятся мгновенно проще в управлении.

Вы также можете изменить то, как расположены столбцы внутри строки, используя структуру столбца изменения.

Это открывает панель, где вы можете выбрать новую структуру столбца. Макет обновляется немедленно, когда Flexbox автоматически регулирует интервал и выравнивание.

Попробуйте добавить несколько различных типов строк и изменить размер экрана. Вы увидите, как все меняется и адаптируется, не сломавшись. Это сила Flexbox, выпеченного в строитель, делает Divi 5 более надежным и современным вариантом.

Как работает Flexbox в Divi 5

Если вы начинаете работу, вот быстрое прохождение, которое поможет вам чувствовать себя уверенно при использовании Flexbox в Divi 5.

Управление макета

Когда вы переключаете раздел, строку или столбец на гибкую макет, новый набор элементов управления макетами появляется в настройках Design> Mayout . Они дают вам управление Visual Flexbox рядом с вашими обычными вариантами.

• (1) Стиль макета: здесь вы активируете Flex. После установки появляются другие опции, такие как направление, выравнивание и расстояние.
• (2) Горизонтальный разрыв: добавляет пространство между элементами слева направо.
• (3) Вертикальный разрыв: устанавливает пространство между сложенными элементами при использовании макетов столбцов.
• (4) Направление макета: изменяет поток, строку, столбец или обратные направления, чтобы элементы могли выровнять бок о бок или сверху внизу.
• (5) Обосновайте контент: выравнивает элементы вдоль основной оси. Вы можете сосредоточить их, подтолкнуть их в сторону или распределить.
• (6) Выравнивание предметов: выравнивает предметы вдоль поперечной оси, что полезно при расположении предметов вертикально в горизонтальном ряду.
• (7) Обертывание макета: это позволяет элементам перемещаться к следующей строке, когда пространство заканчивается. Полезно при строительстве макетов, которые отвечают на размер экрана, а не ломаются.

Допустим, у вас есть бренд с логотипами, и они хотите, чтобы они были больше. С включенным направлением сгибания , чтобы включить обертывание строк и макета , они автоматически будут проходить в два ряда, когда нет места.

Выравнивающие элементы в двух рядах теперь легко без медиа -запросов или ручного обходного пути.

Управление и размеры столбцов

Оказавшись в строке с поддержкой гибкой, каждый столбец имеет новую настройку в разделе «Дизайн»> «Размеры» . Это определяет, сколько места занимает столбец на основе его содержания и окружения.

Вы можете выбрать Sharink, чтобы соответствовать (что делает колонку только таким широким, как его содержание) или расти, чтобы заполнить (что растягивает колонну, чтобы занять дополнительное пространство).

Например, если вы хотите, чтобы текстовый столбец чувствовал себя более заметным и имел элементы карт, которые обнимают их контент, вы бы установили карты, чтобы они подойдут, и текст для роста для заполнения.

Управление заказа

Другим мощным, но часто упускаемым из виду инструмент является настройкой заказа на вкладке Content . Это позволяет визуально переупорядочить столбцы и модули, не изменяя структуру макета в каркасе или слоях.

Скажем, вы хотите, чтобы конкретный модуль появился первым на мобильном телефоне, но второй на рабочем столе. Вы можете назначить разные значения заказа в каждой точке останова.

Практические случаи использования Flexbox

Давайте посмотрим на еще несколько вариантов использования Flexbox, которые теперь упрощены с помощью Divi 5.

1. вертикально выравнивает все с гибкой

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

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

Вот и все. Макет автоматически регулируется по точкам останова, и ваш контент всегда остается в сладком месте. То, что раньше принимало гимнастику CSS, теперь является всего лишь пара кликов внутри строителя.

2. Выровняйте высоту карты автоматически

Вы, вероятно, столкнулись с этой проблемой раньше. Вы создаете ряд карт, такую как раздел Blurb, и все выглядит хорошо, пока у одного элемента не будет больше текста, чем у других. Внезапно ваш макет кажется неровным. Некоторые колонны растягиваются выше, другие остаются короткими, а дизайн теряет равновесие.

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

Это также остается отзывчивым. На более мелких экранах столбцы проникают в новые строки без необходимости дополнительных настроек, и поведение одинаковой высоты продолжает применяться.

3. автоматически обернуть кнопки через точки останова

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

Включите гибкую компоновку и включите обертывание макета в представление ноутбука . Вот и все. Кнопки автоматически завершатся на несколько линий на меньших экранах, не разбивая макет.

Кнопки сохраняют расстояние и выравнивание на больших экранах и естественным образом накладываются на таблетки и телефоны. Вы даже можете точно настроить их выравнивание, используя оправдание контента и между ними между ними между ними, так что все выглядит чисто и намеренно при любом размере.

Divi + Flexbox просто имеет смысл

Вы видели, как работает Flexbox, как Divi 5 делает его визуальным, и как распространенные головные боли макета теперь занимают секунды вместо часов. Divi 5 не просто поддерживает Flexbox - он построен вокруг него. Каждый раздел, строка и столбец готов вести себя, как и следовало ожидать, без пользовательских CSS.

Flexbox - это не просто вариант, если вы проектируете с Divi 5. Это умнее дефолта. Чистые планировки, меньше обходных путей и отзывчивый контроль, запеченные прямо в строитель. Это сдвиг, и это то, что готовит вас к будущему веб -дизайна.