在前端开发中，CSS Flexbox 布局已经成为了一种非常流行的布局方式。它可以让我们更加方便地进行页面布局，并且可以适应不同设备的屏幕尺寸。在这篇文章中，我们将介绍一些实用的 CSS Flexbox 布局技巧，其中包括如何实现横向滚动。
什么是 Flexbox 布局？
CSS Flexbox 布局是一种新的布局方式，它可以让我们更加方便地进行页面布局。它的主要思想是通过设置容器的属性来控制子元素的布局方式，从而实现灵活的页面布局。Flexbox 布局有两个主要的概念：Flex 容器和 Flex 项目。
Flex 容器是指被设置了 display: flex 属性的元素，它的作用是将内部的 Flex 项目排列成一行或一列，并且可以控制它们的对齐方式、间距、换行等属性。
Flex 项目是指 Flex 容器中的子元素，它的作用是根据 Flex 容器的属性进行布局，从而实现各种不同的页面布局方式。
如何实现横向滚动？
在实际的页面布局中，我们经常会遇到需要实现横向滚动的情况，比如图片轮播、新闻滚动等。使用 CSS Flexbox 布局可以非常方便地实现横向滚动，下面我们将介绍两种实现方式。
方式一：使用 overflow-x 属性
首先，我们可以使用 overflow-x 属性来实现横向滚动。具体的实现步骤如下：
- 设置 Flex 容器的 display 属性为 flex。
- 设置 Flex 容器的 overflow-x 属性为 auto。
- 设置 Flex 项目的 flex-shrink 属性为 0，这样可以防止 Flex 项目缩小导致出现横向滚动条。
- 设置 Flex 项目的宽度为固定值，这样可以控制每个 Flex 项目的宽度。
- 设置 Flex 容器的宽度为 100%，这样可以让 Flex 容器占满整个父级容器。
示例代码如下：
// javascriptcn.com 代码示例
.container {
display: flex;
overflow-x: auto;
width: 100%;
}
.item {
flex-shrink: 0;
width: 200px;
}方式二：使用 white-space 属性
另外一种实现方式是使用 white-space 属性来实现横向滚动。具体的实现步骤如下：
- 设置 Flex 容器的 display 属性为 flex。
- 设置 Flex 容器的 white-space 属性为 nowrap，这样可以让 Flex 项目排列在同一行上。
- 设置 Flex 项目的 flex-shrink 属性为 0，这样可以防止 Flex 项目缩小导致出现横向滚动条。
- 设置 Flex 项目的宽度为固定值，这样可以控制每个 Flex 项目的宽度。
- 设置 Flex 容器的宽度为固定值，这样可以让 Flex 容器的内容超出容器范围，并且出现横向滚动条。
示例代码如下：
// javascriptcn.com 代码示例
.container {
display: flex;
white-space: nowrap;
width: 100%;
overflow-x: auto;
}
.item {
flex-shrink: 0;
width: 200px;
}总结
CSS Flexbox 布局是一种非常实用的布局方式，它可以让我们更加方便地进行页面布局，并且可以适应不同设备的屏幕尺寸。在这篇文章中，我们介绍了如何使用 CSS Flexbox 布局实现横向滚动，其中包括使用 overflow-x 属性和 white-space 属性两种实现方式。希望这些技巧能够帮助你更好地进行页面布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65585102d2f5e1655d283148