<think>根据用户需求，用户希望使用
CSS flex
布局实现横向滚动。结合引用的内容，
实现方法主要涉及以下几个关键
CSS属性：
1. 父容器设置 `display: flex;` 启用flex
布局。
2. 父容器设置 `overflow
-x: scroll;` 或 `overflow
-x: auto;` 以
实现水平方向的
滚动（当内容超出时出现
滚动条）。
3. 父容器设置 `white
-space: nowrap;` 防止子元素换行（但在flex
布局中，这一步有时可以省略，因为flex默认不换行，但为了确保不换行，可以加上）。
4. 子元素设置 `flex
-shrink: 0;` 以防止子元素被压缩（保持原始宽度，避免因容器空间不足而缩小）。
另外，根据引用[4]中的示例，还可以给子元素设置一个固定的宽度（如`width`或`flex
-basis`）并配合`flex
-shrink:0`。
下面是一个具体的
实现示例：
HTML结构：
```html
<div class="flex
-container">
<div class="flex
-item">Item 1</div>
<div class="flex
-item">Item 2</div>
<div class="flex
-item">Item
3</div>
<div class="flex
-item">Item 4</div>
<div class="flex
-item">Item 5</div>
</div>
```
CSS样式：
```
css
.flex
-container {
display: flex; /* 启用flex
布局 */
overflow
-x: scroll; /* 水平
滚动 */
white
-space: nowrap; /* 防止子元素换行，但flex
布局下默认不换行，可省略，但加上更保险 */
/* 以下样式可根据需要调整 */
width: 100%; /* 容器宽度，可根据实际情况设置 */
padding: 10px; /* 内边距 */
box
-sizing: border
-box; /* 盒模型，可选 */
}
.flex
-item {
flex
-shrink: 0; /* 防止子元素被压缩 */
/* 设置子元素的宽度，可以使用固定宽度，也可以使用flex
-basis */
width: 200px; /* 固定宽度 */
/* 或者使用 flex
-basis: 200px; */
height: 150px; /* 高度根据需要设置 */
margin
-right: 10px; /* 设置子元素之间的间距 */
background: #eee; /* 背景色，仅用于演示 */
}
```
注意：
- 如果子元素的内容可能会换行，可以在子元素上也设置`white
-space: nowrap;`。
- 滚动条样式可以根据浏览器支持使用`::
-webkit
-scrollbar`等伪元素进行自定义。
根据引用[2][
3][4]，都强调了使用`overflow
-x: scroll`和`white
-space: nowrap`，同时子元素需要设置不收缩（`flex
-shrink:0`）和固定宽度（或基准宽度）来确保
布局正确。
因此，按照上述示例即可
实现flex
布局的
横向滚动。
相关问题：
1. 如何自定义
横向滚动条的样式？
2. 在移动端
实现横向滚动时需要注意哪些问题？
3. 如何
实现flex
布局下的响应式
横向滚动？</think>###
CSS Flex
布局实现横向滚动的方法
要
实现横向滚动效果，需在**父容器**上设置以下关键
CSS 属性：
```
css
.flex
-scroll
-container {
display: flex; /* 启用 Flex
布局 */
overflow
-x: auto; /* 启用水平
滚动条（auto 表示按需显示）*/
white
-space: nowrap; /* 防止子元素换行 */
gap: 10px; /* 可选：子元素间距 */
padding: 8px; /* 可选：内边距 */
}
```
**子元素**需添加：
```
css
.flex
-item {
flex
-shrink: 0; /* 禁止子元素被压缩 */
width: 200px; /* 固定宽度（或使用 flex
-basis） */
/* 或 flex: 0 0 auto; */
}
```
#### 完整示例
```html
<div class="flex
-scroll
-container">
<div class="flex
-item">内容1</div>
<div class="flex
-item">内容2</div>
<div class="flex
-item">内容
3</div>
<!
-- 更多子元素
-->
</div>
```
#### 关键点解析
1. **`overflow
-x: auto/scroll`**
控制水平
滚动条（`auto` 按需显示，`scroll` 始终显示）[^1][^
3]
2. **`flex
-shrink: 0`**
禁止子元素宽度被压缩，确保保持固定宽度[^4]
3. **`white
-space: nowrap`**
防止 Flex 容器内的子元素换行（即使空间不足）[^2][^
3]
4. **响应式处理**
若需自适应宽度，可将子元素设为：
```
css
.flex
-item {
flex: 0 0 auto; /* 不伸缩、不扩展、自动基准宽度 */
min
-width: 150px; /* 最小宽度限制 */
}
```
> ⚠️ 注意：避免在父容器设置 `flex
-wrap: wrap`，否则会破坏
横向滚动效果[^
3]。
####
滚动条美化（可选）
```
css
/* 隐藏
滚动条（仍可
滚动） */
.flex
-scroll
-container {
scrollbar
-width: none; /* Firefox */
&::
-webkit
-scrollbar { display: none; } /* Chrome/Safari */
}
```
---
### 相关问题
1. 如何
实现 Flex
布局下的响应式
横向滚动，使子元素宽度自适应？
2.
横向滚动时如何隐藏
滚动条但保留
滚动功能？
3. Flex
横向滚动与 Grid
横向滚动实现有何区别？
4. 在移动端
实现横向滚动需要注意哪些兼容性问题？
扫一扫
5156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
