Question

我想要一个三列布局，其中每个div都适合容器的1/3，除了最后一个项目，它跨越剩余的列。

我在这里有一个工作示例：https://codepen.io/anon/pen/vZYLjY我希望每个灰色框都有相同的宽度，并且蓝框扩展以填充其余剩余空间。

＆＃13;

.parent {
  display: flex;
  flex-flow: row wrap;
}

.child {
  flex: 1 0 30%;
}

.parent {
  border: 5px solid #EEEEEE;
  padding: 5px;
  margin: 30px 0;
}

.child {
  background-color: #CCCCCC;
  padding: 5px;
  text-align: center;
  color: #FFFFFF;
  font-family: helvetica, arial, sans-serif;
  line-height: 1;
  margin: 5px;
}

.child:last-child {
  background-color: #1FBBE6;
}

＆＃13;

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

＆＃13;

Answer 1

.child {
  flex: 0 0 calc(33.33% - 10px);
}

.child:last-child {
  flex-grow: 1;
}

revised codepen

每个孩子的宽度相同：水平边距减少33.33％。

最后一个孩子将具有相同的宽度和消耗该行中的剩余空间（如果有）。

Answer 2

你需要两件事：

.child:last-child {
  flex-basis: 100%;
  flex-shrink: 1;
}

Answer 3

您可以将max-width与真正的33.333％弹性框结合使用。然后，您只需为max-width: none设置last-child即可。我添加了box-sizing:border-box并且我已将margin: $gutter换成了相同宽度的白色边框，以保持真正的33％宽度。理想情况下，您应该在每个.child内部设置一个提供背景颜色和边距的子项，但无论如何，这是我的尝试：https://codepen.io/anon/pen/GERZKj

除最后一个之外，相同宽度的柔性项目

3 个答案: