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

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（虽然可以避免）

如果是这种情况，您可以使用以下代码段：

 $itemWidth: 400px;
 $itemMargin: 10px;html, body {
  margin: 0;
  padding: 0;}.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  border: solid 1px blue;}@for $i from 1 through 10 {
  @media only screen and (min-width: $i * $itemWidth + 2 * $i * $itemMargin) {
    .flex-container {
      width: $i * $itemWidth + 2 * $i * $itemMargin;
    }
  }}.item {
  flex: 0 0 $itemWidth;
  height: 100px;
  margin: $itemMargin;
  background: red;}

<div class="flex-container">
  <div class="item"></div>
  <div class="item" style="flex: 500 0 200px"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div></div>

在这里，我在codepen上创建了一个实现margin 的示例。

第二个和第三个条件可以分别使用css变量（如果你决定提供支持）和编译上面的scss片段来避免。

嗯，这是真的，我们也可以在flexbox之前做到这一点，但display: flex对于响应式设计仍然是必不可少的。