Поделиться через

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

  • Статья

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

Добавление гибкого контейнера

Чтобы добавить flex-контейнер на свою веб-страницу:

  1. Откройте студию дизайна для редактирования содержимого и компонентов страницы.

  2. Выберите страницу, которую нужно изменить.

  3. Выберите раздел, в который вы хотите добавить компонент гибкого контейнера.

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

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

Вы также можете оформить и настроить свой гибкий контейнер.

Редактирование гибкого контейнера

После добавления Flex-контейнера выберите элемент управления Flex-контейнером, чтобы открыть панель свойств для редактирования Flex-контейнера.

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

Свойства дизайна

В студии дизайна можно настроить следующие свойства дизайна:

Добавить flex-контейнеры в HTML

Вы также можете добавлять flex-контейнеры непосредственно в HTML-код вашей веб-страницы с помощью Visual Studio Кода для Интернета (предварительная версия).

Чтобы дизайн-студия распознавала и разрешала редактирование на холсте пользовательских div-элементов Flexbox, примените к ним CSS класс "ppFlexContainer".

Внимание!

Без класса ppFlexContainer дизайн-студия не распознает пользовательские div-элементы как компоненты flex-контейнера, и вы не сможете редактировать их в дизайн-студии.

<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
    <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
        <div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
            <div class="ppFlexContainer">
                <button type="button" class="button1">Button</button>
                <button type="button" class="button1">Button</button>
            </div>
        </div>
    </div>
</div>

Создание пользовательских макетов

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

Настройте макет карточка

Настроить плавающий Карточки