Flexbox

Le composant Flexbox dispose ses enfants selon un axe principal — horizontal ou vertical — et ajuste automatiquement leur taille pour occuper l’espace disponible. C’est la mise en page de référence pour les interfaces adaptatives, en particulier sur smartphone et tablette.

Associez-le à l’option Responsive pour adapter l’affichage aux différentes résolutions d’écran sans redéfinir manuellement chaque taille ou position.

Cas d’usage

• Textes dynamiques et traductions : disposez des blocs de texte dont la hauteur varie selon les données ou la langue — la Flexbox repositionne automatiquement les éléments qui suivent.
• Listes défilantes de cartes maquettées : empilez verticalement des sections ou cartes dessinées à la main et laissez la Flexbox gérer la taille du défilement quand l’écran déborde.
• Grilles adaptatives : combinez une orientation horizontale et Adapter les enfants pour faire passer les éléments sur plusieurs lignes selon la largeur de l’écran.
• Expériences de défilement par sections : ancrez des marqueurs sur les enfants clés pour déclencher des événements ou amener la mise en page sur une section précise au fil du défilement.

Qu’est-ce que la mise en page Flexbox ?

Flexbox est un modèle de mise en page basé sur un axe principal. Les éléments s’y disposent de manière fluide — horizontalement (côte à côte) ou verticalement (empilés de haut en bas) — et le conteneur ajuste automatiquement la taille de chaque enfant pour occuper l’espace disponible.

À l’intérieur d’une Flexbox, les éléments suivent l’ordre de la liste des objets. Pour les réordonner, déplacez-les dans cette liste. Quand un enfant change de taille (typiquement parce que son texte évolue), la Flexbox repositionne les éléments qui suivent — pratique pour les contenus responsive ou dynamiques.

Les enfants peuvent être des objets simples ou encapsulés dans un composant Groupe pour hériter de règles de dimensionnement partagées.

Insérer une Flexbox

Cliquez sur Composants et insérez le composant Flexbox.

Placez-le à l’endroit où vous souhaitez faire apparaître vos éléments. À l’intérieur, insérez vos enfants directement ou encapsulez-les dans un composant Groupe pour partager des règles de dimensionnement.

Dans le panneau Propriétés, vous pouvez configurer :

• Orientation : choisissez Horizontale ou Verticale pour l’axe principal.
• Adapter les enfants : permet aux éléments de passer à la ligne (ou colonne) suivante quand l’axe principal manque de place.
• Espacement : définit le padding intérieur du conteneur avec les valeurs G, D, H et B pour gauche, droite, haut et bas.
• Défilement utilisateur : active le geste de défilement (doigt ou souris) lorsque le contenu déborde.
• Barre de défilement : affiche ou masque la barre de défilement.
• Maintenir la position du défilement : conserve la position de défilement de l’utilisateur lorsqu’il quitte puis revient sur l’écran.

Créer des marqueurs

Les marqueurs sur une Flexbox sont ancrés à un enfant direct précis. Utilisez-les pour déclencher des actions quand un élément entre dans la zone visible, naviguer vers une position d’arrivée précise ou synchroniser la mise en page avec un autre composant. Reportez-vous à la page Marqueurs pour le concept général.

Pour créer un marqueur :

1. Entrez en mode édition dans la Flexbox.
2. Sélectionnez l’enfant direct auquel vous souhaitez ancrer le marqueur.
3. Cliquez sur le bouton + dans la liste des marqueurs, puis choisissez Créer un marqueur depuis l’élément sélectionné.

Le marqueur reste rattaché à cet enfant même si l’ordre change — il suit l’élément lui-même, pas sa position dans la liste.

Propriétés du marqueur

Chaque marqueur Flexbox expose :

• Élément cible : l’enfant auquel le marqueur est lié. Vous pouvez réassigner la cible plus tard depuis les propriétés du marqueur.
• Ancre de l’élément : le point de référence sur l’élément cible — Haut, Centre ou Bas pour une Flexbox verticale ; Gauche, Centre ou Droite pour une Flexbox horizontale.
• Direction : filtre quand le marqueur se déclenche — Avant, Arrière ou Les deux.
• Ancre de viewport personnalisée : réglée sur Oui, vous choisissez une Ancre du viewport dédiée pour l’endroit où la détection a lieu dans la zone visible. Réglée sur Non, l’ancre du viewport reprend celle de l’élément.

Survolez un marqueur dans la liste et cliquez sur l’icône Punaise pour en faire la position par défaut : la Flexbox s’ouvre alors avec cet élément déjà aligné dans la zone visible.

Déclencheurs

Choisissez votre déclencheur dans la liste :

• Positions [marqueurs] : chaque marqueur d’ancrage se déclenche quand l’élément auquel il est lié franchit la zone visible, dans la Direction configurée. Utilisez-le pour lancer une animation, changer l’état d’un Multi-état ou charger du contenu associé quand l’utilisateur défile au-delà du marqueur.
• Tape / Clique
• Double tape / clique
• Touche
• Relâche
• Glisse vers le haut/bas/droite/gauche
• Survol entrant/sortant

Actions

Défiler jusqu’à l’élément

Utilisez Défiler jusqu’à l’élément pour amener un enfant par sa position dans la liste, en choisissant où il atterrit dans la zone visible. Aucun marqueur n’est nécessaire.

• Sélectionnez l’objet déclencheur (par exemple, un bouton).
• Ajoutez une nouvelle action en choisissant Agir sur un composant > Flexbox > Défiler jusqu’à l’élément.
• Définissez l’index de l’enfant cible, la position d’arrivée (Haut, Centre ou Bas pour une Flexbox verticale ; Gauche, Centre ou Droite pour une horizontale) et la durée du défilement.

Défiler jusqu’au marqueur

Utilisez Défiler jusqu’au marqueur pour amener un marqueur déjà créé dans la zone visible. Contrairement à Défiler jusqu’à l’élément, la position d’arrivée provient de la définition du marqueur (ancre de l’élément et ancre du viewport) : la même action produit le même rendu visuel quelle que soit la taille de l’élément ou l’ordre dans la liste.

• Sélectionnez l’objet déclencheur.
• Ajoutez une nouvelle action en choisissant Agir sur un composant > Flexbox > Défiler jusqu’au marqueur.
• Choisissez le marqueur cible.

Synchroniser une Flexbox

La Synchronisation vous permet de lier une Flexbox à un autre composant. La Flexbox expose :

• Position de défilement
• Marqueurs

Ces paramètres apparaissent dans le panneau Propriétés du composant Synchronisation.