禁用自动换行间距
禁用自动换行间距
提问于 2018-06-03 03:57:20
我有一个想要显示的项目列表，并且我正在使用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
有什么办法来解决这个问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 05:12:15
之所以会发生这种情况，是因为flex容器的初始设置被设置为align-content: stretch，然后它会填满整个剩余空间。
您可以添加align-content: flex-start来覆盖此默认行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50660672
复制相关文章
相似问题