我有一个想要显示的项目列表,并且我正在使用flex-wrap。
但我的问题是,列(在第一列之后)在剩余空间的中心对齐,而不是坚持到第一列。
.items {
direction: ltr;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 500px;
}
.items .item {
font-size: 5rem;
border: 1px solid grey;
border-radius: 1rem;
padding: 1rem;
margin: 1rem;
width: 20rem;
text-align: center;
}
<div class="items">
<div class="item">
#1
</div>
<div class="item">
#2
</div>
<div class="item">
#3
</div>
<div class="item">
#4
</div>
<div class="item">
#5
</div>
</div>
https://codepen.io/anon/pen/oyjmaV
有什么办法来解决这个问题吗?
发布于 2018-06-03 05:12:15
之所以会发生这种情况,是因为flex容器的初始设置被设置为align-content: stretch
,然后它会填满整个剩余空间。
您可以添加align-content: flex-start
来覆盖此默认行为。
https://stackoverflow.com/questions/50660672
复制相似问题