<分区>
对于这种情况，我希望“第四个任务”位于“第一个任务”之下。我应该怎么做才能实现这一目标？谢谢。
<div class="list">
<div class="card"><h5>First Task</h5></div>
<div class="card"><h5>Second Task</h5></div>
<div class="card"><h5>Third Task</h5></div>
<div class="card"><h5>Fourth Task</h5></div>
</div>
.list {
width: 600px;
height: 400px;
background-color: yellow;
display: flex;
flex-wrap: wrap;
}
.card {
background-color: blue;
border: solid black 2px;
flex: 0 0 185px;
height: 69px;
}
最佳答案
您可以通过在 .list 类上添加 align-content: flex-start; 来完成此操作。
.list {
max-width: 600px;
height: 400px;
background-color: yellow;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.card {
background-color: blue;
border: solid black 2px;
flex: 0 0 185px;
height: 69px;
}<div class="list">
<div class="card"><h5 class="bp3-heading">First Task</h5></div>
<div class="card"><h5 class="bp3-heading">Second Task</h5></div>
<div class="card"><h5 class="bp3-heading">Third Task</h5></div>
<div class="card"><h5 class="bp3-heading">Fourth Task</h5></div>
</div>关于css - 防止在显示 : flex 时出现空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64175393/