Руководство для начинающих по свойствам Flexbox CSS

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

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

Что такое CSS Flexbox?

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

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

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

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

Традиционный метод делает выбор случайного расстояния: 10px здесь, 20px там, 40px где -то еще. Эти рассеянные значения вызывают несоответствия и затрудняют понять, какое расстояние применяется. Свойства разрыва удаляют догадки, используя одно согласованное правило для всех элементов.

Быстрое руководство по гибкомубору и его свойствам

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

Дисплей: Flex

Превратите любой элемент в гибкий контейнер, добавив дисплей: Flex. Его прямые дети становятся гибкими предметами. Элементы выстраиваются в строке по умолчанию вместо того, чтобы укладывать как стандартные элементы блока. Ваши головные боли между расстоянием исчезают, потому что изгибные элементы соответствуют различным правилам, чем обычные элементы. Теперь контейнер контролирует, как ведут себя дети (или предметы), и вы получаете предсказуемые результаты вместо обычных сюрпризов CSS.

гибкое направление

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

и столбец, чтобы сложить элементы вертикально.

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

Этот выбор устанавливает вашу центральную ось, которая влияет на то, как работают другие свойства.

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

оправдать контент

Это свойство распределяет оставшееся пространство вдоль вашей центральной оси. Предметы берут то, что им нужно, а затем это свойство обрабатывает остаток. Используйте Flex-Start, чтобы сбивать все в начале, в центре, чтобы кластер элементы посередине, и Flex-End, чтобы все поставить к концу. В то же время космический промежуток используется для распределения предметов с равными пробелами. Значение пространства дает каждому элементу равное пространство с обеих сторон, в то время как пространство-даже создает идентичные промежутки везде.

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

Он обрабатывает выравнивание по поперечной оси. Для горизонтальных макетов это означает вертикальное выравнивание. Для вертикальных макетов он управляет горизонтальным позиционированием. Он поддерживает такие значения, как Flex-Start, Center, Flex-End, растяжение и базовый уровень (не значения Space-*). Установите его в центр, а предметы выравниваются в середину независимо от их высот. Значение по умолчанию растягивается: элементы растягиваются, чтобы заполнить перекрестный размер контейнера. Если поперечный размер контейнера является автоматическим, он часто равняется самым высоким предметам, поэтому элементы кажутся равными по высоте.

flex-wrap

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

зазор

Это добавляет пространство между предметами, не связываясь с краями. Установите Gap: 20px, и каждый элемент получает последовательное расстояние. Вы можете установить разные горизонтальные и вертикальные пробелы, если это необходимо. Пространство появляется только между предметами, а не по краям. Это превосходит расчетли, которые ломаются, когда вы меняете макеты позже.

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

Divi 5 делает Flexbox Visual

Как мы установили, обучение Flexbox - это одно; Вспоминая то, что делает оправдание: Space-Betweed Международный,-это другое. Вы тратите больше времени на печатание свойств, чем проектирование. Вместо того, чтобы писать CSS, вы используете кнопки и ползунки, которые точно показывают, что каждый вариант делает в Divi Builder. Divi 5 приносит это в Flexbox, превращая абстрактные концепции в простые, кликируемые элементы управления.

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

Что такое Диви?

Divi-это строитель веб-сайтов, который заставляет WordPress работать для людей, которые хотят красивых сайтов без хлопот.

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

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

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

Divi AI помогает вам быстро построить

Однажды, создание тем и шаблонов означало жонглирование разными приложениями для копирования, изображений и дизайнерских идей. Divi AI собирает все, что вам нужно, в один унифицированный интерфейс: прямо там, где вы создаете свои веб -сайты.

Скажите, что вам нужен текст, и он пишет.

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

Кроме того, он обрабатывает код и создает новые разделы, когда вы спрашиваете.

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

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

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

Divi 5: будущий защитник веб-сайтов

Divi 5 восстанавливает всю структуру с нуля.

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

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

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

Что нового в Divi 5

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

Вот пример того, что вы получаете:

