css - 使用 flexbox 的样式布局

Question

我应该如何使用 flexbox 设置样式以获得这样的布局？我对使用网格犹豫不决，因为它对 IE11 的支持有限。我希望能够添加或多或少的小 div，而不是为小 div 添加更多容器

布局的 HTML 看起来像这样:Desired Layout image

.container {
  display: flex;
}

.large {
  height: 200px width: 150px;
  border: 1px solid black;
}

.small {
  height: 100px;
  width: 150px;
  border: 1px solid black;
}

<div class="container">
  <div class="large">1</div>
  <div class="small">2</div>
  <div class="small">3</div>
  <div class="small">4</div>
  <div class="small">5</div>
</div>

Answer 1

我会在 flexbox 上使用 css-grid，这是一个例子:

教程 here , 当前规范 here

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}
.container div {
  border:1px solid gold;
}
.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>