Používanie flexibilných kontajnerov na zoskupovanie a zarovnávanie komponentov

Flex Container je komponent rozloženia, ktorý vám pomáha navrhovať a vytvárať rozloženia sekcií na vašej webovej stránke. Flex kontajnery môžete použiť na zoskupovanie komponentov, ako sú tlačidlá, text, obrázky a iné kontajnery.

Pridanie flexibilného kontajnera

Ak chcete na svoju webovú stránku pridať flexibilný kontajner:

1. Otvortedizajnové štúdiu na úpravu obsahu a komponentov stránky.

2. Vyberte stranu, ktorú chcete upraviť.

3. Vyberte sekciu, do ktorej chcete pridať komponent flexibilného kontajnera.

4. Umiestnite kurzor myši nad ľubovoľnú upraviteľnú oblasť plátna a potom z panela komponentov vyberte komponent flex kontajner .

Skupinu komponentov môžete vytvoriť pridaním ďalších komponentov, ako sú napríklad tlačidlá tlačidlá a text, do vášho flexibilného kontajnera.

Flex kontajner si môžete tiež upravovať a konfigurovať.

Úprava flexibilného kontajnera

Po pridaní flexibilného kontajnera vyberte ovládací prvok flexibilného kontajnera, čím otvoríte panel vlastností a upravíte flexibilný kontajner.

Nehnuteľnosť	Opis
Návrh	Zmeňte vlastnosti návrhu aby ste prispôsobili vzhľad vášho flexibilného kontajnera.
Upraviť pozadie	Zmeňte farbu pozadia podľa farebnej palety pre vybratú šablónu štýlu. Môžete tiež pridať obrázok na pozadí a upraviť veľkosť a polohu.
Zmena smeru a zarovnania	Zarovnajte a zmeňte smer obsahu vo flexibilnom kontajneri.
Ostatné	Duplikujte sekciu, presuňte ju nahor alebo nadol v rámci stránky alebo ju úplne odstráňte.

Vlastnosti dizajnu

V dizajnovom štúdiu je možné konfigurovať nasledujúce vlastnosti dizajnu:

• Smer
• Zarovnať
• Zarovnanie položiek
• Zarovnanie obsahu

• Zarovnanie seba
• Medzera
• Flexibilný rast

• Flexibilné zmršťovanie
• Flexibilný základ
• Flexibilná objednávka

Pridanie flexibilných kontajnerov do HTML

Flex kontajnery môžete tiež pridať priamo do HTML kódu vašej webovej stránky pomocou funkcie Visual Studio Kód pre web (ukážka).

Aby dizajnérske štúdio rozpoznalo a umožnilo úpravu vlastných divov flexboxu na plátne, použite na ne triedu „ CSS ppFlexContainer“.

Dôležité

Bez triedy ppFlexContainer dizajnérske štúdio nerozpozná vlastné prvky div ako komponenty flexibilného kontajnera a v dizajnom štúdiu ich nie je možné upravovať.

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

Vytvorte si vlastné rozloženia

Na vytvorenie vlastných rozložení môžete použiť viacero flexibilných kontajnerov. Tu je len niekoľko príkladov toho, čo môžete urobiť.

Nastavenie rozloženia karty

Nastavenie plávajúcich kariet