Mise en page automatique Zero Block

Pour activer la mise en page automatique, accédez aux paramètres du groupe. Veillez à ce que les éléments groupés soient définis comme "objet" et non comme groupe "logique". Une fois que l'option "Objet" est sélectionnée sous Groupe, la section Mise en page automatique apparaît ci-dessous.

Dans la section Disposition automatique, choisissez "Auto" pour le paramètre Flex. L'activation de la mise en page automatique permet d'accéder à divers paramètres qui contrôlent la façon dont les éléments réagissent aux changements de contenu ou de taille et s'alignent en conséquence au sein du groupe. Explorons ces paramètres et apprenons à les personnaliser.

Lorsque la mise en page automatique est activée, deux nouveaux paramètres de groupe vous permettent de gérer la largeur et la hauteur du conteneur avec des éléments groupés.

Par défaut, l'option Hug est sélectionnée, ce qui rend la taille du groupe flexible, l'ajustant en fonction de la taille des éléments à l'intérieur du conteneur et de l'espacement entre eux.

Si vous redimensionnez manuellement le groupe ou définissez une largeur ou une hauteur personnalisée, l'option Hug passera automatiquement à l'option Fixe. L'option Fixe signifie que la taille du groupe est personnalisée et ne sera pas affectée même si vous modifiez l'espacement entre les éléments ou leur taille.

Vous remarquerez peut-être qu'un autre paramètre Hug est disponible. Lorsqu'il est activé, il recalcule les valeurs de largeur et de hauteur et les fixe au minimum possible pour que tous les éléments s'adaptent parfaitement, compte tenu de leur taille et de la valeur définie dans le paramètre Gap (qui contrôle l'espacement). Si vous redimensionnez les éléments, Hug ajustera automatiquement la largeur ou la hauteur en conséquence.

Le paramètre Direction contrôle l'alignement des éléments au sein du groupe. Trois options s'offrent à vous : Horizontal, Vertical et Wrap (passer à la ligne suivante).

Lorsque la direction Horizontale est sélectionnée, tous les éléments sont alignés le long de l'axe X. C'est idéal pour organiser des éléments en ligne, comme des icônes, des éléments de menu ou des boutons. C'est l'idéal pour disposer des éléments en rangée, comme des icônes, des éléments de menu ou des boutons.

Lorsque la direction verticale est définie, tous les éléments du groupe sont alignés sur l'axe des Y. Cette fonction est particulièrement utile pour concevoir des listes ou des cartes empilées les unes sur les autres.

Lorsque la direction Wrap est choisie, les éléments s'alignent sur une rangée en fonction de la largeur du conteneur. Si un élément est trop large, il est déplacé vers la rangée suivante. Cela peut s'avérer particulièrement utile pour les galeries de photos, les nuages de tags multilignes et pour rendre les sites web réactifs à différentes résolutions d'écran.

Le paramètre Écart contrôle l'espacement entre les éléments du groupe en fonction de la direction choisie. Pour l'alignement horizontal, il ajuste l'espacement de l'axe X, tandis que pour l'alignement vertical, il modifie l'espacement de l'axe Y. Lorsque la direction Wrap est définie, vous pouvez spécifier des espaces pour les deux axes.

Notez que si l'option Hug est activée pour la direction choisie, l'ajustement de Gap peut affecter la largeur ou la hauteur du conteneur.

Le paramètre Aligner les éléments permet d'ajuster l'alignement des éléments d'un groupe le long de l'axe principal - verticalement ou horizontalement - en fonction de la direction choisie.

Par exemple, lorsque la direction Horizontale est sélectionnée, les éléments s'alignent verticalement au centre, en haut ou en bas du conteneur. Inversement, si la direction Verticale est choisie, les éléments s'alignent horizontalement au centre, à gauche ou à droite du conteneur. Toutefois, si l'option Étreinte est activée et que tous les éléments ont la même largeur ou la même hauteur, l'alignement ne changera pas.

Le paramètre Justifier le contenu offre d'autres options d'alignement, en utilisant un axe différent de celui de l'option Aligner les éléments. Ce paramètre n'est disponible que si l'option Accrocher n'est pas sélectionnée pour la largeur ou la hauteur le long de l'axe.

Outre l'alignement central ou latéral de base, des options d'alignement intelligent sont également disponibles :

L'option Espace entre répartit uniformément les éléments au sein du groupe, sans espace blanc entre eux et le conteneur.

L'option Espace autour répartit les éléments de manière uniforme au sein du groupe, en veillant à ce que la distance entre les éléments et le conteneur soit égale à la moitié de l'espacement entre les éléments.

L'option Espace uniformément répartit les éléments de manière uniforme au sein du groupe, en veillant à ce que la distance entre les éléments et le conteneur soit égale à l'espacement entre les éléments.

Le paramètre Aligner le contenu permet d'organiser les éléments au sein du groupe et n'est disponible que lorsque la direction Wrap est sélectionnée et qu'il y a plusieurs rangées de contenu. Il aligne verticalement toutes les rangées sur le conteneur, sauf si l'option Étreindre est sélectionnée.

Avec le paramètre Aligner le contenu, vous pouvez aligner les rangées comme d'habitude au centre ou sur les côtés. Comme pour le paramètre précédent, vous pouvez également choisir l'une des options d'alignement intelligent : Espace entre (qui répartit uniformément les éléments sans aucun espacement par rapport au conteneur), Espace autour (qui répartit uniformément les éléments à une distance du conteneur égale à la moitié de l'espacement entre les éléments) et Espace uniformément (qui répartit uniformément les éléments à une distance du conteneur égale à l'espacement entre les éléments).