Flex横向轮播需设容器display: flex且flex-wrap: nowrap，子项用flex: 0 0 100%等宽排列，配合overflow-x: hidden和img宽高自适应防拉伸。
用 Flex 实现横向轮播，核心是让所有轮播项在一行内排列，并通过控制容器的 overflow 和子项的 flex 行为来达成滑动效果。不需要 JS 也能做基础切换（配合 radio 或 :target），但结构必须合理。
容器设为 flex，禁止换行
轮播外层容器（如 .carousel）需设为 display: flex，并强制子项不换行：
-
flex-wrap: nowrap—— 必须加，否则多图可能折行 -
overflow-x: auto或hidden—— 决定是否允许手动拖拽或隐藏溢出内容 - 可选
scroll-behavior: smooth让滚动更自然
轮播项等宽或自适应布局
每个轮播图（如 .slide）作为 flex 子项，常用两种方式：
-
等宽固定尺寸：设
flex: 0 0 100%（即不放大、不缩小、基础宽度 100%），适合全屏轮播，每次只显示一张 -
多图并排：如想一行看 3 张，每张占 33.33%，可写
flex: 0 0 calc(100% / 3)，注意留间隙时用gap而非 margin
关键细节：避免缩放/错位
Flex 下图片容易被拉伸或对不齐，需额外处理：
立即学习“前端免费学习笔记（深入）”；
- 给
img加width: 100%; height: auto; display: block;保证比例 - 若轮播项有内边距或边框，用
box-sizing: border-box防止宽度计算偏差 - 避免在
.slide上设width同时又用flex，易冲突；优先靠 flex 控制尺寸
简易可操作示例结构
HTML 片段示意：
CSS 核心部分：
.carousel {display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
}
.slide {
flex: 0 0 100%;
min-width: 0; /* 防止文字撑宽破坏布局 */
}
.slide img {
width: 100%;
height: auto;
display: block;
}
