Espacement avec "justify-content"

Bonjour,

Je viens de changer de poste au sein de ma boîte : je passe de technicien biologiste à webdev donc le grand écart, et donc...néophyte...
J'apprends pour le moment en autodidacte et je suis actuellement sur le chapitre ayant trait aux flexboxes.

Mon code :

Code:

---

1 2 3 4 5 6 7 8 9 10

#conteneur { border: 3px solid black; display: flex; /*création flexbox*/ flex-direction: column; /*axe principal vertical sens haut-->bas*/ flex-wrap: wrap; justify-content: space-around; align-items: center;   }

---

Je n'arrive pas à comprendre pourquoi le navigateur (firefox mais idem sur chrome et opera) ne fasse pas le justify-content : space-aroundalors que ça marche lorsque je mets "row" en "flex-direction"...

Quelqu'un aurait-il une idée?

Vous remerciant par avance.

Bonjour et bienvenue sur DVP.

Par défaut en mode flex-direction: column le conteneur n’occupera que la place nécessaire à l'affichage de ses enfants.

Pour que de l'espace soit redistribué, via justify-content: space-around, il faut que tu définisses une hauteur à ton conteneur.

Bonjour et merci de votre réponse.

Je viens d'essayer plusieurs fois en spécifiant height et width avec des valeurs différentes et même élevées en px (5000px) pour le conteneur,
mais j'ai toujours le même souci car les éléments du conteneur s'étirent dans l'espace alors que j'avais réglé leur hauteur et largeur
à 300 et 200px respectivement.

En revanche j'ai testé votre réponse sur les ".element" : spécifier la hauteur et largeur en px n'a pas marché non plus mais ça a marché
lorsque j'ai utilisé "max-height" et "max-width".

Merci de m'avoir guidé.

Bonne journée.