等宽弹性项目，即使在它们包装后

Question

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

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

这是现在的样子：

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

.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

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

试试这个：

.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.

插入额外的项目

Answer 2

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

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

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，消耗剩余的 space （类似于 flex-grow: 1）。当行中没有更多 space 时，将创建一个新行。

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

grid-gap 属性是 grid-column-gap 和 grid-row-gap 的 shorthand。此规则在个网格项之间设置了 10 像素的间距 。它不适用于项目和容器之间的区域。

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

浏览器支持 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

等宽弹性项目，即使在它们包装后

Equal width flex items even after they wrap

html

css

flexbox

css-grid

jsFiddle demo