定位最后一行的弹性项目

我的问题是，我想要的可变范围宽度的柔性盒，一切运作良好，但不是在最后一行。 即使在行不满儿童（最后一行）的情况下，我也希望所有孩子都有同样的维度。

#products-list { position:relative; display: flex; flex-flow: row wrap; width:100%; } #products-list .product { min-width:150px; max-width:250px; margin:10px 10px 20px 10px; flex:1; } 

在JSFiddle的例子中，我创build了一个dynamic的情况。

我的flex div可以缩小到150px，长到250px，但所有的都必须是相同的大小（显然我想要一个CSS解决scheme，JS我知道的方式）。

Answer 1

不幸的是，在当前的flexbox（第1级）迭代中，没有干净的方法来解决最后一行alignment问题。 这是一个常见的问题。

具有以下特性的flex属性将是有用的：

• last-row
• last-column
• only-child-in-a-row
• alone-in-a-column

这个问题似乎是Flexbox Level 2的高优先级：

• CSS工作组维基 – 规范问题和规划
• https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

尽pipe这种行为在flexbox中很难实现，但在CSS Grid Layout中很简单容易：

• 等宽度弹性项目甚至包装后

如果Grid不是一个选项，下面是包含各种flexbox hacks的类似问题列表：

• 正确调整和alignment最后一行的弹性项目
• 弹性框：将最后一行alignment到网格
• Flexbox包装 – 最后一行的不同alignment方式
• Flex项目被强制转换为新行时，如何保持相同的维度？
• 单独一个元素的select器？
• alignment上一个Flexbox行中的元素
• 我如何允许flex-items在保持相同大小的同时增长？
• 左alignmentflexbox的最后一行，使用space-between和margin
• 最后一行的弹性项目之间的边距不一致
• 如何保持包装的flex-items与前一行元素的宽度相同？
• 如何alignment多行柔性盒中最后一行/最后一行
• 网格的最后一个子节点之间会产生巨大的排水槽原因
• pipe理justify-content：最后一行之间的空格