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/56429328/

html - 在最后一行调整 flex 元素的大小

上一篇：css - 我可以合并 :nth-child() or :nth-of-type() with an arbitrary selector?

下一篇：css - IE 中的关键帧相对 (vw) 字体大小奇怪的行为