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

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;
}

我创建了 a dynamic situation in jsFiddle

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

Answer 1

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

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

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

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

• > CSS Working Group Wiki - Specification Issues and Planning
• > https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

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

• > Equal width flex items even after they wrap

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

• > Properly sizing and aligning the flex item(s) on the last row
• > Flex-box: Align last row to grid
• > Flexbox wrap - different alignment for last row
• > How can a flex item keep the same dimensions when it is forced to a new row?
• > Selector for an element alone in a row?
• > Aligning elements in last flexbox row
• > How can I allow flex-items to grow while keeping the same size?
• > Left-align last row of flexbox using space-between and margins
• > Inconsistent margin between flex items on last row
• > How to keep wrapped flex-items the same width as the elements on the previous row?
• > How to align left last row/line in multiple line flexbox
• > Last children of grid get giant gutter cause of flexbox space-between
• > Managing justify-content: space-between on last row
• > Flexbox space between behavior combined with wrap
• > Possible to use CSS Flexbox to stretch elements on every row while maintaining consistent widths?
• > Prevent last item from stretching to fill the container