Html 用于等高列和行的Flexbox（均衡器）

是否可以将flexbox用于此类图案（见附图）如

---

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

是的，你可以用Flex来做。只需放置一个外部的“DIV”并提供它的属性

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>

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

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

.row {
  display: flex;
}

.col {
  flex-basis: 33.33%;
}

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

保留一个额外的盒子以容纳盒子2和3

---

您可以将此布局分成两列，如果需要，在第二列中可以有两行或更多行

这种布局的

HTML

结构如下：

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>

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

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

.row {
  display: flex;
}

.col {
  flex-basis: 33.33%;
}

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

*{框大小：边框框；}
.行{
显示器：flex；
}
上校{
弹性基准：33.33%；
}
.盒子{
边框：3倍纯黑；
填充：10px；
}
.右上校{
弹性基准：66.67%；
弯曲方向：立柱；
左侧填充：10px；
显示器：flex；
}
.右列框+右列框{
利润率：10px0；
}

第一栏的内容在这里。。。
方框一的内容放在这里。。。
第二框内容放在这里。。。这句话的意思是：“我不知道你是怎么想的。”

您基本上可以创建一个嵌套的flexbox—flexbox行中的

框1

和

框2和3包装器

，flexbox列中的

框2和3

请特别注意flex:1的用法-这允许根据您的需要设置相等的高度

请参见下面的演示：

.wrapper{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
.wrapper>*{
弹性：1；
保证金：5px；
}
.wrapper>.box wrapp{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.wrapper>.box wrapp>.box{
弹性：1；
保证金：5px；
}
.wrapper>.box wrapp>.box:第一个孩子{
边际上限：0；
}
.wrapper>.box wrapp>.box:最后一个子项{
页边距底部：0；
}
.盒子{
边框：1px实心；
}

这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字这里有些文字
这里有一些文字
这里有一些文字

致反对票：请留下评论，说明你反对票的原因。谢谢你的回答，这将有助于我更正我的答案。它工作得很好。第二箱和第三箱是否可能有相同高度的箱子。为什么这些家伙不加评论就投了反对票！！非常令人沮丧+1@kukkuz是的，我同意……）谢谢你的回答。它工作得很好。box2和box3是否可能有相同高度的框。当您给出

flex:1

并且有两个flex项时，它们将获得相同的高度。。。如果您不希望高度相等，可以将

flex:1

应用于必须填充其他容器剩余空间的项目…但是现在，内部容器具有flex:1，但高度不相等，请尝试增加框2中的内容，并查看框3高度未更改。为什么要使用

float

flexbox

在其应用程序中很好地实现了这一点own@LGSon是的，flex可以，但我用的是float。