d性项目在包装时会在它们之间创建空间

d性项目在包装时会在它们之间创建空间

创建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