Flexbox是一种CSS布局方式，可以实现灵活的单行或者多行布局。而横向滚动在一些特定情况下非常有用，比如当我们需要在一个容器中放置多个同样大小的元素时，这些元素可能会占据过多的空间，而我们需要在水平方向上滚动来查看所有元素。
通过使用Flexbox容器，我们可以很容易地实现该功能，以下是实现步骤：
1. 首先创建一个flexbox容器
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> ... </div>
其中，.container是我们创建的容器类；.item是我们创建的相同大小的元素类。
2. 设置flexbox容器的样式
我们需要设置容器的一些Flexbox样式，包括：
.container {
display: flex; /* 将容器元素设置为flex布局 */
overflow-x: auto; /* 确保容器只会在超出范围时水平滚动 */
flex-wrap: nowrap; /* 确保容器只会在一行上显示所有元素 */
}3. 设置元素的样式
我们还需要设置每个元素的样式，以便它们在容器中正确布局。
.item {
flex: 0 0 auto; /* 将元素的宽度设置为固定值 */
height: 100px; /* 设置元素的高度 */
margin-right: 10px; /* 设置元素之间的水平间距 */
}4. 完成
通过上述步骤，我们就可以实现一个支持横向滚动的Flexbox容器。
下面是完整的示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ----------- ----- ---------- ------- - ----- - ----- - - ----- ------- ------ ------------- ----- -
总结
通过使用Flexbox容器的方式，我们可以实现简单且灵活的横向滚动。同时，这种布局方式的优势在于我们可以在不同的设备上，灵活地控制容器和元素的大小和位置，以适应不同的需求。
因此，我们应该多加学习和使用Flexbox布局方式，以提高我们的页面设计和开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66492c3cd3423812e47f1fc9