使用flexbox更改元素的顺序并在特定元素之后换行

Question

我正在尝试仅使用flexbox创建此结构。

这就是我的html的样子。

<div class="container">
  <div class="first_container"></div>
  <div class="second_container"></div>
  <div class="third_container"></div>
</div>

我知道这是一个非常基本的问题，如果我可以改变divs顺序或为第一行添加额外的包装器。问题是它必须保持原样。

基本尺寸：  1. first_container - 应该占用100％减去third_container的宽度  2. second_container - shoudl需要100％

我正在寻求一些提示，因为我的手正在缓慢下降。

Answer 1

您可以使用flexbox订单属性

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

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

.container div {
  padding: 10px;
  border: 5px solid #fff;
  background: gray;
  text-align: center;
}

.first_container {
  width: 70%;
  order: 1;
}

.second_container {
  width: 100%;
  order: 3;
}

.third_container {
  width: 30%;
  order: 2;
}

＆＃13;

<div class="container">
  <div class="first_container">1</div>
  <div class="second_container">2</div>
  <div class="third_container">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;