相同宽度的弹性项目，除了最后一个答案

【问题标题】：Same width flex items except for the last one相同宽度的弹性项目，除了最后一个
【发布时间】：2017-11-04 06:48:15
【问题描述】：

我正在尝试使用三列布局，其中每个 div 都适合容器的 1/3，除了最后一项，它跨越剩余的列。

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

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

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

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

revised codepen

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

最后一个子元素将具有相同的宽度并且占用行中剩余的空间（如果有）。

【讨论】：

【解决方案2】：

你需要两件事：

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

【讨论】：

不幸的是，这不起作用，因为灰色框的宽度最终不相等。

【解决方案3】：

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

【讨论】：