这是一个主意：这是使用flexbox设置的，容器的高度，方向设置为
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>
codepen
#1 楼
flex容器的初始设置为align-content: stretch。这意味着多行flex项将沿交叉轴均匀分布。
要覆盖此行为，请应用
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允许针对单个弹性项目覆盖此默认对齐方式。8.4。包装伸缩线：
align-content属性align-content属性在横轴上有多余空间的情况下在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相似。
评论
感谢您的解释:)完全忘记了align-content属性
– j.grima
16-11-30在14:28