L'impact de la propriété width utilisée avec flex-grow ?

Question

Veuillez consulter le code ci-dessous :

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
  border: 1px solid;
  width: 1000px;
}

<header>
  <ul class="child">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
  </ul>
</header>

Notez la largeur de 1000px. Lorsque je charge la page, il y a cinq rangées, comme je m'y attendais. Si je supprime le width les cases apparaissent sur une seule ligne, comme prévu.

Maintenant, si j'ajoute une largeur de 1px, le seul changement est que toutes les cases ont la même taille, c'est-à-dire 372,28 pixels (et non 1px). Il me semble que le comportement est le suivant :

1. Si une certaine largeur est ajoutée aux éléments flexibles, ce qui signifie qu'ils peuvent tous tenir sur une seule ligne, assurez-vous que toutes les cases ont la même taille.
2. Si une largeur est ajoutée aux éléments flexibles, ce qui signifie qu'ils ne peuvent pas tous tenir sur une seule ligne, il faut alors honorer la largeur.
3. Si une largeur n'est pas ajoutée, les cases peuvent être de n'importe quelle taille, par exemple, la case du mercredi est la plus grande dans ce cas, car le mercredi est le mot le plus long.

Ai-je bien compris et pourquoi la largeur affecte-t-elle les éléments flexibles de cette manière ?

J'ai fait mes propres recherches et j'ai trouvé des questions comme celle-ci : Quelles sont les différences entre flex-grow et width ? . Cependant, je n'ai pas trouvé de réponse à ma question. J'ai également lu des informations sur la propriété "flex grow" ici : https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-grow-property

Answer 1

Il est important de noter que width , height y flex-basis dans un conteneur flexible représentent le taille initiale de l'article.

Une fois que cette taille est déterminée, puis flex-grow y flex-shrink entrer en scène et faire leur travail, si possible. Cela peut changer la taille initiale.

Maintenant, décomposons votre question en points principaux :

Remarquez la largeur de 1000px. Lorsque je charge la page, il y a cinq rangées, comme je m'y attendais. Si je supprime le width les cases apparaissent sur une seule ligne, comme prévu.

OK

---

Maintenant, si j'ajoute une largeur de 1px, le seul changement est que toutes les cases ont la même taille, c'est-à-dire 372,28 pixels (et non 1px).

Voulez-vous dire "par exemple, 372,28 pixels (et non 1px)", et non "c'est-à-dire", car la taille de l'élément variera en fonction de la taille de la fenêtre d'affichage. En d'autres termes, la taille de chaque élément sera modifiée lorsque vous redimensionnerez la fenêtre. Mais ce n'est pas un point essentiel.

Toutes les boîtes sont en effet de longueur égale. Cela se produit parce que le width est réglé sur 1px .

Si vous retirez le width la longueur des cases varierait alors en fonction de la longueur de leur contenu. Cela est dû au fait que la règle par défaut width / flex-basis es auto .

---

Si une certaine largeur est ajoutée aux éléments flexibles, ce qui signifie qu'ils peuvent tous tenir sur une seule ligne, assurez-vous que toutes les cases ont la même taille.

Pas nécessairement.

El width n'est pas toujours liée à la présence d'articles sur une seule ligne. Ce comportement est contrôlé par la propriété flex-wrap y flex-direction propriétés.

En outre, le width La propriété n'est pas toujours liée au fait que les articles ont tous la même longueur. D'autres facteurs, tels que flex-grow peuvent avoir un impact.

---

Si une largeur est ajoutée aux éléments flexibles, ce qui signifie qu'ils ne peuvent pas tous tenir sur une seule ligne, il faut alors honorer la largeur.

Pas nécessairement.

flex-grow , flex-shrink y flex-wrap peuvent tous avoir un impact.

Si vous voulez le width / flex-basis d'un élément pour rester fixe, définissez les deux flex-shrink y flex-grow à 0 (qui désactive ces fonctions).

---

Si une largeur n'est pas ajoutée, les cases peuvent être de n'importe quelle taille, par exemple, la case du mercredi est la plus grande dans ce cas, car le mercredi est le mot le plus long.

Pas nécessairement.

flex-grow , flex-shrink y flex-wrap peuvent tous avoir un impact.

---

Plus de détails :

• Faire en sorte que flex-grow développe les éléments en fonction de leur taille d'origine
• Les articles flexibles se réduisent en dessous de la base flex