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可以缩小到150像素，最大可以增长到250像素，但所有像素都必须具有相同的大小（很明显，我想要CSS解决方案，我知道用JS）。

Answer 1

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

具有以下行为的flex属性将很有用：


last-row
last-column
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?