Disposition et positionnement
Le Flow Builder crée des mises en page responsives. Vous ne faites pas glisser les éléments vers des coordonnées précises — vous les imbriquez dans des conteneurs qui organisent automatiquement leurs enfants.
Le conteneur détermine la direction des éléments (verticale ou horizontale), leur alignement et leur espacement. Les éléments individuels peuvent ensuite ajuster leur taille et leurs marges, ou — si nécessaire — sortir du flux avec un positionnement absolu ou fixe.
Pour les propriétés visuelles comme le remplissage, les bordures et les effets, consultez Styles et apparence.
Demandez à l’éditeur IA un badge « Le plus populaire », un pied de page épinglé ou une toute nouvelle section de preuve sociale — il crée les conteneurs pour vous.
Disposition
La disposition est l’outil principal pour organiser les éléments à l’écran. Chaque conteneur distribue automatiquement ses enfants selon un ensemble de règles — direction, alignement et espacement. Les éléments de disposition disponibles dans le builder sont :
- Conteneur vertical : Dispose les enfants de haut en bas
- Conteneur horizontal : Dispose les enfants de gauche à droite
- Séparateur : Un séparateur visuel entre les éléments
- Carrousel : Un ensemble de diapositives défilant horizontalement
- Feuille du bas : Un panneau superposé coulissant qui révèle du contenu supplémentaire lorsque l’utilisateur appuie sur un bouton
Les conteneurs sont les éléments de base d’un écran. Vous pouvez les imbriquer les uns dans les autres pour créer des mises en page complexes. Chaque conteneur dispose d’une section Layout dans le panneau de droite qui contrôle la disposition de ses enfants.
Pour regrouper des éléments dans un nouveau conteneur, utilisez l’action de calque Wrap layer action. Pour supprimer un conteneur et promouvoir ses enfants, utilisez Unwrap.
Pour plus de détails sur la hiérarchie des écrans et des calques, consultez Écrans et calques.
Direction
- Free : Pas de mise en page automatique. Les enfants sont positionnés indépendamment (utile lorsque les enfants utilisent un positionnement absolu)
- Vertical : Les enfants s’empilent de haut en bas, comme des lignes dans une colonne
- Horizontal : Les enfants s’organisent de gauche à droite, comme des éléments dans une rangée
Ordre des éléments
Les enfants s’affichent dans l’ordre où ils apparaissent dans le panneau Layers. Dans un conteneur vertical, l’élément en haut de la liste apparaît en haut de l’écran. Dans un conteneur horizontal, l’élément en haut apparaît à gauche. Faites glisser les éléments dans le panneau Layers pour les réorganiser, ou utilisez Move Up et Move Down dans les actions de calque.
Alignement
La grille d’alignement contrôle la position des éléments enfants sur l’axe transversal du conteneur. Dans un conteneur vertical, l’alignement gère le placement horizontal des enfants (gauche, centre ou droite). Dans un conteneur horizontal, il gère leur placement vertical (haut, milieu ou bas).
Distribution
La distribution détermine comment l’espace est réparti entre les enfants le long de l’axe principal :
- Gap (par défaut) : Une valeur en pixels fixe entre les enfants adjacents
- Space Between : Les enfants s’étendent jusqu’aux bords ; des espaces égaux apparaissent entre eux
- Space Around : Un espace égal entoure chaque enfant, avec des demi-espaces aux bords
- Space Evenly : Un espace égal avant, entre et après tous les enfants
Rogner le contenu
Rogne visuellement le contenu qui dépasse les limites du conteneur. Désactivez cette option pour autoriser le débordement (par exemple, un badge qui dépasse intentionnellement le bord de la carte).
Position
Par défaut, la position de chaque élément est déterminée automatiquement par la disposition de son conteneur. Le bouton Position vous permet de le sortir du flux normal et de le positionner manuellement.
Relative (par défaut)
L’élément reste dans le flux de mise en page normal. Sa position est déterminée automatiquement par les règles de disposition du conteneur parent — vous ne pouvez pas le déplacer librement. Utilisez Margin pour ajuster l’espace autour d’un élément en position relative.
Utilisez le positionnement relatif pour la grande majorité des contenus : blocs de texte, images, cartes, boutons et éléments de liste.
Absolu
L’élément sort du flux normal et se superpose aux autres contenus. Il n’affecte plus la disposition des éléments voisins.
Lorsque vous sélectionnez Absolute, des contrôles supplémentaires apparaissent :
- Champs de décalage (T, L, R, B) : Définissent la distance en pixels entre l’élément et chaque bord de son conteneur parent
- Grille d’ancrage : Cliquez sur un point de la grille 3×3 pour choisir le coin, le bord ou le centre du parent auquel l’élément s’ancre
- Ancrage horizontal (Gauche / Centre / Droite) et Ancrage vertical (Haut / Centre / Bas) : Listes déroulantes qui contrôlent le même point d’ancrage que la grille
- Z-index : Champ numérique qui contrôle l’ordre d’empilement de l’élément par rapport à ses voisins. Les éléments avec des valeurs plus élevées apparaissent au-dessus
Utilisez le positionnement absolu pour les superpositions décoratives, les badges, les boutons de fermeture et les icônes placés au-dessus des images.
Pour étirer un élément absolu sur toute la largeur de son parent, définissez l’ancre horizontale sur Left, puis ajoutez un décalage Right de 0. L’élément sera ancré aux deux bords.
Fixe
L’élément ignore complètement son conteneur parent et se fixe à l’écran. Il reste visible pendant que l’utilisateur fait défiler — le contenu de la page défile en dessous.
Le positionnement fixe utilise les mêmes commandes qu’Absolu (décalages, grille d’ancrage, Z-index). Tous les décalages sont relatifs à la zone de sécurité de l’écran plutôt qu’au parent. Par exemple, un décalage de 0 depuis le bas maintient l’élément au-dessus de l’indicateur d’accueil. Pour mesurer les décalages depuis les bords physiques de l’écran, activez Ignorer la zone de sécurité.
Utilisez le positionnement fixe pour les éléments qui doivent flotter au-dessus du contenu défilant plutôt que de réserver de l’espace — boutons de fermeture ou de restauration flottants, bannières supérieures persistantes, contrôles de retour en haut de page et barres de navigation. Pour une zone d’action dédiée en bas de page, utilisez plutôt un Footer.
Ignorer la zone de sécurité
La zone de sécurité est la partie de l’écran qui reste dégagée de l’encoche, de la barre de statut et de l’indicateur d’accueil. Par défaut, les éléments positionnés restent à l’intérieur de cette zone.
Cochez la case Ignore safe area sous le sélecteur de type de position pour mesurer les décalages de l’élément depuis les bords physiques de l’écran. L’élément peut alors s’étendre derrière l’encoche et l’indicateur d’accueil.
Pour les médias plein écran : positionnez une image ou une vidéo en Fixed, réglez les quatre décalages à 0, et sélectionnez Ignore safe area. Le média couvre ainsi tout l’écran, bord à bord.
La case à cocher ne fonctionne qu’avec les positionnements absolu et fixe. Pour les éléments en positionnement relatif, elle est désactivée, et repasser un élément en Relative efface ce réglage.
Dimensionnement
Chaque élément dispose de contrôles Width et Height. Cliquez sur le menu déroulant pour choisir un mode de dimensionnement :
- Fill : l’élément s’étire pour occuper tout l’espace disponible dans son parent. La valeur en pixels affichée est le résultat calculé.
- Hug : l’élément se réduit pour s’ajuster à son contenu. La valeur en pixels affichée est le résultat calculé.
- Fixed : l’élément utilise la valeur en pixels exacte que vous spécifiez, indépendamment du parent ou de la taille du contenu. C’est le seul mode disponible pour les éléments positionnés en absolu ou en fixe.
Espacement
Définissez les valeurs d’espacement indépendamment pour chaque côté de l’élément.
- Margin : L’espace entre l’élément et ses voisins. Ne dépasse pas les limites du conteneur parent, quelle que soit sa valeur.
- Padding : L’espace entre la bordure de l’élément et son contenu.
Les éléments texte n’ont qu’une margin. Les écrans n’ont que du padding. Les deux sont disponibles pour les conteneurs et les autres éléments ayant du contenu enfant.
Ordre d’empilement
Les éléments relatifs ne se chevauchent jamais entre eux — chaque conteneur dispose ses enfants en séquence. Le chevauchement n’apparaît qu’à partir du moment où un élément sort du flux normal avec un positionnement Absolute ou Fixed.
Lorsque des éléments se chevauchent, les éléments frères placés plus bas dans le panneau Layers s’affichent au-dessus des précédents — même si cet élément frère est relatif et l’autre est absolu.
Les éléments Absolute et Fixed disposent d’un champ Z-index pour un contrôle plus précis : les valeurs les plus élevées l’emportent. Les éléments Relative n’ont pas de Z-index — seul l’ordre des calques détermine leur empilement.
Utilisez les actions de calque Move up et Move down pour modifier l’ordre des éléments.