Brug flex-containere til at gruppere og justere komponenter

Flex-container er en layoutkomponent, der hjælper dig med at designe og opbygge sektionlayouts på din webside. Du kan bruge flex-containere til at gruppere komponenter, f.eks. knapper, tekst, billeder og andre objektbeholdere.

Tilføj en flex-container

Sådan føjer du en flex-container til din webside:

1. Åbne designstudio for at redigere din sides indhold og komponenter.

2. Vælg den side, som du vil redigere.

3. Vælg den sektion, hvor du vil tilføje flex-containerkomponenten.

4. Hold musen hen over et redigerbart lærredsområde, og vælg derefter komponenten Flex-beholder fra komponentpanelet.

Du kan oprette en gruppe komponenter ved at tilføje andre komponenter, f.eks. knapper og tekst, i din flex-container.

Du kan også tilpasse typografi og konfigurere beholderen.

Redigere en Flex-beholder

Når du har tilføjet en flekscontainer, skal du vælge kontrolelementet flexcontainer for at åbne egenskabslinjen for at redigere flekscontaineren.

Property	Beskrivelse
Design	Rediger dine designegenskaber for at tilpasse beholderens udseende.
Rediger baggrund	Skift baggrundsfarven efter farveskalaen for den valgte skabelon. Du kan også tilføje et baggrundsbillede og justere størrelsen og placeringen.
Skift retning og justering	Juster og rediger indholdsretningen i flex-containeren.
Andre	Dublet af sektionen, flyt den op eller ned på siden eller slet den helt.

Designegenskaber

Følgende designegenskaber kan konfigureres i design studio:

• Retning
• Juster
• Juster elementer
• Juster indhold

• Juster selv
• Afvigelse
• Fleks vækst

• Fleks krympe
• Fleksbasis
• Fleks rækkefølge

Tilføj flex-containerer i HTML

Du kan også tilføje flex-containere direkte i din websides HTML med Visual Studio Code for the Web (forhåndsversion).

For at få designstudio til at genkende og tillade lærred-redigering af brugerdefinerede flexbox-div'er skal du anvende CSS-klassen "ppFlexContainer" på dem.

Vigtige oplysninger

Uden klassen ppFlexContainer genkender designstudio ikke de brugerdefinerede div'er som flex-containerkomponenter, og du kan ikke redigere dem i designstudio.

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

Build brugerdefinerede layouts

Du kan bruge flere Flex-beholdere til at oprette brugerdefinerede layout. Her er nogle få eksempler på, hvad du kan foretage dig.

Indstille kortlayout

Konfigurere flydende kort