Lorsque vous ajoutez des widgets et des éléments de design sur Flex, vous avez le choix d'utiliser des Conteneurs et Flexboxes. Il existe toutefois des différences notables entre les deux. Cet article fournit des informations et des exemples en ce qui concerne l'utilisation d'un conteneur ou d'une flexbox en comparaison à l'ajout d'éléments directement sur la grille.
En règle générale, si vous souhaitez bénéficier d'une disposition automatique qui organise les éléments sous la forme d'une liste horizontale ou verticale, utilisez une Flexbox. Si vous souhaitez créer une composition libre avec des éléments en superposition, utilisez un Conteneur.
Grille
La grille est la couche de base qui définit les lignes et les colonnes de votre section. Ces dernières contiennent les conteneurs et les flexboxes. Placez des éléments directement sur la grille lorsque vous souhaitez qu'ils se superposent à une carte ou une composition. Vous pouvez par exemple ajouter des étiquettes « En solde », des titres percutants, etc.
Pour créer un design véritablement responsive, nous vous recommandons d'utiliser la grille comme point de repère pour placer les éléments aux endroits souhaités au lieu de les ajouter de manière aléatoire. Vous pouvez placer les éléments en les déposant sur la grille ou utiliser les boutons d'alignement dans le panneau Design.
Conteneurs
Les conteneurs se prêtent mieux aux compositions libres. Utilisez-les lorsque vous souhaitez inclure des objets qui se chevauchent ou des compositions non linéaires.
Flexbox
Utilisez une Flexbox lorsque vous souhaitez créer une disposition automatique qui organise les éléments selon une liste horizontale ou verticale. Vous pouvez également ajouter des éléments à une Flexbox lorsque vous souhaitez qu'ils soient alignés les uns après les autres (par exemple, plusieurs appels à l'action, étiquettes, logos, etc.).
