Joustavien säilöjen käyttö komponenttien ryhmittelyyn ja kohdistamiseen

Flex Container on asettelukomponentti, jonka avulla voit suunnitella ja rakentaa osioasetteluja verkkosivullesi. Joustavien säilöjen avulla voit ryhmitellä komponentteja, kuten painikkeita, tekstiä, kuvia ja muita säilöjä.

Flex-säilön lisääminen

Voit lisätä joustavan säilön verkkosivullesi seuraavasti:

1. Avaa suunnitteluohjelma sivun sisällön ja komponenttien muokkaamista varten.

2. Valitse sivu, jota haluat muokata.

3. Valitse osa, johon haluat lisätä joustavan säilökomponentin.

4. Vie hiiren osoitin minkä tahansa muokattavan pohjan alueen päälle ja valitse sitten komponenttipaneelista Flexbox-säilö-osa.

Voit luoda komponenttiryhmän lisäämällä joustavaan säilöön muita komponentteja, kuten painikkeita ja tekstiä.

Voit myös asettaa Flexbox-säilön tyylin ja määrittää sitä.

Flexbox-säilön muokkaaminen

Kun olet lisännyt joustavan säilön, valitse joustavan säilön ohjausobjekti avataksesi ominaisuuspalkin joustavan säilön muokkaamista varten.

Ominaisuus	Description
Suunnittelu	Muuta rakenneominaisuuksia, jotta voit mukauttaa Flexbox-säilön ulkoasua.
Muokkaa taustaa	Muuttaa taustan värin valitun mallissa valitun tyylimallin väripaletin mukaan. Voit myös lisätä taustakuvan ja säätää sen kokoa ja sijaintia.
Suunnan ja tasauksen muuttaminen	Kohdista ja muuta sisällön suuntaa joustavassa säilössä.
Muut	Kopioi osa, siirrä se ylös- tai alaspäin sivussa tai poista osa kokonaan.

Rakenneominaisuudet

Suunnittelustudiossa voi määrittää seuraavat rakenneominaisuudet:

• Suuntaan
• Tasaa molemmat reunat
• Tasaa kohteet
• Tasaa sisältö

• Tasaa tämä kohde
• Aukko
• Flexbox – suurentaminen

• Flexbox – kutistaminen
• Flexbox – pohja
• Flexbox – järjestys

Joustavien säilöjen lisääminen HTML:ssä

Voit myös lisätä joustavia säilöjä suoraan verkkosivusi HTML:ään käyttämällä ominaisuutta Verkon Visual Studio Code (esiversio).

Jotta suunnittelustudio tunnistaisi ja sallisi mukautettujen flexbox-div-elementtien muokkaamisen pohjassa, käytä niihin CSS-luokkaa "ppFlexContainer".

Tärkeää

Ilman ppFlexContainer-luokkaa suunnittelustudio ei tunnista mukautettuja div-elementtejä joustavan säilön komponenteiksi, jolloin et voi muokata niitä suunnittelustudiossa.

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

Mukautettujen asettelujen luonti

Mukautettujen asettelujen luomiseen voi käyttää useita Flexbox-säilöjä. Tässä on muutama esimerkki siitä, mitä voit tehdä.

Korttiasettelun määrittäminen

Kelluvien korttien määrittäminen