html - 将 flex 元素定位在最后一行或特定行

我的问题是我想要范围宽度可变的 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;
}

我创建了 a dynamic situation in jsFiddle

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

最佳答案

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

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

最后一行
最后一列
only-child-in-a-row
alone-in-a-column

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

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

Equal width flex items even after they wrap

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

关于html - 将 flex 元素定位在最后一行或特定行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42176419/

html - 将 flex 元素定位在最后一行或特定行

上一篇：html - 构建我的 AngularJS 应用程序

下一篇：css - 在响应式布局中设置元素高度？