小编ell*_*175的帖子

Flexbox 网格最多 3 列，最少 2 列？等宽的物品？

我正在尝试创建一个最多 3 列的网格。但是，如果网格中只有 2 个项目，我希望它们拉伸以占据每个空间的 50%。

目前，这一切都在起作用，但如果网格中的项目数量不是 3 的倍数，则剩余项目会伸展以占据其余空间。我希望它们都具有相同的宽度。这可能吗？

这是我有多远：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0;
  width: 900px;
  box-sizing: border-box;
}

.flex-item {
  box-sizing: border-box;
  padding: 15px 18px;
  font-size: 16px;
  border: 1px solid #777;
  flex: 1;
  min-width: 33.33%;
}

Run Code Online (Sandbox Code Playgroud)

<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
</div>
<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
  <div class="flex-item">Four</div>
  <div class="flex-item">Five</div>
  <div class="flex-item">Six</div>
  <div class="flex-item">Seven</div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css flexbox css-grid

ell*_*175

2020 09-25

5
推荐指数

1
解决办法

238
查看次数