Flexbox不同大小的孩子

Question

我学习了flexbox，我有一个第一个问题，如何在图片中进行这样的列布局？ [ MyCodeFiddle ]( http://jsfiddle.net/1s3bo913/ )

layout project

Answer 1

您可以嵌套弹性箱容器：

• 一个外部容器A，display: flex; flex-direction: column;
• 在两个容器B1和B2的内部，display: flex; flex-direction: row;
• 在（B1）两个容器B1a和B1b
中的第一个内部
• B1b应该再次拥有display: flex; flex-direction: column;并包含两个DIV或图像（浆果图片）
• 内部B2两个常规DIV（无弹性箱）

Answer 2

您可以为2个垂直column es创建.small-box，并在父级上设置flex: wrap。我调整了宽度，使其与父元素尺寸匹配。

＆＃13;

＆＃13;

.flex-container {
  display: flex;
  width: 500px;
  height: 400px;
  flex-wrap: wrap;
}

.flex-container, .flex-col {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.large-box {
  width: 300px;
  height: 200px;
  background: blue;
}

.small-box {
  width: 200px;
  height: 100px;
  background: yellow;
}

.medium-box {
  width: 250px;
  height: 200px;
  background: red;
}

＆＃13;

<div class="flex-container">
  <div class="large-box">
  </div>
  <div class="flex-col">
    <div class="small-box">
    </div>
    <div class="small-box">
    </div>
  </div>
  <div class="medium-box">
  </div>
  <div class="medium-box">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;