web-dev-qa-db-fra.com

CSS flexbox redimensionnement dynamique: préférez max-width

J'ai une ligne flexbox conteneur qui enveloppe.
Sur les éléments qu'il contient, j'ai défini:

  • flex: 1; afin que les articles se développent pour remplir horizontalement le conteneur
  • min-width: X; max-width: Y;' afin que les articles restent dans une taille acceptable.

Voici un exemple simple de codepen .

Le problème (comme visible dans l'exemple) est le comportement de l'enveloppe de redimensionnement.

Que se passe-t-il:
Chaque élément est aussi petit que possible, de sorte que le nombre maximum d'entre eux est placé dans la première ligne, ils grandissent alors autant que nécessaire pour remplir la ligne. Par conséquent, l'élément max-width n'est presque jamais atteint et les éléments sont beaucoup plus proches de min-width.

Ce que je recherche:
. Par conséquent, l'élément min-width n'est presque jamais atteint et les éléments sont beaucoup plus proches de max-width.

En d'autres termes:
Je veux le nombre minimum possible d'articles par ligne, pas le maximum.

Existe-t-il un moyen de le faire en CSS sans JS?

Merci !

css3flexbox
21
Salomon BRYS

Je pense que ce que vous cherchez c'est flex-basis, justify-content, et align-content.

#container {
  background-color: green;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: stretch;
}

.item {
  flex: 1;
  flex-basis: 200px;
  height: 100px;
  min-width: 100px;
  max-width:200px;
  margin: auto;
  border: solid black 2px;
  background-color: red;
}

Si vous souhaitez que les cases rouges remplissent toute la zone, vous pouvez retirer la largeur maximale du div.item.

13
FiSH GRAPHICS