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

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-startflex-endcenterspace-betweenspace-aroundstretch以下是定义stretch:stretch线条伸展以占据剩余的空间。如果剩余的空闲空间为负值，则此值与flex-start..否则，自由空间被平分在所有的线之间，增加它们的交叉大小.换句话说，align-content: stretch在交叉轴上类似于flex: 1在主轴上。