如何使用css flex属性修复容器的宽度

Question

我有三个容器。在平板电脑纵向模式下，我需要使用以下规格来安排容器的宽度。

1. 容器1和3应该在一行中，并且应该与父容器“flex容器”的中心对齐。每个容器1和3的宽度应为每个260px。
2. 容器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>

Answer 1

您可以将父级的外部宽度设置为520px，然后在and 3 to 50％and container 2 to 100％`

上设置弹性基础

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