Question

必须使用flexbox创建以下div，条件是其中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

包裹左栏选项

flex列中的左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 Option ...无需额外的包装。

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

鉴于它有一个固定的高度，为什么不使用定位？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

根据要求，评论变成了答案。

玩得开心:)

UL

.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;
}

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

3 个答案: