防止显示包装上的空白：flex [重复]

Posted 2023-03-05

【中文标题】防止显示包装上的空白：flex [重复]

【英文标题】：prevent white space at wrap with display: flex [duplicate]

【发布时间】：2021-01-18 08:35:12

【问题描述】：

对于这种情况，我希望“第四项任务”位于“第一项任务”下。我应该怎么做才能实现这一目标？谢谢。

<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;
  

https://jsfiddle.net/3avqjx1e/

【参考方案1】：

您可以通过在 .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>

【讨论】：

谢谢兄弟。它又快又简单。我曾尝试使用 align-items 和 justify-content 进行随机操作，但从未听说过 align-content。

【参考方案2】：

一种方法是在您的 CSS .list 类中添加 align-content: flex-start;。

否则，您可以从 .list 类中删除 height 属性，并让它随卡片动态增加，并用具有 background-color: yellow; 和 height:400 的 .container 类包装 .list。

代码： https://jsfiddle.net/abhinav3414/ysnevatx/

.container 
  height: 400px;
  background-color: yellow;


.list 
  width: 600px;
  display: flex;
  flex-wrap: wrap;


.card 
  background-color: blue;
  border: solid black 2px;
  flex: 0 0 185px;
  height: 69px;


<div class="container">
  <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>
</div>