Flexbox：3个div，2列

Question

我是flexbox的新手，所以请耐心等待。我的HTML：

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

使用flexbox，我试图实现以下布局：

在没有为容器设置高度的情况下，我可以实现的最简单方法是什么？。预计身高会发生变化。

Answer 1

您可以将flex-direction设置为column来实现此目的。

根据要求，第二个div的宽度是静态的。我正在将calc用于其他2个div。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
.one,
.three {
  flex: 0 0 50%;
  background: cyan;
  width: calc(100% - 100px);
}
.two {
  flex: 0 0 100%;
  order: 1;
  background: moccasin;
  width: 100px;
}
.three {
  background: tomato;
}

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

Answer 2

编辑....迟到的答案，我离开它，因为方法看起来与其他有点不同，即使我认为它非常相似......但是关于flex的工作方式没有多少选择：）

您可能需要在第一列上将height设置为父容器和子容器。 order将组织容器流。

codepen to check behavior and how it breaks while windows is reduced or content increased

＆＃13;

＆＃13;

.one {
  background: #A1EB88;
}
.two {
  background: #E7AAF6
}
.three {
  background: #F7F467
}
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50vh;/* height is needed to force wrapping */
}
.one,
.three {
  order: -1;/* bring them in front of other(s) */
  height: 50%;/* share the height (if three of them, then put it down to 33.33% to share evenly height avalaible) */
}
.two {
  flex: 1;/* equals height:100%; it will fill entire height */
  width: 200px;/* here your fixed width */
}

＆＃13;

<h1>test it also in full page mode </h1>
<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

＆＃13;

＆＃13;

＆＃13;