--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Verwenden von Flexbox-Layouts in UI Builder =========================================== Verwenden von Flexbox-Layouts in UI Builder {#ariaid-title1} ============================================================ * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 Minuten Lesedauer 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](https://servicenow-prod.fluidtopics.net/zC9vc816~Qf2~Zwzr9g_lA "Spaltenlayouts zum Organisieren von Komponenten auf einer Seite UI Builder. Erfahren Sie, wie Spaltenlayouts in UI Builderverwendet werden."). 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](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), 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/obenAbbildung : 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. {#flexbox-uib__ul_lxn_tgt_xrb} * 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-Ausrichtung ausaus. {#flexbox-uib__ul_mxn_tgt_xrb} * 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. {#flexbox-uib__ul_ixn_tgt_xrb} Erstellen Sie ein Flexbox-Layout mit dem neuen Layoutsystem {#ariaid-title2} ---------------------------------------------------------------------------- Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten in einer Umgebung mit wenig Code zu erstellen. ### Vorbereitungen Erforderliche Rolle: Administrator ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. [Erstellen Sie eine Seite in UI Builder](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 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](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), 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](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt."). 12. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie ![die Schaltfläche Vorschau wählen, die die Seitenvariante öffnet.](). Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem {#ariaid-title3} ---------------------------------------------------------------------------- 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: Administrator ### 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 AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. [Erstellen Sie eine Seite in UI Builder](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen.") 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. {#flexbox-uib-old-layout__substeps_u5w_brr_qpb} 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](https://servicenow-prod.fluidtopics.net/YQp112Qtvaxz4INA6VOoAg#create-a-css-grid-layout "Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.")