Flexbox en CSS & HTML: Instructions pour l'alignement sur l'axe principal

Dans ce tutoriel, vous apprendrez comment aligner les éléments dans un conteneur Flex le long de l'axe principal. Nous avons déjà traité l'alignement le long de l'axe transversal, mais l'axe principal est tout aussi important. La technologie Flexbox vous offre différentes possibilités pour rendre l'alignement de vos éléments flexible et adaptable. Jetons un coup d'œil plus attentif !

Principales conclusions

• L'alignement le long de l'axe principal se fait avec la propriété justify-content.
• Vous pouvez utiliser différentes valeurs comme center, flex-start, flex-end, space-between et space-around pour adapter votre mise en page.
• Les réglages de la boîte Flex affectent directement l'agencement des éléments dans la direction souhaitée.

Guide étape par étape

1. Initialiser le conteneur Flex

Commencez par créer un conteneur Flex et définir sa direction Flex. Dans cet exemple, nous définissons la direction Flex sur row. Cela signifie que les éléments seront disposés dans une rangée de gauche à droite.

2. Alignement par défaut des éléments

Si vous placez vos éléments dans le conteneur sans ajustements de style spéciaux, vous verrez qu'ils sont alignés par défaut au début du conteneur. Vous pouvez leur donner une largeur de 100 pixels pour les visualiser.

3. Alignement centré

Pour centrer les éléments, utilisez la propriété CSS justify-content avec la valeur center. Cela alignera vos éléments au centre du conteneur, ce qui donne un agencement très attrayant.

4. Aligner les éléments à la fin

Si vous souhaitez aligner vos éléments à la fin du conteneur, vous pouvez utiliser la valeur flex-end pour justify-content. Cela déplacera les éléments vers l'extrémité droite de votre conteneur.

5. Aligner les éléments au début

Le comportement par défaut sans ajustement est flex-start, ce qui signifie que les éléments restent au début du conteneur. Ce réglage est utile si vous souhaitez une disposition claire et ordonnée des éléments dans la partie supérieure du conteneur.

6. Changer la direction Flex

En changeant la direction Flex en colonne, l'axe principal passe de l'horizontal au vertical. Cela entraîne une disposition des éléments de haut en bas.

7. Centrer les éléments en orientation verticale

Vous pouvez également centrer les éléments dans cette nouvelle orientation en utilisant justify-content: center. Ce réglage garantit que tous les éléments sont affichés au centre du conteneur.

8. Alignement en bas

Si vous souhaitez avoir les éléments dans la partie inférieure du conteneur, vous pouvez à nouveau définir flex-end. Cela positionnera les éléments au bas du conteneur.

9. Utilisation des propriétés d'espacement

Flexbox vous permet également de contrôler l'espace entre vos éléments en utilisant space-between, space-around et space-evenly. Ces propriétés répartissent l'espace disponible de différentes manières.

10. Utilisation de Space-Between

Avec justify-content: space-between, le premier élément reste en haut et le dernier élément en bas du conteneur, l'espace entre les éléments étant réparti de manière égale.

11. Essayer Space-Around

Lorsque vous utilisez space-around, un espace équivalent est créé autour de chaque élément. Cet espacement est visible au centre du conteneur, tandis que les éléments restent répartis de manière égale.

12. Utiliser Space-Evenly

En utilisant space-evenly, il est assuré qu'un espace plus uniforme est présent partout entre les éléments et le bord du conteneur.

Résumé

Dans ce tutoriel, vous avez appris comment régler l'alignement sur l'axe principal avec Flexbox. En utilisant justify-content, vous pouvez rendre la position de vos éléments très flexible. Vous avez également découvert différentes propriétés qui vous aideront à obtenir une mise en page souhaitée. Utilisez ces connaissances pour créer des designs attrayants et conviviaux!