Paindlike konteinerite kasutamine komponentide rühmitamiseks ja joondamiseks

Flex Container on paigutuskomponent, mis aitab teil oma veebilehel jaotiste paigutusi kujundada ja koostada. Paindlike konteinerite abil saate rühmitada komponente, nagu nupud, tekst, pildid ja muud konteinerid.

Paindliku ümbrise lisamine

Paindliku konteineri lisamiseks veebilehele toimige järgmiselt.

1. Avage disainistuudio, et redigeerida oma lehe sisu ja komponente.

2. Valige leht, mida soovite redigeerida.

3. Valige jaotis, kuhu soovite paindliku konteineri komponendi lisada.

4. Hõljutage kursorit mis tahes redigeeritava lõuendi ala kohal ja valige seejärel komponendi paneelilt painduva konteineri komponent.

Saate luua komponentide rühma, lisades oma paindlikku konteinerisse muid komponente, nagu nupud ja tekst.

Samuti saate oma paindliku konteineri kujundada ja konfigureerida.

Paindliku konteineri redigeerimine

Pärast painduva konteineri lisamist valige paindliku konteineri juhtelement, et avada atribuutide riba painduva konteineri redigeerimiseks.

Vara	Kirjeldus
Kujundus	Muutke oma kujunduse atribuute, et kohandada oma paindliku konteineri välimust.
Redigeeri tausta	Muutke taustavärvi vastavalt valitud stiilimalli värvipaletile. Saate ka lisada taustapildi ning reguleerida suurust ja asetust.
Muutke suunda ja joondust	Joondage ja muutke painduva konteineri sisu suunda.
Muud	Jaotise dubleerimine, lehel üles- või allapoole nihutamine või jaotise täielik kustutamine.

Disaini omadused

Disainistuudios saab konfigureerida järgmisi disainiomadusi:

• Suund
• Õigustada
• Üksuste joondamine
• Sisu joondamine

• Joonda ennast
• Gap
• Painduv kasvab

• Painduv kokkutõmbumine
• Paindlik alus
• Paindlik tellimus

Paindlike konteinerite lisamine HTML-i

Paindlikke konteinereid saate lisada ka otse oma veebilehe HTML-i veebikoodiga Visual Studio (eelvaade).

Selleks, et disainistuudio tuvastaks ja lubaks kohandatud flexboxi div-de lõuendil redigeerimist, rakendage CSS neile klass "ppFlexContainer".

Oluline

Ilma klassita ppFlexContainer ei tunne disainistuudio kohandatud div-e paindlike konteinerikomponentidena ära ja te ei saa neid disainistuudios redigeerida.

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

Kohandatud paigutuste loomine

Kohandatud paigutuste loomiseks saate kasutada mitut paindlikku konteinerit. Siin on vaid mõned näited selle kohta, mida saate teha.

Kaardi paigutuse seadistamine

Ujuvate kaartide seadistamine