css3 - flex版面下，如何對齊子元素？

Question

#如圖是我使用justify-content:space-around;，但我希望的是第二行子元素能和第一行上下對齊，其中子元素的數量不固定，請問如何解決？

Answer 1

調整內容：空間之間；

Answer 2

可能需要點計算：

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

.item {
  width: 150px;
  height: 150px;
  background: red;
  margin: 10px;
}</code>

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

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

Answer 3

flex 版面在父容器不定寬的情況下做不到你想要的效果.

Answer 4

Flex實現佈局，主要是你的想法突破常規，橫著佈局不成功，使用豎軸方向佈局，設為三列，每列，
flex-direction:colomn;
justify-content :space-around;
總的三列再採用一次
justify-content :space-around;