如何使用flexbox进行3格布局？

Question

我正在尝试创建一个3 div布局，如下所示：

然后我可以将图像放置在左div内，然后在右上div内放置1个段落，在右下div内放置1个段落。

我在确定如何使用flexbox做到这一点时遇到了一些麻烦。我的看法是，我需要5个div和类似的内容。

/Person 2( \(.*?\))?/g

这将是正确的方法吗？它确实使用了很多div，也许可以用更少的方法完成。

Answer 1

您实际上并不需要太多的容器。

.flexbox {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  background: #0c8ec4;
  height: 60vh;
  padding: 1rem 0 0 1rem;
}

.flexbox div:first-child {
  min-width: 20%;
  flex: 1 0 65%;
}

.flexbox div,
.flexbox div:last-child {
  flex: 1 0 25%;
  min-width: 70%;
  background: #fff;
  margin: 0 1rem 1rem 0;
}

<div class='flexbox'>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

您可以做这种事情

.flexbox{

border:1px solid black;
width:300px;
height:300px;
display:flex;
}

.container-one {
width:40%;
border-right:1px solid black;
}

.container-two {
width:100%;
 display:flex;
 flex-direction:column;

}

.container-two div{
  
   height:50%;
    
}

.container-two div:first-child{
   border-bottom:1px solid black;
}

<div class='flexbox'>
    <div class='container-one'></div>
    <div class='container-two'>
        <div>
            
        </div>
        <div>
           
        </div>
    </div>
</div>