Mise en page & Alignement
Organisez vos éléments avec les outils de direction flex, d'alignement et de distribution.
Chaque conteneur peut disposer ses enfants en ligne (horizontalement) ou en colonne (verticalement). Basculez entre les deux modes depuis le panneau de propriétés du conteneur sélectionné.
La direction flex détermine l'axe principal le long duquel les éléments enfants se positionnent. Combinez direction et alignement pour créer des mises en page variées.
La grille d'alignement 3x3, inspirée de Figma, permet de positionner le contenu d'un conteneur en un clic. Les neuf positions couvrent toutes les combinaisons d'alignement horizontal (gauche, centre, droite) et vertical (haut, centre, bas).
Cliquez sur l'une des neuf positions de la grille pour aligner instantanément tous les enfants du conteneur sélectionné. C'est le moyen le plus intuitif d'organiser votre mise en page.
Le gap définit l'espace entre les éléments enfants d'un conteneur. Contrairement au margin, le gap ne crée pas d'espace supplémentaire aux extrémités, ce qui garantit un espacement régulier et prévisible entre chaque élément.
Les options de distribution permettent de répartir l'espace entre les éléments enfants. Utilisez 'space-between' pour répartir l'espace uniformément entre les éléments, ou 'space-around' pour ajouter aussi de l'espace aux extrémités.
La distribution est particulièrement utile pour les barres de navigation, les listes d'icônes ou toute disposition où les éléments doivent occuper l'espace disponible de manière équilibrée.