如何Flexbox 3儿童，一个左，两个右

Question

有没有办法在有三个孩子的flexbox中完成以下示例？

我目前使用以下代码：

# Slim
.container
  .children
  .children
  .children

# SASS
.container
   display: flex
   flex-wrap: wrap
   align-items: center

  .children
    flex-basis: 50%

有没有办法获得理想的结果？

Answer 1

如果您可以使用2 .children divs将其他another .container封装在内，那么您可以尝试如下，

#box{
  display:flex;
  width:100%;
  height:400px;
  background:#ccc;
  text-align:center;
}
#box > .b1{
  flex:1 1 0;
  background:#f22;
  margin-right:10px;
}
#box > .box1{
  display:flex;
  flex-direction:column;
  flex:1 1 0;
}
#box > .box1 > .b2{
  flex:1 1 0;
  background:#f2f;
  margin-bottom:10px;
}
#box > .box1 > .b3{
  flex:1 1 0;
  background:#ff2;
}

<div id="box">
  <div class="b1">1</div>
  <div class="box1">
  <div class="b2">2</div>
  <div class="b3">3</div>
  </div>
</div>

Answer 2

如果要使用该HTML结构，可以使用Flexbox执行此操作，如果在父元素上设置固定高度并使用flex-direction: column和flex-wrap: wrap。因此，如果你将第一个元素作为高度的100％，那么其他两个元素就会向右侧突破。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.children {
  width: calc(50% - 10px);
  margin: 5px;
  background: #D8D8D8;
  flex: 1;
}
.children:first-child {
  flex: 0 0 calc(100% - 10px);
  border: 2px solid #44C0FF;
}

＆＃13;

<div class="container">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用columns代替flex会让您更轻松。

示例代码段

＆＃13;

＆＃13;

* { box-sizing: border-box; margin: 0; padding: 0; }
.container {
  width: 30vw; margin: 16px;
  column-count: 2; column-gap: 0; 
}
.container > div { 
  background-color: #44a; border: 2px solid transparent;  
  width: 15vw; height: 15vw; 
  background-clip: padding-box;
}
.container > div:first-child { width: 15vw; height: 30vw; }

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

注1：使用相对尺寸也会使其保持响应。

注意2：您可以使用透明边框并更改尺寸以增加/减少间隙。