等宽的弹性项目，即使在它们包裹之后

Question

有没有可能做一个像这样的纯 CSS 解决方案：

1. 项目有一些min-width。
2. 它们应该动态增长以填充所有容器宽度，然后换行
3. 列表中的所有项目应具有相同的宽度。

这就是现在的样子：

这也是我想要的样子（我手动管理了底部项目的宽度只是为了显示预期的结果）：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

<div class="container">
  <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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

这是fiddle demo。

Answer 1

目前，flexbox 没有提供干净的解决方案来对齐最后一行或最后一列中的灵活项。它超出了当前规范的范围。

以下是人们用来解决问题的更多信息和各种解决方案：

• Targeting flex items on the last row
• Is it possible for flex items to align tightly to the items above them?

不过，最后一行对齐对于另一种 CSS3 技术网格布局来说不是问题。事实上，使用这种方法非常简单（并且不需要更改 HTML）：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

<div class="container">
  <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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

jsFiddle demo

grid-template-columns 属性设置明确定义的列的宽度。上面的规则是告诉网格容器创建尽可能多的列（auto-fit），每列的宽度最小为 100px，最大为1fr，这会消耗剩余空间（类似于flex-grow: 1）。当行上没有更多空间时，将创建一个新行。

grid-auto-rows 属性设置自动创建的行的高度。在这个网格中，每一行都是 20 像素高。

grid-gap 属性是grid-column-gap 和grid-row-gap 的简写。此规则在网格项目之间设置 10px 的间隙。它不适用于项目和容器之间的区域。

请注意，上面的设置都是容器级别的。与弹性项目不同，我们可以从网格项目中移除高度、宽度和边距（在一定程度上）的责任。

---

浏览器支持 CSS 网格

• Chrome - 自 2017 年 3 月 8 日起提供全面支持（版本 57）
• Firefox - 自 2017 年 3 月 6 日起提供全面支持（版本 52）
• Safari - 自 2017 年 3 月 26 日起全面支持（版本 10.1）
• Edge - 自 2017 年 10 月 16 日起提供全面支持（版本 16）
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片：http://caniuse.com/#search=grid

---

Firefox 中酷炫的网格叠加功能： 在 Firefox 开发工具中，当您检查网格容器时，CSS 声明中有一个小网格图标。单击它会在页面上显示网格的轮廓。

更多详情在这里：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Answer 2

不对，没有纯 CSS 解决方案。 Flexbox 总是试图用可增长的项目填充容器的整个宽度。因此，您需要插入一些隐藏的项目，这些项目将填充空白空间，同时对用户不可见。

试试这个：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

.item-hidden {
  min-width: 100px;
  flex-grow: 1;
  border: 1px solid transparent;
}

<div class="container">
  <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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
</div>

这里讨论了类似的问题：Flex-box: Align last row to grid

将来，您将能够使用多个 ::after 伪元素，因此您无需在 HTML 中插入额外的项目。