Naudokite lanksčius konteinerius komponentams grupuoti ir lygiuoti

"Flex Container" yra išdėstymo komponentas, padedantis projektuoti ir kurti skyrių maketus tinklalapyje. Galite naudoti lanksčius konteinerius, kad sugrupuotumėte komponentus, pvz., mygtukus, tekstą, vaizdus ir kitus sudėtinius rodinius.

Lankstaus konteinerio įtraukimas

Norėdami įtraukti lankstų konteinerį į savo tinklalapį:

1. Atverkite dizaino studiją, kad galėtumėte redaguoti savo puslapio turinį ir komponentus.

2. Pasirinkite puslapį, kurį norite redaguoti.

3. Pasirinkite skyrių, į kurį norite įtraukti lankstaus konteinerio komponentą.

4. Užveskite pelės žymeklį virš bet kurios redaguojamos drobės srities, tada komponentų skydelyje pasirinkite lankstaus konteinerio komponentą .

Galite sukurti komponentų grupę į lankstų konteinerį įtraukdami kitų komponentų, pvz., mygtukų ir teksto.

Taip pat galite formuoti ir konfigūruoti savo lankstų konteinerį.

Lankstaus sudėtinio rodinio redagavimas

Įtraukę lankstų konteinerį, pasirinkite lankstaus konteinerio valdiklį, kad atidarytumėte ypatybių juostą ir redaguotumėte lankstų konteinerį.

Nuosavybė	Aprašas
Dizainas	Pakeiskite dizaino ypatybes , kad pritaikytumėte lankstaus konteinerio išvaizdą.
Redaguoti foną	Keiskite fono spalvą, atsižvelgdami į pasirinkto stiliaus šablono spalvų paletę. Taip pat galite įtraukti foninį vaizdą ir koreguoti jo dydį bei padėtį.
Krypties ir lygiavimo keitimas	Sulygiuokite ir pakeiskite turinio kryptį lankstiame konteineryje.
Kita	Dubliuokite skyrių, perkelkite jį aukštyn arba žemyn puslapyje arba visiškai ištrinkite skyrių.

Dizaino savybės

Dizaino studijoje galima konfigūruoti šias dizaino ypatybes:

• Kryptis
• Pateisinti
• Lygiuoti elementus
• Turinio lygiavimas

• Sulygiuokite save
• Tarpas
• Flex auga

• Lankstus susitraukimas
• Lankstus pagrindas
• Lanksti tvarka

Pridėkite lanksčius konteinerius į HTML

Taip pat galite pridėti lanksčius konteinerius tiesiai prie savo tinklalapio HTML naudodami Visual Studio žiniatinklio kodą (peržiūros versija)".

Norėdami, kad dizaino studija atpažintų ir leistų redaguoti pasirinktinius "flexbox" divus, pritaikykite CSS jiems "ppFlexContainer" klasę.

Svarbu

Be ppFlexContainer klasės dizaino studija neatpažįsta pasirinktinių divų kaip flex konteinerių komponentų, o jūs negalite jų redaguoti dizaino studijoje.

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

Pasirinktinių maketų kūrimas

Norėdami kurti pasirinktinius maketus, galite naudoti kelis lanksčius konteinerius. Štai tik keli pavyzdžiai, ką galite padaryti.

Kortelė maketo nustatymas

Slankiojo Kortelės nustatymas