• Система макета Flexbox: визуальные элементы управления для выравнивания, расстояния и позиционирования. Элементы могут автоматически расти, сокращаться или обернуться к новым линиям. Работает с вложенными рядами и группами модулей для сложных макетов без кода.
• Вложенные ряды: положите ряды в другие ряды с бесконечным гнездованием. Создайте сложные структуры макета без обходных путей.
• 17 Модули Woocommerce: Полные страницы продукта, включая галерею продуктов, добавление в корзину, обзоры, рейтинги, уведомления о запасах, панировочные сухари, мета -мета, повышения и многое другое. CART и CALCHOUT модули скоро появятся.
• Система взаимодействий: создание всплывающих окон, переключателей, анимации прокрутки, эффектов движения мыши и триггеров Viewport. Смешайте несколько триггеров для сложных поведений, таких как рекламные баннеры, которые исчезают после прокрутки.
• Адаптивный редактор: позволяет просматривать, редактировать и сбросить адаптивные парящие и липкие состояния для любых настроек одновременно без переключения режимов просмотра для более быстрого, более точного и менее загроможденного редактирования.>
• Строитель Loop: создайте динамический контент, который вытягивает из вашей базы данных. Создайте пользовательские макеты после продукции, сетки продуктов и повторяющиеся разделы. Работает с продуктами WooCommerce.
• Опционеры PRESPETS: Создайте повторно используемые стили для типографии, границ, теней и фонов. Примените их по любому совместимому элементу, а не только для отдельных модулей.
• Переменные дизайна: установите глобальные значения для цветов, шрифтов, расстояния, чисел, изображений и текста. Измените свой основной цвет один раз, и он будет обновляться везде автоматически.
• Усовершенствованные единицы CSS: используйте функции Clamp (), Calc (), min () и max () через визуальные элементы управления. Не требуется код для отзывчивой типографии и расчетов расстояния.
• Относительные цвета и HSL: создайте математически красивые цветные системы. Постройте вариации цвета, которые автоматически поддерживают гармонию при изменении базового цвета.

И еще больше! Наша команда разработчиков продолжает добавлять функции ~ каждые две недели, готовясь к публичному бета -выпуску.

Быстрый обзор настройки Flexbox от Divi 5

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

1. Настройка первой сгибки

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

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

2. Понимание направления, потока, выравнивания

Поле вашего направления макета определяет, где попадают предметы. Рука - это настройка по умолчанию, которая заставляет элементы выстроиться в горизонтали.

Переключитесь на столбец, а элементы стекают элементы вертикально, как обычные веб -макеты.

Оба варианта поставляются с обратными версиями, которые полностью переворачивают заказ.

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

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

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

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

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

Если вы выбрали макет колонны, он обрабатывает горизонтальное выравнивание.

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

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

3. Распространение вещей с контролем зазоров

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

Установите свой горизонтальный разрыв на 20px, и в каждом столбце будет точное расстояние.

Измените вертикальный разрыв на 20px, и все пробелы будут мгновенно обновляться.

Divi 5 поддерживает передовые подразделения CSS, такие как длины и проценты Viewport. Вы можете использовать Clamp () для адаптивных пробелов, которые масштабируются между размерами экрана. Функция Calc (), которая объединяет такие единицы, как Calc (2Rem + 10px), также поддерживается.

Элементы управления разрывами здесь также поддерживают переменные проектирования. Добавьте числовую переменную, называемую «горизонтальный разрыв столбца» с зажимом (16px, 2vw, 32px) в качестве значения. Примените эту переменную к элементам управления GAP на вашем сайте.

Если вы хотите более жесткий интервал позже, отредактируйте переменную; Каждый пробел будет мгновенно обновлять.

4. Управление тем, как элементы завершаются

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

Обернуть реверс делает то же самое, что и обычная упаковка, но переворачивает направление. Новые линии появляются над предыдущими вместо ниже.

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

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

Аналогичным образом, для направления столбца параметры для горизонтального выравнивания.

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

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

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

5. Работа в разных размерах экрана

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

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

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

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

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

6. Создание предварительных настроек групп опционов

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

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

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

Начните работать с Flexbox Divi 5 сегодня

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

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

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