Käytä joustavia säilöjä 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 verkkosivulle seuraavasti:
Avaa suunnitteluohjelma sivun sisällön ja komponenttien muokkaamista varten.
Valitse sivu, jota haluat muokata.
Valitse osa, johon haluat lisätä joustavan säilökomponentin.
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ä muita komponentteja, kuten painikkeita ja tekstiä, joustavaan säilöön.
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 flex-säilön ohjausobjekti avataksesi ominaisuuspalkin flex-säilön muokkaamista varten.
| Ominaisuus | Kuvaus |
|---|---|
| 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äiliössä. |
| Muut | Kopioi osa, siirrä se ylös- tai alaspäin sivussa tai poista osa kokonaan. |
Rakenneominaisuudet
Suunnittelustudiossa voi määrittää seuraavat rakenneominaisuudet:
Joustavien säilöjen lisääminen HTML-muodossa
Voit myös lisätä joustavia säilöjä suoraan verkkosivusi HTML-koodiin Code for the Webin (esiversio) avulla Visual Studio .
Jotta suunnittelustudio tunnistaisi ja sallisi mukautettujen flexbox-divien kankaan muokkaamisen, käytä niihin luokkaa CSS "ppFlexContainer".
Tärkeää
Ilman ppFlexContainer-luokkaa suunnittelustudio ei tunnista mukautettuja divejä flex-konttikomponenteiksi, etkä 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ä.