当多行挠曲项目包装时，移除它们之间的空间(间隙)

Question

当多行挠曲项目包装时，移除它们之间的空间(间隙)我正试图在一个设置高度的容器中，在彼此下面放置一些物品。如果没有空间，则项目将在彼此之间继续进行。这就是我的想法：我正试着用柔性箱来实现这一点，一个有固定高度的容器，方向被设置为column和flex-wrap是wrap:问题是两栏之间有很大的差距。我试着设置两个justify-content和align-items到flex-start，但这可能是默认值。有什么办法解决这个问题吗？以下是代码：* {  box-sizing: border-box;}body {  font-family: sans-serif;}.container {  display: flex;  flex-wrap: wrap;  height: 300px;  flex-direction: column;  background-color: #ccc;}.items {  width: 100px;  height: 100px;  margin: 10px;  background-color: tomato;  color: white;  font-size: 60px;  font-weight: bold;  text-align: center;  padding: 15px;}<div class="container">  <div class="items">1</div>  <div class="items">2</div>  <div class="items">3</div>  <div class="items">4</div>  <div class="items">5</div></div>密码

Answer 1

Flex容器的初始设置为align-content: stretch.

这意味着多条弯曲项目将沿着交叉轴均匀分布。

若要重写此行为，请应用align-content: flex-start容器里。

---

当你在一个单线柔性集装箱(即flex-wrap: nowrap)，用于沿交叉轴分配空间的属性为align-items和align-self.

当你在一个多线柔性集装箱(即flex-wrap: wrap)-就像问题中一样-用于分发的属性挠曲线(行/列)沿交叉轴align-content.

从规范中：

8.3.交叉轴对齐：align-items和align-self特性

align-items设置所有FLEX容器的项(包括匿名FLEX项)的默认对齐方式。align-self允许对单个FLEX项重写此默认对齐。

8.4.包装折线：align-content财产

这个align-content属性在交叉轴中有额外空间时，在Flex容器内对齐一个Flex容器的行，类似于justify-content在主轴内对齐各个项目.注意，此属性对单行FLEX容器没有任何影响。

这个align-content属性包含六个值：

• flex-start

• flex-end

• center

• space-between

• space-around

• stretch

以下是定义stretch:

stretch

线条伸展以占据剩余的空间。如果剩余的空闲空间为负值，则此值与flex-start..否则，自由空间被平分在所有的线之间，增加它们的交叉大小.

换句话说，align-content: stretch在交叉轴上类似于flex: 1在主轴上。