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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Направление
• Выравнять
• Выровнять элементы
• Выровнять содержимое

• Выровнять себя
• Промежуток
• Адаптивное расширение

• Адаптивное сжатие
• Основа для адаптивного дизайна
• Адаптивный порядок

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

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

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

Внимание!

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

<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>

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

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

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

Настройка плавающих карточек