css flex换行

作者：风中孤狼发布日期:2025-03-20 浏览:46

/* 使用 CSS Flex 实现换行的示例代码 */

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

.item {
  flex: 1 1 200px; /* 每个子元素的宽度为 200px，且允许增长和收缩 */
  margin: 10px;
}

解释说明：

display: flex;：将容器设置为弹性盒子布局。
flex-wrap: wrap;：允许子元素在一行放不下时换行，默认情况下，子元素不会换行（nowrap）。
flex: 1 1 200px;：定义了每个子元素的基础宽度为 200px，并允许它们根据容器的大小进行增长或收缩。

上一篇：css solid

下一篇：css 偶数行变色