flex实现田字布局

Flex布局可以很方便地实现田字布局。田字布局是指一个大的区块被分成九个小区块，中间的区块最大，四个角上的区块最小。实现田字布局的步骤如下：
1. 父元素设置为flex布局，flex-wrap属性设置为wrap，这样子元素会自动换行。
2. 子元素设置为flex布局，flex-grow属性设置为1，这样子元素会自动填充父元素的空间。
3. 中间的区块设置为flex-grow: 2，这样它会占据父元素的两倍空间。
4. 四个角上的区块设置为flex-basis: 0，这样它们会平分剩余的空间。
下面是实现田字布局的代码示例：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

.item {
  flex: 1;
}

.item1, .item3, .item7, .item9 {
  flex-basis: 0;
}

.item5 {
  flex-grow: 2;
}