定位最后一行或特定行上的弹性项目

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

我在jsFiddle中创建了一个动态的情境

我的flex div可以缩小到150px并且长到250px，但所有都必须具有相同的大小（显然我想要一个CSS解决方案，JS我知道的方式）。

Answer 1

作为快速而肮脏的解决方案，您可以使用：.my-flex-child:last-child/*.product:last-child*/ {   flex-grow: 100;/*Or any number big enough*/}

Answer 2

我使用了这种解决方法，即使它不是很优雅而且它没有使用Flexbox的强大功能。它可以在以下条件下进行：所有物品的宽度相同这些物品具有固定的宽度你使用SCSS / SASS（虽然可以避免）如果是这种情况，您可以使用以下代码段：&nbsp;$itemWidth:&nbsp;400px; &nbsp;$itemMargin:&nbsp;10px;html,&nbsp;body&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;padding:&nbsp;0;}.flex-container&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-direction:&nbsp;row; &nbsp;&nbsp;flex-wrap:&nbsp;wrap; &nbsp;&nbsp;margin:&nbsp;0&nbsp;auto; &nbsp;&nbsp;border:&nbsp;solid&nbsp;1px&nbsp;blue;}@for&nbsp;$i&nbsp;from&nbsp;1&nbsp;through&nbsp;10&nbsp;{ &nbsp;&nbsp;@media&nbsp;only&nbsp;screen&nbsp;and&nbsp;(min-width:&nbsp;$i&nbsp;*&nbsp;$itemWidth&nbsp;+&nbsp;2&nbsp;*&nbsp;$i&nbsp;*&nbsp;$itemMargin)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;.flex-container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;$i&nbsp;*&nbsp;$itemWidth&nbsp;+&nbsp;2&nbsp;*&nbsp;$i&nbsp;*&nbsp;$itemMargin; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}}.item&nbsp;{ &nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;$itemWidth; &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;margin:&nbsp;$itemMargin; &nbsp;&nbsp;background:&nbsp;red;}<div&nbsp;class="flex-container"> &nbsp;&nbsp;<div&nbsp;class="item"></div> &nbsp;&nbsp;<div&nbsp;class="item"&nbsp;style="flex:&nbsp;500&nbsp;0&nbsp;200px"></div> &nbsp;&nbsp;<div&nbsp;class="item"></div> &nbsp;&nbsp;<div&nbsp;class="item"></div> &nbsp;&nbsp;<div&nbsp;class="item"></div></div>在这里，我在codepen上创建了一个实现margin&nbsp;的示例。第二个和第三个条件可以分别使用css变量（如果你决定提供支持）和编译上面的scss片段来避免。嗯，这是真的，我们也可以在flexbox之前做到这一点，但display: flex对于响应式设计仍然是必不可少的。