css flex 换行

/* 使用 CSS Flexbox 实现换行布局 */

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

.item {
  flex: 0 0 100px; /* 设置每个子元素的宽度为 100px，不缩放 */
  margin: 5px; /* 设置外边距 */
  background-color: lightblue; /* 设置背景颜色 */
  text-align: center; /* 文本居中 */
  line-height: 100px; /* 垂直居中 */
}

/* HTML 示例代码 */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

解释说明：

• display: flex;：将容器设置为 Flexbox 布局。
• flex-wrap: wrap;：允许子元素在一行放不下时自动换行，默认情况下是 nowrap（不换行）。
• flex: 0 0 100px;：表示子元素的宽度固定为 100px，且不会缩放。
• margin: 5px;：给每个子元素添加外边距，避免它们紧挨在一起。
• background-color: lightblue;：为子元素设置背景颜色，方便观察布局效果。
• text-align: center; 和 line-height: 100px;：使文本在子元素中水平和垂直居中。

这样设置后，当容器内的子元素数量或宽度超出容器宽度时，子元素会自动换行排列。