html - 中心的大图像被 Felxbox 的小图像包围？

Question

我将尝试将较大的图像置于中心（450px x 200px）周围，周围环绕着较小的图像（每个：150px x 100px）。

所以这就是我想要的：

这就是我得到的：

.boxarea {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      flex-flow: wrap;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      align-content: flex-start;
}

.box {
    margin: auto;
    width: 150px;
    height: 100px;
    position: relative;
    background: #333;
}

.big {
    width: 450px;
    height: 200px;
}
```
```

<div class="boxarea">
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
<div class="box big" style="background-color: #999;"></div>
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
<div class="box" style="background-color: #333;"></div>
<div class="box" style="background-color: #666;"></div>
</div>

似乎垂直图像以较大的图像为中心，我该如何更改？

标签： htmlcssflexbox

Answer 1

使用 CSS 网格

.boxarea {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.box {
  height: 100px;
  background: #333;
}

.big {
  grid-row: 2/ span 2;
  grid-column: 2/ span 3;
  height: auto;
}

<div class="boxarea">
  <div class="box big" style="background-color: #999;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #666;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #666;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #666;"></div>
  <div class="box" style="background-color: #666;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #666;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #666;"></div>
  <div class="box" style="background-color: #333;"></div>
  <div class="box" style="background-color: #666;"></div>
</div>