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

最佳答案

不幸的是，在当前的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?

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