我试图在一个高度固定的容器内让多个项目垂直排列,在没有空间时它们将继续并排。
这是我的设想:
我使用了 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>
align-content
属性。 - j.grima