创建Flex容器时，初始设置为 align-content: stretch
。
这导致多行柔性物品沿容器的横轴均匀地分布。有点像
flex: 1沿主轴设置：伸缩项均匀地分布在整个直线上。
结果，
align-content: stretch柔性物品包装时可能会导致缝隙。
简单的解决方案是使用覆盖此设置align-content: flex-start
。
html,body { width: 100%; height: 100%;}#container { display: flex; height: 100%; background-color: blue;}.block { flex: 1;}#left { background-color: green;}#center { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; }#right { background-color: orange;}.flexContainer { flex: 1; width: 50%; min-width: 100px; max-width: 50%; height: 150px; background-color: red; padding: 10px;}.flexDiv { width: 100%; height: 100%; background-color: yellow;}<div id="container"> <div id="left" >Left</div> <div id="center" > <div > <div ></div> </div> <div > <div ></div> </div> </div> <div id="right" >Right</div></div>参考：
8.4。 包装伸缩线：
align-content属性align-content当横轴上有多余的空间时，此属性会在Flex容器内将Flex容器的线justify-content对齐，类似于在主轴内对齐单个项目的方式。注意，此属性对单行flex容器无效。
该属性接受六个值。
stretch是默认值。
stretch线拉伸以占据剩余空间。如果剩余的自由空间为负，则此值等于
flex-start。否则，自由空间会在所有线之间平均分配，从而增加其交叉尺寸。
其余值为：
flex-start/
flex-end/
center/
space-between/
space-around
