等宽度弹性项目，即使在包装后也是如此

作者

有没有可能制作出这样一个纯CSS解决方案：

  1. 项目有一些最小宽度
  2. 它们应该动态增长以填充所有容器宽度，然后换行为新行
  3. 列表中的所有项目的宽度应相等。

这就是它现在的样子：

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

.container{
显示器：flex；
柔性包装：包装；
}
.项目{
背景：黄色；
最小宽度：100px；
高度：20px；
文本对齐：居中；
边框：1px纯红；
柔性生长：1；
}
&lt；div class=“container”&gt；
&lt；div class=“项目”&gt；1&lt/部门&gt；
&lt；div class=“项目”&gt；2&lt/部门&gt；
&lt；div class=“项目”&gt；3&lt/部门&gt；
&lt；div class=“项目”&gt；4&lt/部门&gt；
&lt；div class=“项目”&gt；5&lt/部门&gt；
&lt；div class=“项目”&gt；6&lt/部门&gt；
&lt；div class=“项目”&gt；7&lt/部门&gt；
&lt；div class=“项目”&gt；8&lt/部门&gt；
&lt；div class=“项目”&gt；9&lt/部门&gt；
&lt；div class=“项目”&gt；10&lt/部门&gt；
&lt/部门&gt

这是一个小提琴演示

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

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

  • 针对最后一行的flex项目
  • flex项目是否可以与上面的项目紧密对齐

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

.container{
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
网格自动行：20px；
网格间距：5px；
}
.项目{
背景：黄色；
文本对齐：居中；
边框：1px纯红；
}
&lt；div class=“container”&gt；
&lt；div class=“项目”&gt；1&lt/部门&gt；
&lt；div class=“项目”&gt；2&lt/部门&gt；
&lt；div class=“项目”&gt；3&lt/部门&gt；
&lt；div class=“项目”&gt；4&lt/部门&gt；
&lt；div class=“项目”&gt；5&lt/部门&gt；
&lt；div class=“项目”&gt；6&lt/部门&gt；
&lt；div class=“项目”&gt；7&lt/部门&gt；
&lt；div class=“项目”&gt；8&lt/部门&gt；
&lt；div class=“项目”&gt；9&lt/部门&gt；
&lt；div class=“项目”&gt；10&lt/部门&gt；
&lt/部门&gt

JSFIDLE演示

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

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

网格间距属性是网格列间距和网格行间距的缩写。此规则在网格项之间设置10px的间距。它不适用于项目和容器之间的区域

请注意，上面的设置都在容器级别。与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

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with