css3 - flex布局下，如何对齐子元素？

Question

如图是我使用justify-content:space-around;，但我希望的是第二行子元素能和第一行上下对齐，其中子元素的数量不固定，请问如何解决？

Answer 1

justify-content:space-between;

Answer 2

可能需要点计算：

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

在线查看 https://jsfiddle.net/zktf3oc5/

Answer 3

flex 布局在父容器不定宽的情况下做不到你想要的效果.

Answer 4

Flex实现布局，主要是你的想法突破常规，横着布局不成功，使用竖轴方向布局，设为三列，每列，
flex-direction:colomn;
justify-content :space-around;
总的三列再采用一次
justify-content :space-around;