css flex 自动换行

/* 使用 CSS Flexbox 实现自动换行的示例代码 */

.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素自动换行 */
  gap: 10px; /* 子元素之间的间距 */
}

.item {
  flex: 1 1 200px; /* 每个子元素的宽度为 200px，可以灵活调整 */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

解释说明：

• display: flex;：将容器设置为 Flexbox 布局。
• flex-wrap: wrap;：允许子元素在必要时自动换行，默认情况下，Flexbox 的子元素会尝试在同一行内排列。
• gap: 10px;：设置子元素之间的间距，避免它们紧挨在一起。
• flex: 1 1 200px;：每个子元素的宽度为 200px，并且可以灵活调整（根据容器的大小）。如果容器宽度不足，子元素会自动换行。