# Flexbox

> Structurez des interfaces réactives avec le composant Flexbox de PandaSuite, particulièrement adapté aux écrans mobiles. Combinez-le avec l'option Responsive design pour une gestion optimale de la mise en page.

https://docs.pandasuite.com/fr/essentials/components/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](https://docs.pandasuite.com/fr/essentials/layout/responsive-design/) 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](https://docs.pandasuite.com/fr/essentials/project-properties/languages-and-localization/) — 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.
- **Éléments qui restent à l'écran pendant le défilement** : [épinglez](https://docs.pandasuite.com/fr/essentials/components/flexbox/#épingler-un-élément-pendant-le-défilement) un titre de section, une image ou une vidéo pour le garder en place pendant que l'utilisateur continue de faire défiler, et servez-vous de la progression de l'épinglage pour animer un autre composant.

## 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](https://docs.pandasuite.com/fr/essentials/components/group/) pour hériter de règles de dimensionnement partagées.

> **Astuce**
>
> Besoin de garder un texte dynamique centré quand sa valeur s'allonge ou se
> raccourcit ? Encapsulez un texte unique lié à vos données dans une Flexbox
> horizontale avec **Adapter les enfants** désactivé — la Flexbox le garde
> centré verticalement sans aucun repositionnement manuel. Passez l'orientation
> à verticale pour centrer horizontalement sur le même principe.

## 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.

> **Astuce**
>
> Activez le **Défilement utilisateur** et la Flexbox fait défiler son contenu
> quand il ne tient pas entièrement à l'écran. Sa taille de défilement provient
> automatiquement des éléments qu'elle contient : elle grandit ou rétrécit quand
> votre contenu change. La Flexbox est alors une zone de défilement à elle
> seule : vous pouvez construire une page défilante entière avec une seule
> Flexbox, au lieu de la placer dans une [Zone de
> défilement](https://docs.pandasuite.com/fr/essentials/components/scrolling-area/). N'utilisez une Zone de
> défilement séparée que pour une boîte défilante dont vous fixez vous-même la
> taille, indépendamment du reste de la mise en page.

[Image : Flexbox verticale avec une photo, un lecteur audio et un long texte, et Défilement utilisateur sur Oui dans ses propriétés]

## 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](https://docs.pandasuite.com/fr/essentials/interactions/markers/) 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.

[Image : Propriétés d'un marqueur de Flexbox : Ancre de l'élément Centre, Direction Les deux, Ancre de viewport personnalisée Non]

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](https://docs.pandasuite.com/fr/essentials/components/multi-state/) 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.

[Image : Action Défiler jusqu'à l'élément au clic, ciblant une Flexbox verticale : index 0, position Haut, durée 0,4 s]

### 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.

## Épingler un élément pendant le défilement

Épinglez un enfant direct d'une Flexbox pour le garder à l'écran pendant que l'utilisateur continue de faire défiler. La Flexbox réserve la place de l'épinglage après l'élément : le contenu qui suit attend la fin de l'épinglage au lieu de recouvrir l'élément. Grâce à son [canal d'épinglage](https://docs.pandasuite.com/fr/essentials/components/flexbox/#synchroniser-une-flexbox), la progression de l'épinglage peut aussi piloter un autre composant.

Sélectionnez un ou plusieurs enfants directs d'une même Flexbox. Dans le panneau **Propriétés**, la section **Mise en page** affiche :

- **Épingler** : active l'épinglage des éléments sélectionnés.
- **Distance** : la durée de l'épinglage, en multiples de la hauteur visible de la Flexbox (**× hauteur**, ou **× largeur** dans une Flexbox horizontale). Avec **1**, l'élément reste en place pendant que l'utilisateur fait défiler une hauteur de Flexbox entière. Par défaut **1**.
- **Alignement** : la position où l'élément se tient pendant l'épinglage, à l'intérieur de l'**Espacement** de la Flexbox : **Haut**, **Centre** ou **Bas** (**Gauche**, **Centre** ou **Droite** dans une Flexbox horizontale). Par défaut **Haut**.

**Distance** et **Alignement** apparaissent une fois **Épingler** activé.

> **Note**
>
> Le réglage **Épingler** n'a rien à voir avec l'icône **Punaise** de la liste
> des marqueurs, qui fait d'un marqueur la position par défaut.

Ces réglages sont proposés sur les enfants directs d'une Flexbox dont **Adapter les enfants** est désactivé. Une [Collection](https://docs.pandasuite.com/fr/essentials/data/collection/) ne les propose pas. Un épinglage tient dans la Flexbox qui contient directement l'élément : pour épingler un élément placé dans un Groupe, épinglez le Groupe, et épinglez les éléments de la Flexbox qui défile plutôt que ceux d'une Flexbox imbriquée.

Bon à savoir :

- **Laissez assez de contenu après l'élément.** Un épinglage ne va au bout que si la Flexbox peut défiler jusque-là. Quand le contenu qui suit l'élément est trop court, l'épinglage et sa progression s'arrêtent là où s'arrête le défilement.
- **Marqueurs et actions de défilement** : un élément épinglé compte pour l'élément plus sa distance.
- **Prévisualisation** : le canevas affiche l'élément à sa taille normale, sans la distance. Ouvrez la prévisualisation pour voir l'épinglage.

> **Attention**
>
> L'épinglage demande un viewer à jour. Une app installée avant l'arrivée de
> l'épinglage ouvre le projet mais ignore les épinglages, tout comme une web
> app hébergée gardée sur une [version antérieure du viewer web](https://docs.pandasuite.com/fr/essentials/web-publishing/publish-to-the-web/#épingler-la-version-du-viewer-web).
> Pour une app installée, générez et distribuez un nouveau fichier, voir
> [Mettre à jour son application](https://docs.pandasuite.com/fr/essentials/content-management/update-your-application/#exporter-un-nouveau-fichier-pour-la-rediffusion).

## Synchroniser une Flexbox

La [Synchronisation](https://docs.pandasuite.com/fr/essentials/components/synchronization/) vous permet de lier une Flexbox à un autre composant. La Flexbox expose :

- **Défilement**
- **Marqueurs**
- **Épinglage : \[nom de l'élément]** : un canal par élément épinglé. Il suit la progression de l'épinglage : 0 avant, de 0 à 100 sur la distance, 100 après.

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

Pour animer un composant pendant qu'un élément est épinglé, ajoutez la Flexbox à une Synchronisation, activez son canal **Épinglage : \[nom de l'élément]**, puis ajoutez le composant à animer, par exemple un [Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/). Le bouton **Inversé** fonctionne comme pour tout autre canal. Donnez à chaque canal d'épinglage sa propre Synchronisation : en activer un désactive les autres canaux de cette Flexbox dans la même Synchronisation.