弹性项目应该获得所有其余的宽度答案

【问题标题】：Flex item should obtain all rest of width in line弹性项目应该获得所有其余的宽度
【发布时间】：2018-07-13 16:54:35
【问题描述】：

我有弹性容器和 3 个弹性项目（第 1 项、第 2 项、第 3 项）。

我需要做以下事情：

项目 1 应该在顶部
第 2 项应在第 1 项下
第 3 项应与第 2 项在同一行

附加要求：例如线宽是700px；第 2 项和第 3 项的总大小应为 700px，但如果容器将大小调整为更小的尺寸（例如：650px），则第 2 项和第 3 项的总大小应为 650px。

<div class="flex-container">
  <div class="item-1" />
  <div class="item-2" />
  <div class="item-3" />
</div>

目前我几乎完成了所有操作，但是当我将窗口大小调整为更小的分辨率时，第 3 项下拉到第 2 项下方。

.flex-container {
   display: flex;
   flex-flow: row wrap;
}

.item-2 {
   flex-basis: 78%;
}

.item-3 {
  display: inline-block;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你可以这样做：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-container>* {
  border: 1px solid;
  box-sizing: border-box;
}

.item-1 {
  flex-basis: 100%; /*Full width of the first line*/
}

.item-2,
.item-3 {
  flex: 1; /* Fill the space equally on the second line*/
}

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

【讨论】：