css3 - Wie richte ich untergeordnete Elemente im Flex-Layout aus?

Question

Wie im Bild gezeigt, verwende ich justify-content:space-around;, aber ich möchte, dass die zweite Reihe untergeordneter Elemente an der ersten Reihe ausgerichtet werden kann. Die Anzahl der untergeordneten Elemente ist nicht festgelegt. Wie man es löst?

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;