如何使用 css flex 属性固定容器的宽度答案

【问题标题】：How to fix the width of containers using css flex property如何使用 css flex 属性固定容器的宽度
【发布时间】：2017-05-03 09:01:42
【问题描述】：

我有三个容器。在平板纵向模式下，我需要按照以下规格排列容器的宽度。

容器 1 和 3 应该在一行中，并且应该与父容器 'flex container' 的中心对齐。每个容器 1 和 3 的宽度应分别为 260 像素。
容器 2，应低于容器 1 和 3，并且此容器的宽度应等于容器 1 和 3 的总宽度。

我会将最终解决方案代码放在特定的媒体查询中。我正在寻找容器宽度应满足上述几点的解决方案。

这是我尝试过的：

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
}

.flexcontainer > div {
  flex: 1 0 260px;
  background-color: #e46119;
  border: 1px solid #626262;
  margin: 3px;
}

.flex:nth-child(2) {
  order: 1;
  flex: 1 0 520px;
}

<div class="flexcontainer">
  <div class="flex"> 1 </div>
  <div class="flex"> 2 </div>
  <div class="flex"> 3 </div>
</div>

【问题讨论】：

@AnuragDaolagajao：我会在具体的媒体查询中保留解决方案。

标签： html css flexbox

【解决方案1】：

您可以将父级的外部宽度设置为520px，然后将弹性基础设置为and 3 to50%and container 2 to100%`

* {box-sizing: border-box;}

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  width: 520px;
  margin: auto;
}

.flexcontainer > div {
  flex: 0 0 50%;
  background-color: #e46119;
  border: 1px solid #626262;
}

.flex:nth-child(2) {
  order: 1;
  flex: 0 0 100%;
}

<div class="flexcontainer">
  <div class="flex"> 1 </div>
  <div class="flex"> 2 </div>
  <div class="flex"> 3 </div>
</div>

【讨论】：