写一个自适应屏幕宽度的flex 布局，里面的子元素自动换行

自适应屏幕宽度的flex布局是CSS布局中的一个非常实用的功能，它能够使子元素自动适应父容器的宽度，并且在必要时自动换行。以下是一个简单的实现方法：

.container {
  display: flex; /* 设置flex布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
}

.item {
  flex: 0 0 20%; /* 设置子元素的默认宽度和弹性 */
  box-sizing: border-box; /* 盒模型，包括边框和内边距在内的宽度 */
}

在这个例子中，`.container` 类定义了一个flex容器，`flex-wrap: wrap;` 属性确保了子元素可以根据屏幕大小自动换行。`.item` 类定义了容器中的子元素，`flex: 0 0 20%;` 表示每个子元素默认宽度为父容器宽度的20%，并且不允许子元素伸缩，`box-sizing: border-box;` 确保了元素的宽度和高度包括边框和内边距。

HTML结构如下：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <!-- 更多的 .item 元素 -->
</div>

将上述CSS类添加到HTML元素中，即可创建一个自适应屏幕宽度并且支持子元素自动换行的flex布局。