css3 - How to align child elements under flex layout?

Question

As shown in the picture, I use justify-content:space-around;, but I hope that the second row of child elements can be aligned up and down with the first row. The number of child elements is not fixed. How to solve it?

Answer 1

justify-content:space-between;

Answer 2

You may need some calculations:

.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>

View online https://jsfiddle.net/zktf3oc5/

Answer 3

flex The layout cannot achieve the effect you want when the parent container has a variable width.

Answer 4

Flex implements layout, mainly because your idea breaks through the convention. If the horizontal layout is unsuccessful, use the vertical axis layout, set it to three columns, each column,
flex-direction:colomn;
justify-content:space-around;
Total Use the three columns again
justify-content :space-around;