弹性框布局将三个元素组合在一列中

Question

我的问题出在图片中：

除了大的一个列之外，还需要在一列中安排三个小元素。

示例html：

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

和CSS：

.container {
    display: flex;
    flex-direction: row; width: 496px;
}
.big_element, .small_element {
    display: flex;
    width: 248px;
}

Answer 1

您可以使用嵌套的 Flexbox

执行此操作

＆＃13;

＆＃13;

body, html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.big_element, .small_element {
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
  flex: 1;
}

.right {
  display: flex;
  flex: 1;
  flex-direction: column;
}

＆＃13;

<div class="container">
    <div class="big_element"></div>
    
    <div class="right">
      <div class="small_element"></div>
      <div class="small_element"></div>
      <div class="small_element"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有很多方法，但我认为最好的两种方法是使用TABLE而不是DIV或Flexbox：

使用表格：

table{
height: 200px;
width: 200px;
border: 0;
}
tr{
 border: 1px black solid;
}

<table border="1" cellpadding="0" cellspacing="10px">
   <tr>
      <td rowspan="3"></td><td></td>
   </tr>
   <tr>
      <td></td>
   </tr>
   <tr>
      <td></td>
   </tr>
</table>

Flexbox的：

.wrapper {
display: -webkit-flex;
display: flex;

-webkit-flex-flow: column wrap; /* Safari 6.1+ */
flex-flow: column wrap;
  
font-weight: bold;
text-align: center;

height: 200px;
width: 200px;
padding: 5px;
}

.wrapper > div{
border: 1px black solid;
-webkit-flex-grow: 1;
flex-grow: 1;
margin: 5px;
}
.left{
-webkit-flex-basis: 100%;
flex-basis: 100%;
}

<div class="wrapper">
   <div class="left">&nbsp;</div>
   <div class="aside">&nbsp;</div>
   <div class="aside">&nbsp;</div>
   <div class="aside">&nbsp;</div>
</div>

Answer 3

如果你像这样包裹每个inline-block（这将是响应），你可以使用-element：

＆＃13;

＆＃13;

body {
  margin:0;
 font-size:0 /*fix inline-block gap -- use in parent of container instead of body - this is only for DEMO */ 
}
.container {
  display: inline-block;
  vertical-align: top;
  width:50%
}
.container > div {
  max-width:100%;
  border:solid;
  box-sizing:border-box;
}
.big_element {
  height: 100vh;
  margin-right:3.5vw
}
.small_element {
  height: 31vh;
  margin-bottom: 3.5vh
}
.small_element:last-of-type {
  margin-bottom: 0
}    

＆＃13;

<div class="container">
  <div class="big_element"></div>
</div>
<div class="container">
  <div class="small_element">1</div>
  <div class="small_element">2</div>
  <div class="small_element">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;