即使在包装后也具有等宽的 flex 项目

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>

这是一个小提琴演示。

Answer 1

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

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

• 定位最后一行的弹性项目
• 弹性项目是否可以与它们上方的项目紧密对齐？

但是，最后一行对齐对于另一种 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 演示

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

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

grid-gap属性是grid-column-gap和grid-row-gap的简写。 此规则在网格项之间设置 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

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 中插入其他项目。