背景

假设有个场景需要flex布局来让元素横向排布，但是因为元素后续可以新增，有可能会变得很多，这时如果都弄到一行展示在观感上就很不好。所以就希望它能在一行超过5个之后再换行。（这样既能确保元素不会都纵向布局占据过多空间，又不会影响横向的展示效果）

那如何才能实现这种效果呢？

以下面这样的一个结构来举例。

<div class="container">
  <div class="item"></div>
  ...
</div>

步骤

1.  先给父元素设置`display:flex`和`flex-wrap:wrap`

1.  再通过`flex-basis`控制元素的实际展示宽度

    1.  这里一行展示5个就设置其值为20%

1.  然后再设置`flex-grow:1` ，让元素尽可能去占满剩余空间

最终代码

.container{
  display:flex;
  flex-wrap:wrap;
}
.item{
  flex-basis:20%;
  flex-grow:1
  // 或者写成
  flex:1 1 20%; // 分别表示flex-grow, flex-shrink, flex-basis的值
}