如何在包装器中排列元素，如下例所示？

Question

我需要使用CSS Flexbox将以下元素安排为This sample Image。

＆＃13;

＆＃13;

.wrapper {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  width: 200px;
  height: 200px;
  background: green;
  margin-bottom: 20px;
}

＆＃13;

<div class="wrapper">
  <div class="element large"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element large"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试了很少的风格，但无法取得成功。有没有办法用css flex解决这个问题？

Answer 1

如果您改变主意， 网格 解决方案：

.grid {
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 100px); /* "width" */
  grid-template-rows: repeat(4, 100px); /* "height" */
  grid-gap: 10px; /* gap between items */
  justify-content: center; /* horizontally centered */
}

.item {
  background: green;
}

.larger {
  grid-column: 1 / span 2; /* starts at the 1st column & spans two */
  grid-row: 1 / span 2; /* starts at the 1st row & spans two */
  /* can also omit the 1's since it's the first child */
}

.larger2 {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
}

<div class="grid">
  <div class="item larger"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item larger2"></div>
</div>