css3 - Comment aligner les éléments enfants sous une disposition flexible?

Question

Comme le montre l'image, j'utilise justifier-content:space-around;, mais ce que je veux, c'est que la deuxième rangée d'éléments enfants puisse être alignée de haut en bas avec la première ligne. Le nombre d'éléments enfants n'est pas fixe. Comment le résoudre?

Answer 1

justify-content:espace-entre;

Answer 2

Vous aurez peut-être besoin de quelques calculs :

.container {
  width: 510px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
}

.item {
  width: 150px;
  height: 150px;
  background: red;
  margin: 10px;
}

<p class="container">
  <p class="item"></p>
  <p class="item"></p>
  <p class="item"></p>
  <p class="item"></p>
  <p class="item"></p>
</p>

Voir en ligne https://jsfiddle.net/zktf3oc5/

Answer 3

flex La mise en page ne peut pas obtenir l'effet souhaité lorsque le conteneur parent a une largeur variable.

Answer 4

Flex implémente la mise en page, principalement parce que votre idée brise la convention. Si la mise en page horizontale échoue, utilisez la mise en page à axe vertical, définissez-la sur trois colonnes, chaque colonne,
flex-direction:colomn;
justify-content:space- around;
Total Réutilisez les trois colonnes
justify-content :space-around;