CSS Flexbox : 如何构建特定的布局

Question

以下 div 必须使用 flexbox 创建，条件是其中 3 个应该是兄弟（不能为每列使用两个包装器）。

有人知道如何使用纯 flex 制作这个吗？

我目前的试用期：

HTML:

       <div class="meeting-room-wrap">
            <div class="observable-module">
            </div>
            <div class="observable-module">
            </div>
            <div class="active-module">
            </div>    
        </div>

CSS:

.meeting-room-wrap
{
    display: flex;
    flex-direction: row
}
.observable-module
{
    flex-grow:1;
    height: 50%;
    min-width: 50%;
}
.observable-module:nth-child(1) /* div #1 */
{
        background: green;
        order : 1;

}
.observable-module:nth-child(2) /* div #3 */
{
        background: blue;
        order : 3;
}
.active-module  /* div #2 */
{
    flex-grow:1;
    height: 100%;
    min-width: 50%;
    background: red;
    order : 2;

}

Answer 1

左列换行选项

弹性列中的左侧 div 是最明显的方法...缺少给定的约束。

.meeting-room-wrap {
  display: flex;
  height: 300px;
  background: #c0ffee;
  width: 80%;
  margin: 1em auto;
}
.observable {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.observable-module {
  flex: 1;
  background: #bada55;
}
.observable-module:nth-child(2) {
  background: rebeccapurple;
}
.active-module {
  flex: 1;
  background: green;
}

<div class="meeting-room-wrap">
  <div class="observable">
    <div class="observable-module">
    </div>
    <div class="observable-module">
    </div>
  </div>
  <div class="active-module">
  </div>
</div>

Flex-column 选项 ...不需要额外的包装器。

* {
  margin: 0;
}
.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  background: #c0ffee;
  width: 80%;
  margin: auto;
  color: red;
  Font-size: 36px;
}
.alpha,
.gamma {
  flex: 0 0 50%;
  width: 50%;
  background: #000;
}
.beta {
  background: #bada55;
  order: 2;
  flex: 0 0 100%;
  width: 50%;
}
.gamma {
  background: plum;
}

<div class="wrap">
  <div class="alpha">ONE
  </div>
  <div class="beta">TWO
  </div>
  <div class="gamma">THREE
  </div>
</div>

Answer 2

既然有固定的高度，为什么不用定位呢？

.wrap {
  height: 300px;
  width: 600px;
  position: relative;
}
.wrap > div {
  position: absolute;  
}
.one {
  background-color: red;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 50%;
}
.two {
  background-color: green;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
}
.three {
  background-color: blue;
  top: 50%;
  left: 0;
  right: 50%;
  bottom: 0;
}

<div class="wrap">
  <div class="small one">
    1
  </div>
  <div class="two large">
    2
  </div>
  <div class="three small">
    3
  </div>
</div>

Answer 3

应要求，评论变成了答案。

玩得开心:)

.meeting-room-wrap {
  width: 70%;
  /* whatever */
  margin: auto;
}

.meeting-room-wrap>div {
  width: 50%;
  text-align: center;
  color:white;
  font-size:4vw;
}

.meeting-room-wrap>div:before {
  content: '';
  padding-top: 40%;/* tune this to get ratio needed */
  display:inline-block;/* contents of these 3 wrappers should be within an inline-block element */
  vertical-align:middle;
}

.meeting-room-wrap>div.two:before {
  padding-top: 80%;/* height's ratio x 2*/
}

.one {
  background: #4779A3;
  float: left;
}

.two {
  background: #212F3B;
  float: right;
}

.three {
  background: #9BA1A3;
  overflow: hidden;
}

<div class="meeting-room-wrap">
  <div class="observable-module one">1
  </div>
  <div class="observable-module two">2
  </div>
  <div class="active-module three">3
  </div>
</div>

CSS Flexbox : 如何构建特定的布局

CSS Flexbox : How to construct a specific layout

css

fluid-layout

flexbox