具有全宽标题和均匀间隔的子项的 Flexbox

Question

我正在尝试使用 Flexbox 制作以下网格：

[        div        ]
[ div ][ div ][ div ]

我似乎无法理解。我已经走到这一步了：

[        div        ]
[ div ][ div ][ div ]

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.flex-center {
  width 100%;
}

你能给我举一个如何获得我想要的网格的例子吗？

Answer 1

.flex-container {
  display: flex;
  justify-content: space-around; /* or `space-between` */
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
}

.flex-item {
  flex: 0 0 25%; /* flex-grow, flex-shrink, flex-basis */
  height: 100px;
}

.flex-item:first-child {
  flex: 0 0 100%;  /* occupies full row; with `wrap` on the container, 
                      subsequent items are forced to the next line */
}

/* non-essential decorative styles */
.flex-container {
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>