Verwenden von Flexbox-Layouts in UI Builder

Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.

In UI Builderkönnen Sie ganz einfach anwenderdefinierte Seiten mit Flexbox-Layouts erstellen. Wenn Sie das Layout Ihrer Seite anpassen, können Sie Flexbox voll ausnutzen und so Ihr gesamtes Seitendesign gestalten. Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.

Flexbox ist ein eindimensionales Layoutsystem in CSS. Flexbox ist von Natur aus flexibel, was nützlich ist, wenn Sie die Größe des Inhalts nicht kennen. Wenn Sie komplexe Seiten erstellen möchten, können Sie das Layout Ihrer Seite auf der Registerkarte „Stile“ des Konfigurationsbereichs oder mit CSS anpassen. Besuchen Sie Mozilla, um mehr über Flexbox zu erfahren.

Sie können die Richtung Ihrer Inhalte im Layout wie folgt ändern:

• Zeile: Zeilen sind von links nach rechts oder von rechts nach links angeordnet, abhängig von der Richtung der Standardsprache Ihres Browsers. Links/rechts gilt für einen englischsprachigen Browser.
• Zeilenumkehr: Zeilen werden in der umgekehrten Richtung der Standardsprache Ihres Browsers organisiert, z. B. von rechts nach links oder von links nach rechts.
• Spalte: Nach oben/nach unten oder nach unten/nach oben
• Spaltenumkehr: Unten/oben

  Abbildung : 1. Flexbox-Zeilen- und -Spaltenrichtungen

  

• Inhalt begründen: Definiert die Ausrichtung entlang der Hauptachse. Die Auswahlmöglichkeiten lauten wie folgt:
  • Flex-start: Elemente befinden sich am Anfang der Flex-Richtung, ähnlich wie linksbündiger Inhalt. Das ist die Standardeinstellung.
  • Flex-Ende: Elemente befinden sich am Ende der Flex-Richtung, ähnlich wie rechtsbündiger Inhalt.
  • Abstand zwischen: Elemente werden gleichmäßig verteilt.
  • Raum-um: Elemente werden gleichmäßig mit gleichem Platz um sie herum verteilt.
  • Flächengleichmäßig: Der Abstand zwischen Elementen beträgt gleich.
• Elemente ausrichten: Definiert, wie Ihr Flex-Inhalt entlang der Querachse angezeigt werden soll. Die Auswahlmöglichkeiten lauten wie folgt:
  • Dehnen: Dehnen Sie Ihren Inhalt, um den Container zu füllen. Dies ist die Standardeinstellung
  • Flex-Start: Platzieren Sie Ihre Inhalte am Anfang der Querachse.
  • Flex-Ende: Platzieren Sie Ihre Inhalte am Ende der Querachse.
  • Zentriert: Zentrieren Sie Ihren Inhalt an der Querachse.
  • Basissystem: Richten Sie Ihre Inhalte entsprechend Ihrer Baseline-Ausrichtungaus [] aus.
• Höhe: Stellen Sie die Höhe automatisch oder manuell ein.
• Breite: Legen Sie die Höhe Ihrer Flexbox-Elemente automatisch oder manuell fest.
• Rand: Legen Sie Ihren Mindestabstand zwischen Flexbox-Elementen fest.
• Abstand: Legen Sie den Abstand für jede Seite Ihrer Flexbox-Elemente fest.

Erstellen Sie ein Flexbox-Layout mit dem neuen Layoutsystem

Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten in einer Umgebung mit wenig Code zu erstellen.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder.
4. Wählen Sie in der Phase UI Builder die Schaltfläche + Inhalt hinzufügen aus.
5. Wählen Sie auf der Registerkarte Layouts die Option Flexbox aus.
   
6. Wählen Sie im Konfigurationsbereich die Registerkarte Stile.
7. Im Abschnitt „ Layout “ sollte „ Flexbox “ hervorgehoben sein.
   
8. Im Abschnitt „ Layout “ der Registerkarte „Stile“ können Sie Folgendes ändern:

   Richtung

   Definieren Sie, wie Komponenten horizontal oder vertikal gestapelt werden sollen.

   Elemente ausrichten

   Definieren Sie, wie Komponenten innerhalb von Containern als Gruppe ausgerichtet werden.

   Inhalt begründen

   Definieren Sie, wie die Komponenten im Container verpackt oder verteilt werden.

   Hinweis:

   Wählen Sie Erweiterte Layoutoptionen anzeigen, um die nächsten beiden Optionen anzuzeigen.

   Abstand

   Legen Sie die Größe des Abstands zwischen Zeilen und Spalten fest.

   Untergeordnete Elemente in mehrere Zeilen umbrechen

   Legen Sie fest, ob Komponenten in eine Zeile gezwungen werden oder in mehrere Zeilen überlaufen.

   Besuchen Sie Mozilla, um mehr über Flexbox-Layoutkonfigurationen zu erfahren.

9. Wahlweise: Sie können den CSS-Code bearbeiten, indem Sie Erweiterte Konfigurationsoptionen anzeigen unten auf der Registerkarte Stile und dann die Option CSS anzeigen und bearbeiten auswählen.
10. Wählen Sie Speichern.
    Ihre Seite wird aktualisiert und zeigt die am Layout vorgenommenen Änderungen an.
11. Fügen Sie Ihrer Seite Komponenten hinzu.
    Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
12. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie .

Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem

Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Im folgenden Verfahren erfahren Sie, wie Sie mit Flexbox den CSS-Code ändern, um das Layout Ihrer Seite anzupassen.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
4. Klicken Sie auf die Registerkarte Layout, und wählen Sie das zweispaltige Layout aus.

   Abbildung : 2. Standardlayout mit zwei Spalten

   

5. Klicken Sie auf Layoutcode bearbeiten.

   Abbildung : 3. Bearbeiten Sie den Layoutcode

   

6. Erweitern Sie den Code-Editor, um den CSS-Code einfach anzeigen zu können.

   Abbildung : 4. Erweitern Sie den Code-Editor

   

7. Fügen Sie dem Layout einen weiteren Slot hinzu, indem Sie den CSS-Code für einen vorhandenen Slot kopieren.

   Das Kopieren des Codes ist einfacher als das Eingeben in das Layout.

   Abbildung : 5. Kopieren Sie den CSS-Code für einen Slot

   

8. Platzieren Sie unter dem von Ihnen kopierten Code ein Komma, und fügen Sie dann den folgenden CSS-Code ein:
   1. Ändern Sie die Eigenschaft "slotName" in „Spalte 3“,.
   2. Ändern Sie die Eigenschaft "flex" in „2“.
   3. „margin-left“: „1rem“ hinzufügen.

   Abbildung : 6. Fügen Sie den CSS-Code ein

   

   Durch Ändern der Eigenschaft "flex" wird die Spalte größer. Mit "margin-left"fügen Sie Platz zwischen den vorherigen Spalten hinzu.

9. Reduzieren Sie die erweiterte Ansicht, und klicken Sie dann auf Übernehmen.

   Abbildung : 7. Wenden Sie eine Layoutänderung an

   

Ergebnisse

Das neue Flexbox-Layout, das Sie erstellt haben, zeigt den neuen Slot, den Sie dem ursprünglichen zweispaltigen Layout hinzugefügt haben.

Abbildung : 8. Neues anwenderdefiniertes Layout

Klicken Sie auf Auf Ursprung zurücksetzen, um die Layoutänderungen auf den Ursprung zurückzusetzen.

Abbildung : 9. Setzen Sie ein Layout zurück

Zugehörige Tasks

• Erstellen Sie ein CSS-Rasterlayout mit dem alten Layoutsystem