用flex布局做一个轮播图在html中

好的，以下是一个用flex布局实现的简单轮播图的HTML代码：

<div class="slider">
  <div class="slide">
    <img src="slide1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
</div>

这里我们用一个包含所有轮播图的父元素 `.slider`，以及每个轮播图对应的子元素 `.slide`。接下来，我们需要用CSS来进行布局：

.slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.slide img {
  width: 100%;
  height: auto;
}

这里我们首先将 `.slider` 设置为flex布局，并且禁止换行，超出部分可以通过 `overflow-x: scroll;` 属性来滚动显示。然后，我们使用 `scroll-snap-type: x mandatory;` 属性来启用滚动捕捉功能，让每个轮播图可以对齐到父元素的起始位置。

接着，我们使用 `.slide` 元素的 `flex: 0 0 100%;` 属性来让每个轮播图都占据整个父元素的宽度。同时，使用 `scroll-snap-align: start;` 属性来让每个轮播图都对齐到父元素的起始位置。

最后，我们给每个轮播图中的图片设置宽度为100%，高度自适应，以保证图片可以完整显示在轮播图中。

这样，一个简单的用flex布局实现的轮播图就完成了。