Flexbox

La mise en page Flexbox vous permet de disposer selon un axe principal, des objets en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l’espace disponible.

Le composant Flexbox facilite votre mise en page, notamment pour l'adaptation aux écrans mobiles ayant une largeur limitée. Couplé à l'option Tailles & Positions Dynamiques, il vous permet de mettre en place facilement une mise en page responsive. 

La mise en page Flexbox

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent en fonction de l’espace disponible.

La disposition Flexbox est composée d’un container et d’un ou plusieurs « éléments » à l'intérieur. Les éléments sont placés dans un seul axe, vous avez le choix entre "horizontal" ou vertical". Les éléments se chargent eux-mêmes de se placer et de s’adapter. Par exemple, il suffit de spécifier la propriété "wrap" au container afin qu'ils se disposent en plusieurs lignes si nécessaire.

Le composant Flexbox

Cliquez sur Composants et insérez le composant Flexbox.

Placez le à l'endroit où vous souhaitez faire apparaître vos éléments

A l'intérieur, insérez chacun de vos éléments au sein d'un composant Groupe

Dans la fenêtre Propriétés, vous avez la possibilité de définir les propriétés suivantes :

  • Le choix de l'axe : horizontal ou vertical
  • L’espacement entre éléments
  • Le « wrapping » des items (Décaler un élément à la ligne suivante si nécessaire)

proprie_te_s_flexbox.png

Cela a-t-il répondu à votre question ? Merci pour les commentaires Il y a eu un problème pour soumettre vos commentaires. Veuillez réessayer plus tard.