Flexbox - Justify - Html/Css

On peut aussi préciser comment les éléments s'organisent sur l'espace disponible. Par exemple avec un parent de 600 pixels de large et cinq éléments de 100 pixels de large, par défaut ils vont s'écrirent de gauche à droite en prenant juste la place nécessaire, et il restera un espace blanc à droite :



Oui, ça me parait normal

Mais on peut par exemple vouloir que les éléments s'alignent à la fin de la ligne, ou au centre, il suffit de modifier la propriété justify-content, avec les valeurs "flex-end" ou "center" :





Ah oui je vois.

Par défaut la valeur est "flex-start" ce qui les aligne au début, mais on peut aussi aller plus loin, avec des valeurs qui permettent de justifier les éléments, c'est à dire les séparer de façon équivalente avec :

• space-between: le premier élément commence au début sans espacement, et le dernier est à la fin sans espacement. L'espace inutilisé sert à espacer les éléments entre eux.


• space-around : L'espace inutilisé sert à créer de l'espacement avant et après chaque élément. L'espace affiché n'est pas toujours égal, car le premier élément aura un espace avant entre lui et le conteneur parent, mais deux éléments entre eux auront un espace deux fois plus grand, car chaque élément a un espacement avant et après.


• space-evenly : fonctionne comme space around, mais cette fois, tous les espacements sont égaux.

Ok, j'ai un peu de mal avec le space-around, mais je pense que j'ai compris au global.

Tu verras à l'utilisation c'est plus clair. J'ai terminé cette partie