flex布局换行元素产生的间隙问题？

Question

在使用flex布局的时候，发现换行的元素不会紧贴着上一排元素，而是产生了一定的间隙：

灰色部分是多出来的地方，这是当前页面的代码：

.container{
    display: flex;
    flex-flow: row wrap;
    background: rgb(185, 185, 185);
    height: 10em;       
}
.item{
    flex: 1 20%;
    height: 3em;
    background: rgb(156, 252, 255);
}
.item:nth-child(2n) {
    background: #79afec;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

好像是flex布局自动上下平分了空间，请问有没有办法在保证容器和元素高度的情况下让换行的元素紧贴着上一行呢？

Answer 1

.container{
    display: flex;
    flex-flow: row wrap;
    background: rgb(185, 185, 185);
    height: 10em;  
    align-content: flex-start;     
}

Answer 2

在大容器上写上
align-content: flex-start
即可;

Answer 3

从根本解决问题：

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

取值情况：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
stretch（默认值）：轴线占满整个交叉轴。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

对应的效果图：