Contrôler le nombre d’éléments sur chaque ligne flexible lorsque le conteneur est configuré pour envelopper

J’utilise css flexbox pour dissortingbuer un certain nombre d’éléments dans un conteneur. J’ai un conteneur flexible comme celui-ci:

.container{ display: flex; flex-flow: row wrap; align-content : center; justify-content : center; align-items : center; } 

Lorsque j’ajoute un certain nombre d’éléments de largeur / hauteur fixes dans le conteneur, ceux-ci sont placés comme prévu: s’ils ne tiennent pas sur une seule ligne flexible, le conteneur en crée un nouveau et certains éléments sont placés sur la ligne suivante. . Ce que je voudrais faire, c’est contrôler le nombre d’éléments déplacés vers la ligne suivante au même moment.

Par exemple, si je place 9 éléments (qui tiennent d’abord sur une ligne flexible), puis que je rétrécis la fenêtre du navigateur, le conteneur déplace uniquement l’article le plus à droite de la ligne suivante, laissant 8 éléments sur la première ligne flexible. et un seul sur la seconde, ce qui n’est pas très esthétique à mon avis. Si je rétrécis davantage la fenêtre, j’ai une dissortingbution 7-2, et ainsi de suite.

Ma question est la suivante: puis-je contrôler le nombre d’articles déplacés en même temps? Mon objective serait de répartir le nombre d’articles de manière égale entre les lignes flexibles, en ayant toujours les plus larges au-dessus, pour un nombre quelconque d’articles.

Par exemple, 9 éléments seraient dissortingbués de cette façon:

  • Lorsque tous les éléments entrent dans une ligne: 1 flex-line: 9 éléments

  • Lorsque 9 articles ne vous conviennent pas, passez à: 2 lignes flexibles: 5 articles sur la première ligne, 4 sur la seconde.

  • Lorsque 5 éléments ne rentrent pas dans une ligne, passez à: 3 lignes flexibles: 3-3-3

  • Lorsque 3 éléments ne rentrent pas dans une ligne, passez à: 5 flex-lines: 2-2-2-2-1

Existe-t-il un moyen (peut-être avec l’aide de jQuery) d’accomplir quelque chose comme ça? Toute solution pour un nombre connu d’éléments serait appréciée, bien que mon intention soit de trouver une solution applicable de manière dynamic à un nombre quelconque d’éléments. Merci!

Ce que vous recherchez est parfois appelé requêtes de quantité .

Si les requêtes de média autorisent des points d’arrêt basés sur les dimensions de la fenêtre, les requêtes de quantité autorisent des points d’arrêt basés sur la quantité de contenu (par exemple, nombre de frères et sœurs).

Cela ne fait pas partie d’une norme officielle, mais je n’appellerais pas cela un piratage. Le code peut être assez élégant. C’est un peu impliqué, cependant. Voici:

  • Nombre de requêtes pour CSS
  • Éléments de style basés sur le nombre de frères et sœurs
  • Comment spécifier un élément après lequel envelopper dans css flexbox?

Voulez-vous dire flex-basis ?

 .container .item { flex-basis: 25%; } 

Il divisera au maximum 4 éléments par ligne.