Disposer les éléments en ligne ou en colonne

Pour placer des boutons en rangée ou des cartes en colonne, réglez leur conteneur parent. Les enfants suivent alors la disposition commune.

1. Partir d’un conteneur Flex

Sélectionnez le parent dans Calques. Dans Expert → Mise en page, choisissez Flex dans Affichage.

Si une commande de disposition ne figure pas encore dans le panneau, utilisez le + du groupe Mise en page pour l’ajouter. Les options proposées dépendent de l’élément et de sa disposition.

2. Choisir la direction

Ajoutez Direction, puis choisissez :

• Rangée : les enfants se suivent horizontalement.
• Colonne : les enfants se suivent verticalement.
• Une direction inversée : le parcours visuel se fait dans l’autre sens sur cet axe.

La direction change la disposition, pas les textes des enfants. Un ordre inversé à l’écran ne doit pas servir à réparer une structure confuse : gardez aussi un ordre logique dans les calques, notamment pour la lecture et la navigation au clavier.

3. Autoriser le retour à la ligne

Retour à la ligne permet de répartir les enfants sur plusieurs lignes lorsque l’espace disponible ne suffit plus.

Choisissez le retour à la ligne pour une rangée de boutons qui doit rester lisible sur une largeur réduite. Sans retour, les enfants restent dans une seule ligne ; selon leurs dimensions, ils peuvent se resserrer ou déborder.

Le retour inversé change l’ordre des lignes formées. Il est rarement nécessaire pour une première mise en page.

Un second clic sur un choix déjà actif peut retirer sa valeur. Si vous souhaitez seulement la conserver, ne cliquez pas une nouvelle fois sur ce choix. Pour revenir à l’état précédent, utilisez Annuler.

4. Comprendre les deux alignements

Le sens des axes dépend de la Direction :

L’alignement sur l’axe principal répartit l’espace disponible le long de la rangée ou de la colonne. L’alignement transversal place les enfants dans l’autre sens.

Cela explique pourquoi une commande portant un nom « horizontal » dans une disposition peut changer de rôle quand vous passez en colonne. Regardez la direction et le résultat, plutôt que de vous fier uniquement au nom.

Début, Centre et Fin placent le groupe ou les enfants dans l’espace disponible. Les répartitions avec de l’espace entre les éléments utilisent l’espace libre du conteneur ; elles ne remplacent pas un écart fixe.

5. Ajouter un espace régulier

Réglez Écart sur le parent pour garder une distance commune entre ses enfants. Évitez de mettre une marge différente sur chaque bouton uniquement pour fabriquer une rangée régulière.

Si une distance semble ne pas changer, vérifiez que vous avez sélectionné le parent et que vous observez la bonne ligne de règle.

6. Adapter et retirer un réglage

Pour une colonne sur mobile et une rangée sur les écrans plus larges, choisissez la colonne sur la ligne de base et la rangée sur une règle d’écran adaptée.

Retirer une valeur retire ce réglage sur sa portée ; cela peut faire réapparaître une valeur de base ou le comportement normal du navigateur. Vérifiez le résultat avant de conclure que le réglage a « disparu ».

Voir une colonne sur mobile et une rangée sur les grands écrans.