--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Utiliser les mises en page Flexbox dans Générateur d'IU ======================================================= Utiliser les mises en page Flexbox dans Générateur d'IU {#ariaid-title1} ======================================================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes de lecture Créez une mise en page Flexbox pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d'améliorer vos performances. Vous pouvez facilement créer des pages personnalisées avec des mises en page Flexbox dans Générateur d'IU. La personnalisation de la mise en page de votre page vous permet de profiter pleinement de Flexbox afin de réaliser votre conception globale de page. Pour plus d'informations, consultez [Organiser les composants dans les pages du générateur d'IU](https://servicenow-prod.fluidtopics.net/3E6QvANo8NwYir8pWDptRw "Les mises en page en colonnes organisent les composants d’une Générateur d'IU page. Découvrez comment les mises en page de colonnes sont utilisées dans Générateur d'IU."). Flexbox est un système de mise en page unidimensionnel en CSS. Flexbox est intrinsèquement flexible, ce qui est utile lorsque vous ne connaissez pas la taille de votre contenu. Si vous prévoyez de créer des pages complexes, vous pouvez personnaliser la mise en page de votre page dans l'onglet styles du panneau de configuration ou avec CSS. Visitez [Mozilla](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) pour en savoir plus sur Flexbox. Vous pouvez modifier l'orientation de votre contenu dans la mise en page de la manière suivante : * Ligne : les lignes sont organisées de gauche à droite ou de droite à gauche, selon la direction de la langue par défaut de votre navigateur. Gauche/droite est le cas pour un navigateur anglais. * Inversion de ligne : les lignes sont organisées dans le sens inverse de la langue par défaut de votre navigateur, par exemple de droite à gauche ou de gauche à droite. * Colonne : Haut/Bas ou Bas/Haut * Colonne inversée : bas/hautFigure 1. Directions des lignes et des colonnes Flexbox * Justifier le contenu : définit l'alignement le long de l'axe principal. Les choix sont les suivants : * Flex-start : les éléments se trouvent au début de la direction du flex, comme le contenu justifié à gauche. Il s'agit du paramètre par défaut. * Extrémité flexible : les éléments sont à la fin de la direction flexible, comme le contenu justifié à droite. * Espace entre : les éléments sont répartis uniformément. * Espace autour : les éléments sont répartis uniformément avec un espace égal autour d'eux. * Uniformément dans l'espace : l'espacement entre les éléments est égal. {#flexbox-uib__ul_lxn_tgt_xrb} * Aligner les éléments : définit la façon dont vous souhaitez afficher votre contenu Flex le long de l'axe transversal. Les choix sont les suivants : * Étirer : étirez votre contenu pour remplir le conteneur. Il s'agit du paramètre par défaut * Flex-start : Placez votre contenu au début de l'axe croisé. * Flex-end : Placez votre contenu à l'extrémité de l'axe transversal. * Centre : Centrez votre contenu sur l'axe croisé. * Système de base : alignez votre contenu de la même manière que l'alignement de votre base de référence. {#flexbox-uib__ul_mxn_tgt_xrb} * Hauteur : Réglez la hauteur automatiquement ou manuellement. * Largeur : Définissez la hauteur de vos éléments Flexbox automatiquement ou manuellement. * Marge : définissez votre distance minimale entre les éléments Flexbox. * Marge intérieure : définissez la marge intérieure de chaque côté de vos éléments de Flexbox. {#flexbox-uib__ul_ixn_tgt_xrb} Créer une mise en page Flexbox avec le nouveau système de mise en page {#ariaid-title2} --------------------------------------------------------------------------------------- Créez une mise en page Générateur d'IU Flexbox pour créer des pages puissantes dans un environnement low-code. ### Avant de commencer Rôle requis : admin ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. [Créer une page dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs."). 4. Sélectionnez le bouton + Ajouter du contenu dans l'étape Générateur d'IU . 5. Sélectionnez Flexbox dans l'onglet Mises en page. 6. Sélectionnez l'onglet Styles dans le panneau de configuration. 7. Dans la section Mise en page , vous devriez voir Flexbox en surbrillance. 8. Dans la section Mise en page de l'onglet Styles, vous pouvez modifier les éléments suivants : Direction : Définissez la façon dont vous voulez que les composants s'empilent, horizontalement ou verticalement. Aligner les éléments : Définissez comment les composants des conteneurs s'alignent en tant que groupe. Justifier le contenu : Définissez la façon de condenser ou d'espacer les composants à l'intérieur du conteneur. Remarque : Sélectionnez Afficher les options avancées de mise en page pour afficher les deux options suivantes. Écart : Définissez la taille de l'écart entre les lignes et les colonnes. Envelopper les éléments enfants sur plusieurs lignes : Définissez si les composants sont forcés sur une ligne ou débordent sur plusieurs lignes. Visitez [Mozilla](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) pour en savoir plus sur les configurations de disposition Flexbox. 9. **Facultatif :** Vous pouvez modifier le code CSS en sélectionnant Afficher les options de configuration avancées en bas de l'onglet Styles , puis en sélectionnant l'option Afficher et modifier CSS . 10. Sélectionnez Enregistrer. Votre page s'actualise et affiche les modifications apportées à la mise en page. 11. Ajoutez des composants à votre page. Consultez [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants.") pour plus d'informations. 12. Affichez et testez votre page en sélectionnant ![le bouton Aperçu qui ouvre la variante de page.]() Créer une mise en page Flexbox avec l'ancien système de mise en page {#ariaid-title3} ------------------------------------------------------------------------------------- Créez une mise en page Flexbox pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d'améliorer vos performances. ### Avant de commencer Rôle requis : admin ### Pourquoi et quand exécuter cette tâche Dans la procédure suivante, vous apprendrez à utiliser Flexbox pour modifier le code CSS afin de personnaliser la mise en page de votre page. ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. [Créer une page dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs.") ou ouvrez une page. 4. Cliquez sur l'onglet Mise en page et choisissez la mise en page à deux colonnes. Figure 2. Mise en page standard à deux colonnes 5. Cliquez sur Modifier le code de mise en page. Figure 3. Modifier le code de mise en page 6. Développez l'éditeur de code afin de pouvoir afficher facilement le code CSS. Figure 4. Développer l'éditeur de code 7. Ajoutez un autre emplacement à la mise en page en copiant le code CSS d'un emplacement existant. Copier le code est plus facile que de le taper dans la mise en page. Figure 5. Copier le code CSS d'un emplacement 8. Sous le code que vous avez copié, placez une virgule, puis collez le code CSS suivant : 1. Remplacez la "slotName" propriété par `<< Colonne 3 >>.` 2. Remplacez la "flex" propriété par `<< 2 >>.` 3. Ajouter `<< margin-left >> : << 1rem >>.` {#flexbox-uib-old-layout__substeps_u5w_brr_qpb} Figure 6. Collez le code CSS La modification de la "flex" propriété augmente la taille de la colonne. En utilisant "margin-left", vous ajoutez un espace entre les colonnes précédentes. 9. Réduisez la vue développée, puis cliquez sur Appliquer. Figure 7. Appliquer un changement de mise en page ### Résultats La nouvelle mise en page Flexbox que vous avez créée affiche le nouvel emplacement que vous avez ajouté à la mise en page à deux colonnes d'origine.Figure 8. Nouvelle mise en page personnalisée Cliquez sur Rétablir l'original pour rétablir les modifications apportées à la mise en page d'origine. Figure 9. Réinitialiser une mise en page **Tâches associées** * [Créer une mise en page de grille CSS avec l'ancien système de mise en page](https://servicenow-prod.fluidtopics.net/MmgwGp2BL3iTZf7~4FzZPA#create-a-css-grid-layout "Créez une mise en page de grille CSS pour Générateur d'IU créer des pages puissantes afin de pouvoir les personnaliser avec des feuilles de style en cascade (CSS) et d’améliorer vos performances.")