5 ловушек, которых следует избегать при переходе на систему макета Flexbox от Divi 5

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

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

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

Подводная плата № 1: заставляя гибкость в блочное мышление

→ Flex требует новой ментальной модели, а не только новых элементов управления.

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

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

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

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

Каждая настройка и опция в пользовательском интерфейсе напрямую соответствуют фактическим свойствам CSS, добавленными в каждый контейнер.

Подводная камень № 2: Не зная, как Flex Cruink & Rose Fit в размерах детских элементов

→ без усадки и роста, ваши макеты не будут вести себя, как и ожидалось.

С гибкой в Divi 5 дочерние модули могут иметь набор ширины или высоты. Кроме того, они могут сократить или заполнять (ширину или высоту) в зависимости от комнаты внутри контейнера. В этом примере текстовые модули устанавливаются на 45% ширину, что означает, что два модуля будут соответствовать горизонтально, как если бы в одной строке. Но если мы добавим нечетное количество текстовых модулей, мы не хотим, чтобы было пустое пространство. Мы можем установить эти модули для роста гибкой, а затем, когда есть доступное пространство подряд, эти модули будут расти для заполнения.

Divi обнажает такие элементы управления, как «Grow to Fill», «Sharink to Fit» и пользовательские настройки на дочерних элементах в любом гибком контейнере (дочерний элемент> Дизайн> Размер> Расти, чтобы заполнить, уменьшаться в соответствии с подходящими или пользовательскими ).

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

Сокращение подходит и растут, чтобы заполнить (в дополнение к гибкому базису) также очень удобны, помогая вам создать отзывчивые макеты. Чтобы блочные макеты часто были отзывчивыми, вам нужно будет настроить несколько точек останова и ширины/высот в каждой из этих точек останова. Flexbox может извлечь выгоду из уникальных настроек в различных точках останова, но, как следует из названия, он очень гибкий . Это особенно относится при использовании зажима () для типографии. Используя оба из них вместе, наряду с другими относительными единицами CSS, нарушает вашу постоянную потребность в точках останова.

Давайте посмотрим на другой пример, построенный с Flexbox.

Контейнер столбца (родитель) установлен на сгиб с помощью этих настроек:

• Горизонтальный и вертикальный разрыв : 30px (это может использовать Calc или зажим, чтобы быть немного лучше) даже)
• Направление макета : реверс строки (объяснение этого решения в ловушках № 4)
• Оправдание контента : центр
• Согласовать предметы : в центре
• Flex Prap : обернуть обратное (объяснение этого решения в подводной лодке № 4)

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

• Модуль заголовка
  • Размер текста : зажим (2Rem, 1,5Rem + 2VW, 3Rem)
  • Ширина : Авто
  • Размер гибких
• Разделитель модуль
  • Ширина : Авто
  • Размер гибки : сжимается и растут, чтобы заполнить
• Текстовый модуль
  • Размер текста : зажим (0,9375Rem, 0,75Rem + 0,4VW, 1Rem)
  • Ширина : Авто
  • Размер гибких

С направлением сгиба строка детские элементы выстраиваются в горизонтали, когда есть место. Текстовый модуль самый широкий, поэтому он заполняет свою собственную строку. Затем модуль разделителя растет или сжимается, поскольку он имеет автоматическую ширину и включенные как гибкие, так и гибкие сдвинк. Модуль заголовка использует только свою внутреннюю ширину и остается компактной. Эта настройка дает полностью отзывчивый макет без каких -либо точек останова.

Подводная камень № 3: не ломать маржинальную привычку

→ Вместо этого используйте GAP - он умнее, чище и сделан для Flex.

В Divi 4 визуальные разрывы между модулями и другими элементами требовали поля (вертикальные зазоры через нижний край, горизонтальные зазоры через левый/правый край). Когда разрыв был применен к расстоянию между столбцами, у Divi 4 была настройка желоба, но он не занимал стандартные значения CSS, и он фактически использовал маржу для боковых сторон столбцов для создания пробела. Это то же самое, что блокировки макеты все еще работают. Но теперь есть более чистый, более эффективный подход.

Система Flexbox's Divi 5 представляет элементы управления строк и вертикальным зазором в разделе «Дизайн»> «Макет» > «Горизонтальный» и «Вертикальный разрыв» . Эти карты в CSS GAP и ROW. Вертикальные промежутки применяются автоматически к каждой «гибкой строке», когда элементы завершаются на новую линию. То же самое относится и к горизонтальным пробелам: всякий раз, когда есть детские элементы рядом друг с другом, будет присутствовать разрыв. Эти настройки GAP также принимают любую положительную единицу CSS, поэтому вы можете использовать Clamp () или Calc (), чтобы создать адаптивные размалы зазоров.

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

Подводные камни № 4: Подводные управления обратным потоком и упорядочением

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

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

Переключение направления обратного направления под направлением макета позволяет обратить вспять порядок элементов в направлении строки или столбца. Чтобы снова посмотреть на пример макета из подводных камней № 2, мы можем понять, почему мы хотим этого. В слоях вы можете видеть, что порядок детских элементов - это заголовок, а затем перегородка и, наконец, текстовый модуль. Семантически, наличие заголовка (в этом случае H2) в верхней части стека имеет смысл для читателей экрана. Тем не менее, заголовок достаточно визуально, будь то первым или последним, поскольку мы используем визуальную иерархию с его размером текста.

Использование строки обратно в качестве направления гибки и обертывания реверса сохраняет HTML -упорядочение (важно для доступности), а также позволяет мне разрабатывать вещи, как мы их предвидим.

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

Подводная плата № 5: Забыть в установлении обертывания

→ Flex не сломается на новые ряды, если вы не скажете.

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

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

Не торопитесь, чтобы Master Flexbox

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

Из -за этих различий мы настоятельно рекомендуем вам потратить час, используя интерактивный учебный инструмент для понимания Flexbox. Тот, который прост в использовании и действительно делает трюк, это flexboxfroggy.com. Это проведет вас через 24 постепенно сложные проблемы, обучая вас всем основаниям. Это гораздо лучше, чем сумодомальная крема в течение часа.

Используйте Flex с Divi 5 сегодня

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