我有一个要显示的项目列表,我正在使用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
有解决问题的想法吗?
发生这种情况的原因是因为flex容器的初始设置被设置为align-content: stretch
,然后填充了剩余的全部空间。
您可以添加align-content: flex-start
以覆盖此默认行为。
更新的Codepen:https ://codepen.io/anon/pen/wXKOQy
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句