具有全宽头部和均匀间距的Flexbox子项

Question

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

[        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%;
}

<div class="flex-container">
  <div class="flexcenter">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>

您能给我展示一下如何获得我想要的网格布局的示例吗？

- Mister Verleg

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>

- Michael Benjamin