Verwenden von Flexbox-Layouts in UI Builder

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 4 Minuten Lesedauer

    • Erstellen Sie ein Flexbox-Layout in UI BuilderErstellen leistungsstarker Seiten, damit Sie mit Cascading Stylesheets (CSS) anpassen und Ihre Leistung verbessern können.

    Sie können ganz einfach anwenderdefinierte Seiten mit FLEXFIX-Layouts in erstellen UI Builder. Durch das Anpassen des Layouts Ihrer Seite können Sie Flexbox in vollem Umfang nutzen, damit Sie Ihr gesamtes Seitendesign erzielen können. 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 Ihres 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 Mozilla Um mehr über Flexbox zu erfahren.

    Sie können die Richtung Ihrer Inhalte im Layout auf folgende Weise ändern:
    • Zeile: Zeilen werden je nach Richtung der Standardsprache Ihres Browsers von links nach rechts oder von rechts nach links organisiert. Links/rechts ist der Fall für einen englischen Browser.
    • Zeilenumkehr: Zeilen werden in umgekehrter Richtung der Standardsprache Ihres Browsers organisiert, z. B. von rechts nach links oder von links nach rechts.
    • Spalte: Nach oben/unten oder nach unten/ Aktiv
    • Column-reverse: Nach unten/nach oben
      Abbildung : 1. Flexbox-Zeilen- und Spaltenrichtungen
      Diagramm mit FLEXFIX-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 links ausgerichteter Inhalt. Das ist die Standardeinstellung.
      • Flex-Ende: Elemente befinden sich am Ende der Flex-Richtung, ähnlich wie rechtsgerichtete Inhalte.
      • Abstand zwischen: Elemente werden gleichmäßig verteilt.
      • Platz um: Elemente werden gleichmäßig verteilt und haben denselben Platz um sie herum.
      • Platzgleichmäß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 auszufüllen. Dies ist die Standardeinstellung
      • Flex-Start: Platzieren Sie Ihren Inhalt am Anfang der Querachse.
      • Flex-End: Platzieren Sie Ihren Inhalt am Ende der Querachse.
      • Zentrieren: Zentrieren Sie Ihren Inhalt auf der Querachse.
      • Basissystem: Richten Sie Ihren Inhalt wie Ihre Baseline aus Ausrichtung .
    • Höhe: Legen Sie die Höhe automatisch oder manuell fest.
    • Breite: Legen Sie die Höhe Ihrer Flexbox fest Elemente Automatisch oder manuell.
    • Marge: Legen Sie Ihren minimalen Abstand zwischen Flexbox-Elementen fest.
    • Auffüllung: Legen Sie die Auffüllung für jede Seite Ihrer Flexbox-Elemente fest.

    Erstellen Sie ein Flexbox-Layout mit dem neuen Layoutsystem

    Erstellen Sie ein Flexbox-Layout in UI BuilderZum Erstellen leistungsfähiger Seiten in einer Low-Code-Umgebung.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite in UI Builder.
    4. Wählen Sie aus + Inhalt hinzufügen Schaltfläche in UI BuilderPhase.
    5. Wählen Sie Aus Flexbox Auf der Registerkarte „Layouts“.
      Pfeil, der auf die Flexbox-Option auf der Registerkarte „Layouts“ der Toolbox zeigt.
    6. Wählen Sie Hinzufügen.
    7. Wählen Sie aus Stile Registerkarte im Konfigurationsbereich.
    8. In Layout Abschnitt, sollte angezeigt werden Flexbox Hervorgehoben.
      Pfeil, der auf die Flexbox-Option auf der Registerkarte „Stile des Konfigurationsbereichs“ zeigt.
    9. In Layout Abschnitt der Registerkarte „Stile“ können Sie Folgendes ändern:
      Wegbeschreibung
      Definieren Sie, wie Komponenten horizontal oder vertikal gestapelt werden sollen.
      Elemente ausrichten
      Definieren Sie, wie Komponenten in Containern als Gruppe ausgerichtet werden.
      Inhalt begründen
      Definieren Sie, wie die Komponenten innerhalb des Containers gepackt oder getrennt angeordnet werden sollen.
      Hinweis:
      Wählen Sie Aus Erweiterte Layoutoptionen anzeigen Um die nächsten beiden Optionen anzuzeigen.
      Abstand
      Legen Sie die Größe der Lücke zwischen Zeilen und Spalten fest.
      Untergeordnete Elemente in mehrere Zeilen umbrechen
      Legen Sie fest, ob Komponenten auf eine Zeile oder auf mehrere Zeilen überlaufen werden.

      Besuchen Mozilla Um mehr über Flexbox-Layoutkonfigurationen zu erfahren.

    10. Wahlweise: Sie können den CSS-Code bearbeiten, indem Sie auswählen Erweiterte Konfigurationsoptionen anzeigen Unten in Stile Und wählen Sie dann aus Zeigen Sie CSS an, und bearbeiten Sie sie Option.
    11. Wählen Sie Speichern.
      Ihre Seite wird aktualisiert und zeigt die am Layout vorgenommenen Änderungen an.
    12. Fügen Sie Ihrer Seite Komponenten hinzu.
      Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
    13. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie auswählen Schaltfläche „Vorschau“, die die Seitenvariante öffnet..

    Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem

    Erstellen Sie ein Flexbox-Layout in UI BuilderErstellen leistungsstarker Seiten, damit Sie mit Cascading Stylesheets (CSS) anpassen und Ihre Leistung verbessern können.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

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

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
    3. Erstellen Sie eine Seite in UI Builder Oder öffnen Sie eine Seite.
    4. Klicken Sie auf Layout Registerkarte und wählen Sie das zweispaltige Layout aus.
      Abbildung : 2. Standardmäßiges zweispaltiges Layout
      Standardmäßiges zweispaltiges Layout.
    5. Klicken Sie Auf Bearbeiten Sie den Layoutcode .
      Abbildung : 3. Bearbeiten Sie den Layoutcode
      Bearbeiten Sie den Layoutcode.
    6. Erweitern Sie den Code-Editor, damit Sie den CSS-Code einfach anzeigen können.
      Abbildung : 4. Erweitern Sie den Code-Editor
      Pfeil, der zum erweitern der Schaltfläche „Code-Editor“ zeigt.
    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 ihn in das Layout einzugeben.

      Abbildung : 5. Kopieren Sie den CSS-Code für einen Slot
      Pfeil, der zum Kopieren des CSS-Codes für einen Slot zeigt.
    8. Fügen Sie unter dem von Ihnen kopierten Code ein Komma ein, und fügen Sie dann den folgenden CSS-Code ein:
      1. Ändern Sie "slotName"Eigenschaft bis „Spalte 3“, .
      2. Ändern Sie "flex"Eigenschaft bis „2“ .
      3. Hinzufügen „Marge-left“: „1rem“ .
      Abbildung : 6. Fügen Sie den CSS-Code ein
      CSS-Code wird eingefügt.

      Wird geändert "flex"Eigenschaft erhöht die Größe der Spalte. Durch Verwendung von "margin-left", Fügen Sie Platz zwischen den vorherigen Spalten hinzu.

    9. Reduzieren Sie die erweiterte Ansicht, und klicken Sie dann auf Anwenden .
      Abbildung : 7. Wenden Sie eine Layoutänderung an
      Layout-Änderung wird angewendet.

    Ergebnisse

    Das von Ihnen erstellte neue Flexbox-Layout zeigt den neuen Slot, den Sie dem ursprünglichen zweispaltigen Layout hinzugefügt haben.
    Abbildung : 8. Neues anwenderdefiniertes Layout
    Neues, abgeschlossenes anwenderdefiniertes Layout.
    Klicken Sie Auf Auf Original zurücksetzen Zum Zurücksetzen der Layoutänderungen auf das Original.
    Abbildung : 9. Setzt ein Layout zurück
    Pfeil, der zum Zurücksetzen auf die ursprüngliche Option zeigt.