Le composant Flexbox
Le composant Flexbox vous permet de structurer et d'agencer vos objets selon un axe principal, que ce soit en ligne ou en colonne. Grâce à ce système, les éléments se dilatent ou se rétractent automatiquement pour occuper l'espace disponible, offrant ainsi une mise en page flexible et réactive, particulièrement adaptée aux interfaces mobiles.
Le composant Flexbox est un allié précieux pour concevoir des interfaces adaptatives (ou responsive), notamment sur les écrans de petite taille comme les smartphones ou tablettes, qui nécessitent une gestion optimale de l’espace. Associé au Responsive, il vous permet d'optimiser rapidement l’affichage en fonction des différentes résolutions d’écran, sans avoir à redéfinir manuellement chaque taille ou position des éléments.
Qu'est-ce que la mise en page Flexbox ?
Flexbox est un modèle de mise en page basé sur un axe principal, qui vous permet de disposer des éléments de manière fluide, en ligne ou en colonne. Ce système intelligent ajuste automatiquement la taille des éléments en fonction de l'espace disponible dans le conteneur, créant ainsi une structure flexible et dynamique.
Un conteneur Flexbox est composé de deux entités principales :
- Le conteneur : il sert d’enveloppe pour un ensemble d'éléments flexibles.
- Les éléments enfants : chaque élément à l’intérieur du conteneur se positionne automatiquement selon les propriétés définies.
Vous pouvez orienter ces éléments selon deux axes :
- Horizontal : les éléments sont placés côte à côte.
- Vertical : les éléments se superposent de haut en bas.
Grâce à la propriété wrap, vous avez la possibilité de permettre à ces éléments de s’agencer automatiquement sur plusieurs lignes ou colonnes si l’espace disponible est insuffisant.
Insérer un composant 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 chacun de vos éléments au sein d'un composant Groupe.
Dans les Propriétés, vous avez la possibilité de définir les propriétés suivantes :
- Orientation : Choisissez entre une disposition horizontale ou verticale selon vos besoins.
- Adapter les enfants : Cette option de wrapping permet aux éléments de passer automatiquement à la ligne suivante lorsqu’il n’y a plus d’espace disponible sur l'axe principal.
- Espacement entre éléments : Gérez l’espace autour et entre vos éléments pour un rendu homogène et lisible.
- Défilement : Si votre contenu dépasse la taille visible du conteneur, vous pouvez activer la barre de défilement.
- Barre de défilement : Personnalisez l’apparence et l’activation du défilement.
- Maintenir la position de défilement : Cette option permet de garder la position d’un utilisateur lorsqu’il revient sur l'écran.
Mise en page à l'intérieur du composant Flexbox
À l'intérieur du composant Flexbox, les objets se placent automatiquement les uns par rapport aux autres, en suivant l'ordre dans lequel ils apparaissent dans la liste des éléments. Cet ordre détermine leur positionnement sur l'axe principal, et chaque élément se positionne en fonction de sa place dans cette liste. Pour modifier la position d'un objet, vous devez le déplacer directement dans la liste, ce qui rend l'agencement quelque peu rigide et limité.
En ce qui concerne la gestion de la taille des objets, il est nécessaire de définir directement leur largeur et leur hauteur dans leurs propriétés individuelles. Toutefois, si vous souhaitez plus de flexibilité dans la mise en forme et la personnalisation d’un élément, il est recommandé de placer l’objet dans un composant Groupe. À l’intérieur de ce groupe, vous pouvez gérer librement ses dimensions, son alignement et d’autres propriétés de mise en forme, tout en bénéficiant de la flexibilité de Flexbox pour l’agencement global.
Défiler jusqu'à un objet
Le composant Flexbox n'est pas qu'une simple structure. Il propose également des actions interactives, telles que Défiler jusqu'à un objet spécifique.
Vous pouvez définir une action pour que le composant Flexbox défile automatiquement jusqu’à un élément en particulier. Voici comment procéder :
- Sélectionnez l’objet déclencheur (par exemple, un bouton).
- Ajoutez une nouvelle action en choisissant Agir sur un composant > Flexbox > Défiler jusqu’à un objet.
- Sélectionnez l’élément cible et précisez la position où le défilement s'arrêtera.