flex 九宫格 一图 二图 三图

好的，我会解答你的问题。首先，九宫格是一种常用的UI布局方式，可以根据需要自动调整大小以适应不同的屏幕尺寸和设备方向。下面我来介绍一下flex实现九宫格的方法。

一图：使用flex布局实现单图九宫格，可以使用以下代码：

<div class="container">
  <div class="item">
    <img src="image1.jpg" alt="">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="">
  </div>
  <div class="item">
    <img src="image4.jpg" alt="">
  </div>
  <div class="item">
    <img src="image5.jpg" alt="">
  </div>
  <div class="item">
    <img src="image6.jpg" alt="">
  </div>
  <div class="item">
    <img src="image7.jpg" alt="">
  </div>
  <div class="item">
    <img src="image8.jpg" alt="">
  </div>
  <div class="item">
    <img src="image9.jpg" alt="">
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.item img {
  max-width: 100%;
  height: auto;
}

上面的代码中，使用flex布局实现了一个包含9个图片的容器，容器使用`display: flex`属性让子元素按照一定规则排列，`flex-wrap: wrap`属性表示子元素超出容器宽度时自动折行，`justify-content: center`属性表示子元素在主轴上居中对齐。

子元素使用`width: 33.33%`属性占据容器的1/3宽度，使用`padding: 10px`属性设置内边距，`box-sizing: border-box`属性让内边距不会撑大子元素的宽度，`text-align: center`属性让子元素内部的内容居中对齐。

二图：使用flex布局实现双图九宫格，可以使用以下代码：

<div class="container">
  <div class="item double">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="">
  </div>
  <div class="item">
    <img src="image4.jpg" alt="">
  </div>
  <div class="item">
    <img src="image5.jpg" alt="">
  </div>
  <div class="item">
    <img src="image6.jpg" alt="">
  </div>
  <div class="item">
    <img src="image7.jpg" alt="">
  </div>
  <div class="item">
    <img src="image8.jpg" alt="">
  </div>
  <div class="item">
    <img src="image9.jpg" alt="">
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.item.double {
  width: 66.66%;
}

.item img {
  max-width: 100%;
  height: auto;
}

上面的代码中，使用了与单图九宫格相同的布局方式，不同的是第一个子元素使用了`double`类名，并设置了`width: 66.66%`属性占据容器的2/3宽度，同时包含了两个图片。

三图：使用flex布局实现三图九宫格，可以使用以下代码：

<div class="container">
  <div class="item triple">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>
  <div class="item">
    <img src="image4.jpg" alt="">
  </div>
  <div class="item">
    <img src="image5.jpg" alt="">
  </div>
  <div class="item">
    <img src="image6.jpg" alt="">
  </div>
  <div class="item">
    <img src="image7.jpg" alt="">
  </div>
  <div class="item">
    <img src="image8.jpg" alt="">
  </div>
  <div class="item">
    <img src="image9.jpg" alt="">
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.item.triple {
  width: 100%;
}

.item.triple img {
  max-width: 30%;
  height: auto;
  margin: 0 5px;
}

上面的代码中，第一个子元素使用了`triple`类名，并设置了`width: 100%`属性占据容器的100%宽度，同时包含了三个图片。

子元素内部的图片使用了`max-width: 30%`属性占据子元素的30%宽度，同时使用了`margin: 0 5px`属性设置图片之间的间距。