Par défaut, le navigateur place tous les éléments sur une seule ligne.
La propriété flex-wrap permet d’indiquer si les éléments flexibles ont le droit de passer à la ligne ou pas (c’est-à-dire si le conteneur flexible peut être multilignes ou pas) ainsi que la direction des éléments dans laquelle les lignes doivent être empilées (c’est-à-dire la direction de l’axe secondaire).
A noter :
La propriété flex-wrap définit si le contenu sera distribué sur une seule ligne (ou colonne selon l’axe principal) ou sur plusieurs lignes (ou colonne selon l’axe principal).
Par défaut, flex tente de placer tous les items sur une même ligne).
Les valeurs de flex-wrap sont :
> nowrap (les éléments ne passent pas à la ligne, valeur par défaut)
> wrap (les éléments passent à la ligne dans le sens de lecture)
> wrap-reverse (les éléments passent à la ligne dans le sens inverse)
Avec la mention wrap, lorsque nous diminuons la fenêtre, les enfants passent à la ligne en fonction de l'espace disponible.
Si aucun passage à la ligne n’est autorisé, les éléments vont par défaut essayer de rétrécir pour rentrer dans le conteneur. C’est la raison pour laquelle vous ne voyez aucun élément dépasser. Cependant, si vous essayez d’ajouter des éléments dans le conteneur, vous allez voir qu’ils vont dépasser à partir du moment où la somme des largeurs des contenus sera plus importante que la taille du conteneur.