Question

是否可以将flexbox用于此类模式（参见附图），如

Box 1 height == (height of box 2 + height of box 3)

它更像是基础均衡器，三个方框中任何一个的高度变化都会调整框高度，看起来总是像图像

Answer 1

你基本上可以创建一个嵌套的flexbox - 行 flexbox中的box 1和box 2 & 3 wrapper以及{em}中的box 2 & 3 列 flexbox。

请特别注意flex: 1的使用 - 这可以根据您的需要提供相同的高度。

见下面的演示：

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.wrapper > * {
  flex: 1;
  margin: 5px;
}
.wrapper > .box-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper > .box-wrap > .box {
  flex:1;
  margin: 5px;
}
.wrapper > .box-wrap > .box:first-child {
  margin-top: 0;
}
.wrapper > .box-wrap > .box:last-child {
  margin-bottom: 0;
}
.box {
  border: 1px solid;
}

<div class="wrapper">
  <div class="box">
    Some text here some text here some text here some text here Some text here some text here some text here some text here Some text here some text here some text here some text here Some text here some text here some text here some text here
  </div>
  <div class="box-wrap">
    <div class="box">
      Some text here
    </div>
    <div class="box">
      Some text here
    </div>
  </div>
</div>

Answer 2

您可以将此布局分为2列，在第二列中，如果需要，可以包含2行或更多行。

遵循这种布局的HTML结构：

<强> HTML：

<div class="row">
  <div class="col box">
      Column one content goes here...
  </div>
  <div class="col right-col">
    <div class="box">
      Box one content goes here...
    </div>
    <div class="box">
      Box two content goes here...
    </div>
  </div>
</div>

必要的CSS：

.row {
  display: flex;
}

.col {
  flex-basis: 33.33%;
}

.right-col {
  flex-basis: 66.67%;
  flex-direction: column;
  display: flex;
}

＆＃13;

* {box-sizing: border-box;}

.row {
  display: flex;
}

.col {
  flex-basis: 33.33%;
}

.box {
  border: 3px solid black;
  padding: 10px;
}

.right-col {
  flex-basis: 66.67%;
  flex-direction: column;
  padding-left: 10px;
  display: flex;
}

.right-col .box + .box {
  margin: 10px 0 0;
}

＆＃13;

<div class="row">
  <div class="col box">
    Column one content goes here...
  </div>
  <div class="col right-col">
    <div class="box">
      Box one content goes here...
    </div>
    <div class="box">
      Box two content goes here... Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet 
    </div>
  </div>
</div>

＆＃13;

Answer 3

是的，你可以用Flex来做。只需放置外部＆＃34; DIV＆＃34; 并提供属性

<强> HTML：

<div class="row">

 <div class="box-1">
  1
 </div>

 <div class="box-2">
     <div class="box-3">
      2
      </div> 
      <div class="box-4">
       3
      </div> 
 </div>

</div>

<强> CSS：

 .row{
    display:flex;
    width:100%
  }
.box-1,.box-2,.box-3,.box-4{
    float:left;
    width:40%;
    border:1px solid #000;
    margin:3px;
    padding:3px;
 }
.box-3,.box-4{
    width:95%;
 }

保留一个额外的方框以容纳方框2和3

JS Fiddle for you

Flexbox用于等高柱和行（均衡器）

3 个答案: