Verwenden Sie Flex-Container zum Gruppieren und ausrichten-Komponenten

Flex Container ist eine Layout-Komponente, die Ihnen beim Entwerfen und Erstellen von Abschnittslayouts auf Ihrer Webseite hilft. Sie können Flex-Container verwenden, um Komponenten wie Schaltflächen, Text, Bilder und andere Container zu gruppieren.

Einen Flex-Container hinzufügen

So fügen Sie Ihrer Webseite einen Flex-Container hinzu:

1. Öffnen Sie das Designstudio, um die Inhalte und Komponenten Ihrer Seite zu bearbeiten.

2. Wählen Sie die Seite aus, die Sie bearbeiten möchten.

3. Auswählen der Abschnitt, in dem Sie die Flex-Containerkomponente hinzufügen möchten.

4. Zeigen Sie mit der Maus auf einen beliebigen bearbeitbaren Canvas-Bereich und wählen Sie dann die Komponente Flex-Container aus dem Komponentenbereich aus.

Sie können eine Gruppe von Komponenten erstellen, indem Sie Ihrem Flex-Container andere Komponenten wie Schaltflächen und Text hinzufügen.

Sie können Ihren Flex-Container auch gestalten und konfigurieren.

Einen Flex-Container bearbeiten

Nachdem Sie einen Flex-Container hinzugefügt haben, Auswählen das Flex-Container-Steuerelement, um die Eigenschaftenleiste zu öffnen und Ihren Flex-Container zu bearbeiten.

Eigentum	Description
Design	Ändern Sie die Design-Eigenschaften, um das Erscheinungsbild Ihres Flex-Containers anzupassen.
Hintergrund bearbeiten	Ändern Sie die Farbe des Hintergrunds gemäß der Farbpalette für die ausgewählte Formatierungsvorlage. Sie können auch ein Hintergrundbild hinzufügen und die Größe und Position anpassen.
Richtung und Ausrichtung ändern	Ausrichten und ändern Sie die Richtung des Inhalts im Flex-Container.
Andere	Duplizieren Sie den Abschnitt, verschieben Sie in innerhalb der Seite nach oben oder unten oder löschen Sie den Abschnitt vollständig.

Designeigenschaften

Die folgenden Designeigenschaften sind im Designstudio konfigurierbar:

• Richtung
• Rechtfertigen
• ausrichten Artikel
• ausrichten-Inhalt

• ausrichten selbst
• Lücke
• Flexibel wachsen

• Flex-Schrumpf
• Flex-Basis
• Flex-Bestellung

Fügen Sie Flex-Container in HTML hinzu

Sie können mit Visual Studio Code for the Web (Vorschauversion) Flex-Container auch direkt zum HTML Ihrer Webseite hinzufügen.

Damit das Designstudio benutzerdefinierte Flexbox-Divs erkennt und deren Canvas-Bearbeitung zulässt, wenden Sie die CSS Klasse „ppFlexContainer“ auf sie an.

Wichtig

Ohne die Klasse ppFlexContainer erkennt Design Studio die benutzerdefinierten Divs nicht als Flex-Container-Komponenten und Sie können sie nicht in Design Studio bearbeiten.

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

Benutzerdefinierte Layouts erstellen

Sie können mehrere Flex-Container verwenden, um benutzerdefinierte Layouts zu erstellen. Dies sind nur einige Beispiele für das, was möglich ist.

Richten Sie Karte Layout ein

Schweben einrichten Karten