Używanie kontenerów elastycznych do grupowania i wyrównywania komponentów

Flex Container to składnik układu, który pomaga projektować i tworzyć układy sekcji na stronie internetowej. Kontenerów elastycznych można używać do grupowania komponentów, takich jak przyciski, tekst, obrazy i inne kontenery.

Dodawanie elastycznego kontenera

Aby dodać kontener flex do swojej strony internetowej:

1. Otwórz studio projektowe, aby edytować zawartość i komponenty strony.

2. Wybierz stronę, którą chcesz edytować.

3. Wybierz sekcję, do której chcesz dodać komponent kontenera flex.

4. Przesuń kursor nad dowolnym obszarem edytowalnego kanwy, a następnie w panelu składników wybierz składnik elastycznego kontenera.

Możesz utworzyć grupę komponentów, dodając inne komponenty, takie jak przyciski i tekst, do kontenera flex.

Użytkownik może także styliować i konfigurować kontener.

Edytowanie elastycznego kontenera

Po dodaniu kontenera flex wybierz formant flex container, aby otworzyć pasek właściwości i edytować kontener flex.

Właściwości	Podpis
Zaprojektuj	W celu dostosowania wyglądu kontenera możesz zmienić jego właściwości projektowe.
Edytuj tło	Zmień kolor tła zgodnie z paletą kolorów dla wybranego szablonu stylizacji. Możesz również dodać obraz tła i dostosować jego rozmiar i położenie.
Zmiana kierunku i wyrównania	Wyrównywanie i zmienianie kierunku zawartości w kontenerze flex.
Inne	Zduplikować sekcję, przesunąć ją w górę lub w dół na stronie albo całkowicie usunąć.

Projektowane właściwości

W programie Studio projektowe można konfigurować następujące właściwości projektu:

• Kierunek
• Uzasadniać
• Wyrównywanie elementów
• Wyrównywanie zawartości

• Wyrównaj siebie
• Luka
• Uprawa elastyczna

• Elastyczny skurcz
• Podstawa elastycznego czasu pracy
• Zamówienie elastycznego czasu pracy

Dodawanie kontenerów elastycznych w HTML

Kontenery flex można również dodawać bezpośrednio do kodu HTML strony internetowej za pomocą Visual Studio funkcji Code for the Web (wersja zapoznawcza).

Aby studio projektowe rozpoznawało i zezwalało na edycję płótna niestandardowych elementów div flexbox, zastosuj CSS do nich klasę "ppFlexContainer".

Ważne

Bez klasy ppFlexContainer studio projektowe nie rozpoznaje niestandardowych elementów div jako komponentów kontenera flex i nie można ich edytować w programie Design Studio.

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

Tworzenie układów niestandardowych

Do tworzenia niestandardowych układów można użyć wielu kontenerów. Oto zaledwie kilka przykładów tego, co można zrobić.

Konfigurowanie układu karty

Konfigurowanie Karty przestawnych