|
|||||||
Содержание
Введение |
Flex Grid (Гибкая сетка)
О сетке CSS Flex Grid — это новый способ создания гибких макетов на основе CSS Grid Layout (https://www.w3schools.com/css/css_grid.asp). Сетка CSS позволяет веб-разработчикам более легко и единообразно создавать сложные адаптивные веб-макеты в браузерах.  WB14 вводит новый способ
создать
гибкие
расположения (гибкий макет), основанные на новом расположении сетки
CSS. На Панели вставок Flex Grid располагается в разделе Layout (перетащите значок сетки в Окно редактирования.) Примечание.
Чтобы избежать путаницы с существующим (на основе Bootstrap) объектом
«Layout Grid», мы назвали новый объект «Flex Grid», поскольку он
представляет собой комбинацию CSS Grid Layout и Flexbox.
Сетка CSS (CSS Grid) - новая техника в CSS, который позволяет веб-разработчикам создавать сложные адаптивные расположения более легко и последовательно через браузеры. 'Расположение Сетки CSS' ('CSS Grid Layout' ) является двумерной системой сетки, которая является родной к CSS. Идея состоит в том, чтобы разделить веб-страницу (webpage) на колонки и строки. Колонки и строки являются областями, куда Вы можете перетаскивать объекты. Определение расположения может быть различным для каждой контрольной точки. Каждая область сетки поддерживает свое собственное заполнение, выравнивание (flexbox), стиль границ и фона.  Новое
для Flex Grid (Гибкая сетка) - Добавлен «Визуальный редактор сетки».
Улучшено: в инспекторе свойств добавлены свойства фона, границы и тени
для быстрого доступа.Редактор Сетки Объект Flex Grid имеет редактор сетки, поэтому вы можете визуально определить макет (области сетки) и поведение сетки. Редактор сетки открывается при двойном щелчке по сетке. При нажатии на ячейку внутри сетки отобразятся свойства выбранной области (Верхний колонтитул, нижний колонтитул, боковая панель и т. д.). Размеры могут быть установлены в пикселях, процентах или единице ' fr’. Минимальное значение может иметь другую единицу размера в качестве максимального размера. Например, минимальное значение может быть в пикселях, а максимальное-flex factor (fr). 'fr' означает ' часть доступного пространства’. Вы можете думать об этом как о процентах для доступного пространства после того, как вы сняли столбцы/строки фиксированного размера и на основе содержимого. Это позволяет создать макет, который ранее был невозможен со стандартным HTML / CSS.  При нажатии на вертикальный заголовок сетки отобразятся свойства выбранной строки. Высота строки-это либо одно значение, либо диапазон (min/max). Включите useminmax () для активации диапазона. Примечание:
CSS Grid Layout требует современного браузера. Он не работает с Internet Explorer или старыми мобильными браузерами. Пожалуйста посетите https://caniuse.com/#feat=css-grid чтобы проверить текущую поддержку браузера. Чтобы избежать путаницы с существующим объектом макета сетки, мы назвали новый объект " Flex Grid’, потому что это сочетание CSS Grid Layout и Flexbox. Редактор сетки позволяет определить свойства строк и столбцов сетки - количество столбцов и строк в сетке. размер промежутка между столбцами в макете, максимальную ширину гибкой сетки в окне браузера. Если окно браузера шире указанной ширины, то сетка будет центрирована. Шаблоны Выпадающее меню имеет несколько примеров макетов, которые могут быть использованы в качестве шаблона для ваших собственных макетов. При выборе элемента в списке текущие настройки будут перезаписаны. Чтобы очистить имена всех элементов, выберите шаблон "очистить". Выберите шаблон "Stacked", чтобы создать макет stacked на основе текущего макета. Это удобный способ быстрого создания мобильного макета с одинаковыми элементами. Name - Имя Задает имя выбранной области. Это имя должно быть уникальным для каждой области. Например: заголовок, футер, сайдбар, контент, навигация. Только смежные ячейки сетки могут иметь одинаковое имя. Таким образом, не может быть двух боковых панелей (левая / правая) с одинаковым именем. Элемент сетки также может быть пустым. Для создания пустого элемента сетки используйте точку в качестве имени. Column Properties - свойства столбцов При нажатии на горизонтальный заголовок сетки отобразятся свойства выбранного столбца. Ширина столбца-это либо одно значение, либо диапазон (min/max). Включите useminmax () для активации диапазона. Размеры могут быть установлены в пикселях, процентах, единице ' fr’ или авто. Высота строки обычно определяется в "пикселях" для фиксированной высоты или "авто", где высота зависит от содержимого. Подробнее об устройстве сетки Создание адаптивных макетов с помощью Flex Grid Макет может иметь три столбца для сайта, предназначенного для больших экранов настольных компьютеров, два столбца для планшетов (768px) и один столбец для телефонов (480px). Многие веб-сайты являются разновидностью этого типа макета, включая содержание, боковые панели, верхний и нижний колонтитулы. Для создания макетов откройте свойства flexgrid. Макет для планшета создается, устанавливая определенную контрольную точку для той же гибкой сетки. В принципе, мы можем определить совершенно новый макет, но гораздо удобнее повторно использовать одни и те же объекты во всех макетах. Все остальные свойства могут быть разными. Например, макет может иметь разное количество строк/столбцов или панель навигации теперь может быть вверху, а не слева. Для создания макета для планшетов: Добавьте на страницу контрольную точку (точку останова) 768px. Откройте Flex Grid properties (Свойства гибкой сетки) и измените макет - измените ширину столбцов, установите ширину строк. Вы также можете установить значение "auto", в этом случае высота будет определяться содержимым внутри элемента сетки. После настройки столбцов и строк мы можем настроить области сетки (элементы). Самый быстрый способ начать новый макет - сначала очистить все существующие элементы. Для этого выберите "clear grid" (Очистить сетку") в раскрывающемся меню clear grid' in the 'Example' ("пример"). Обратите внимание, что точки указывают, что элементы пусты. Пустые элементы не могут иметь содержимого. Подробнее о создание адаптивных макетов с помощью Flex Grid. Новое в WYSIWYG Web Builder 15  Новая функция: добавлена возможность
сохранять пользовательские
шаблоны flexgrid. Также возможно редактировать или удалять
предопределенные шаблоны.- Новая функция: добавлен «легкий режим». Многие пользователи просили более простой способ управления flexgrid без необходимости работать с Flexbox. В «Простом режиме» flexgrid ведет себя так же, как сетка макета. Для этого в простом режиме автоматически будут установлены следующие настройки: - для элементов блока (полная ширина = true) будет установлено значение flexgrow = 1, flexshrink = 1, flexbasis = 100% - встроенный блок (полная ширина = ложь) будет установлен в flexgrow = 0, flexshrink = 0, flexbasis = пусто Каждый гибкий элемент будет установлен на: - гибкое направление = ряд - режим обтекания = обтекание - выровнять содержимое по горизонтали: слева / по центру / справа - align-items будет заменен на вертикальное выравнивание: top / middle / bottom - align-content: не используется Обратите внимание, что вы всегда можете переключиться обратно в «расширенный режим», если вы знаете, как использовать Flexbox, и вам нужно больше контроля. - Улучшено: редактор Flex Grid теперь отображает предварительный просмотр выравнивания для выбранной области, чтобы получить лучшее представление о результате. - Улучшено: теперь можно переименовывать ячейки сетки, сохраняя содержимое. Обратите внимание, что это будет работать только в том случае, если вы не внесете другие изменения в структуру сетки. Другими словами, если вы хотите изменить имена ячеек, не изменяйте структуру столбца / строки одновременно, иначе у программного обеспечения не будет возможности узнать связь между старым и новым именами. Подробнее  Новое: Гибкая сетка (Flex Grid)Новая функция: добавлен удобный способ определения областей сетки с помощью мыши. Шаг 1: очистить сетку (через шаблон). Шаг 2: нажмите на первую ячейку диапазона и удерживайте кнопку мыши. Шаг 3: переместите курсор мыши в последнюю ячейку и отпустите кнопку мыши. Новый диапазон будет создан автоматически. Повторите эти шаги, чтобы добавить больше областей.  Новое для
Гибкой сетки (Flex Grid)
- добавлены новые параметры высоты, добавлена поддержка событий, анимации, переходов и эффектов движения. И другое. ПодробнееFlex-контейнер (Flex Container) Новая функция: добавлены режимы «Нижний
колонтитул (фиксированный)» и
«Нижний колонтитул (плавающий)». Это позволяет использовать
Flex-контейнер в качестве (фиксированного) нижнего колонтитула. Это
также работает с мастер-страницами.- Новая функция: добавлен режим «Липкий». Липкий Flex-контейнер рассматривается как относительно позиционированный элемент до тех пор, пока он не достигнет вершины, после чего он прилипнет к вершине. Это относительно новая функция HTML и требует современного браузера: Подробнее см. https://caniuse.com/#feat=css-sticky - Новая функция: добавлено «наложение шаблона». Добавьте полупрозрачные оверлеи на фоновое изображение / видео. Последнее обновление: январь
2024 г.
|
||||||
|
|||||||
