css 使用flex换行时如何减少差距空间：换行[复制]

z4bn682m 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(121)

此问题在此处已有答案：

What's the difference between align-content and align-items?（15个答案）
昨天关门了。
在换行时如何减少或删除此空间？什么也会导致此行为。
下面是截图和代码
enter image description here

#gallery .card-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.card-container .card {
  border: solid black 1px;
  height: 40%;
  width: 30%;
  flex: 1 1 21rem;
}

<section id="gallery">
  <div class="card-container">
    <div class="card">
      <h1>test</h1>
    </div>
    <div class="card">
      <h1>test</h1>
    </div>
    <div class="card">
      <h1>test</h1>
    </div>
  </div>
</section>

css

来源：https://stackoverflow.com/questions/75819869/how-do-i-reduce-the-gap-space-when-wrapping-using-flex-wrap

1条答案

按热度按时间

hc8w905p1#

用这种格式编写CSS：

#gallery .card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card-container .card {
  border: solid black 1px;
  height: 50%;
  width: 50%;
}

赞(0）回复(0）举报 2023-03-24

我来回答

css 使用flex换行时如何减少差距空间：换行[复制]

1条答案

相关问题

热门标签

最新问答