justify-content: space-between expliqué (CSS)
Créez visuellement une mise en page CSS flexbox : flex-direction, justify-content, align-items, flex-wrap et gap sur le conteneur, plus flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et un CSS copiable.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur avec justify-content réglé sur space-between : la première boîte est collée contre le bord de début du conteneur, la dernière boîte est collée contre son bord de fin, et l'espace restant est divisé en écarts égaux entre les boîtes du milieu — jamais avant la première ni après la dernière.
C'est le détail que les gens confondent. space-around donne à chaque boîte une marge égale de chaque côté, si bien que les écarts entre les boîtes finissent par être deux fois plus larges que les écarts sur les deux bords extérieurs (chaque bord ne reçoit que la marge d'une boîte, pas deux). space-evenly va plus loin et rend chaque écart de la même taille, y compris les deux bords extérieurs — le seul des trois où l'espacement semble parfaitement uniforme sur toute la largeur.
Changez la valeur de la liste déroulante justify-content entre les trois ci-dessous et regardez les mêmes trois boîtes se réorganiser — c'est le moyen le plus rapide de voir la différence au lieu de la mémoriser. Copiez le CSS correspondant à l'espacement que vous souhaitez réellement.