html - 等宽 flex 元素，即使在它们包装后

Question

是否可以像这样制作一个纯 CSS 解决方案:

1. 元素有一些最小宽度。
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 技术 Grid Layout，最后一行对齐不是问题。事实上，使用此方法非常简单(并且不需要更改 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 property 是 grid-column-gap 和 grid-row-gap 的简写。此规则在 网格项之间设置了 10 像素的间距。它不适用于元素和容器之间的区域。

请注意，上面的设置都是在容器级别的。与 flex 元素不同，我们可以从网格元素中移除高度、宽度和边距(在一定程度上)的责任。

---

浏览器对 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