我的问题是我想要范围宽度可变的 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-rowalone-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 中很简单:
如果 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
关于html - 在最后一行调整 flex 元素的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59399954/