【flex布局】多图2行，怎么写？

Question

现在图片数量不固定，只知道所有图片尺寸一致，每行最多3张，超过3行换行，flex该怎么写呢？拜谢！！

Answer 1

通过设置flex-basis: calc(100%/3)实现三等分

<div class="container">
  <div style="background-color: red;"></div>
  <div style="background-color: green;"></div>
  <div style="background-color: grey;"></div>
  <div style="background-color: yellow;"></div>
  <div style="background-color: pink;"></div>
</div>

.container {
  display: flex;
  flex-flow: row wrap;
}

.container > div {
  flex: 0 1 calc(100% / 3);
  height: 100px;
}

Answer 2

类似弹性盒子，这样试试

display: flex;
flex-flow: wrap