将弹性项目定位在最后一行或特定行

Question

我的问题是我想要具有可变范围宽度的 flexbox，并且一切正常，但不是在最后一行。我希望所有孩子都有相同的尺寸，即使该行没有孩子（最后一行）。

 #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 中创建了动态情况

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

原文由 Baro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

按照以下方式设置 flex 属性会很有用：

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

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

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

虽然这种行为在 flexbox 中很难实现，但在 CSS Grid Layout 中很简单：

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

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

• 在最后一行正确调整弹性项目的大小和对齐
• Flex-box：将最后一行与网格对齐
• Flexbox wrap - 最后一行的不同对齐方式
• 弹性项目如何在被迫到新行时保持相同的尺寸？
• 一行中单独一个元素的选择器？
• 对齐最后一行 flexbox 中的元素
• 我怎样才能让弹性项目在保持相同大小的同时增长？
• 使用 space-between 和 margins 左对齐 flexbox 的最后一行
• 最后一行弹性项目之间的边距不一致
• 如何使包裹的弹性项目与上一行的元素保持相同的宽度？
• 如何在多行 flexbox 中左对齐最后一行/最后一行
• 网格的最后一个孩子得到巨大的排水沟原因是 flexbox space-between
• 管理 justify-content: space-between 最后一行
• 行为之间的 Flexbox 空间与换行相结合
• 可以使用 CSS Flexbox 在每一行上拉伸元素同时保持一致的宽度吗？

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

作为一种快速而肮脏的解决方案，可以使用：

 .my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}

原文由 Boris D. Teoharov 发布，翻译遵循 CC BY-SA 4.0 许可协议