css flex自动换行

作者：清梦独行发布日期:2026-03-06 浏览:67

/* 容器设置为flex布局，并开启自动换行 */
.container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
}

/* 子元素的样式，方便查看效果 */
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightblue;
}

解释说明：

.container：将容器设置为 flex 布局，并通过 flex-wrap: wrap 来启用自动换行功能。当子元素超出容器宽度时，会自动换到下一行排列。
.item：定义了子元素的宽度、高度、边距和背景颜色，方便观察换行效果。

如果你需要更多帮助或有其他问题，请告诉我！

上一篇：css 文本自动换行

下一篇：css svg