禁用弹性环绕间距答案

【问题标题】：Disable flex wrap spacing禁用弹性环绕间距
【发布时间】：2019-04-21 03:27:18
【问题描述】：

我有一个我想要显示的项目列表，我正在使用 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

有解决问题的办法吗？

【问题讨论】：

如果容器上没有背景，那么 inline-flex 呢？ codepen.io/gc-nomade/pen/eKpxqr 或浮动 codepen.io/gc-nomade/pen/yEYwLv

标签： javascript html css flexbox

【解决方案1】：

发生这种情况的原因是弹性容器的初始设置设置为align-content: stretch，然后它会填满剩余空间。

您可以添加align-content: flex-start 来覆盖此默认行为。

更新的 Codepen：https://codepen.io/anon/pen/wXKOQy

【讨论】：