在日常前端开发中，我们经常会使用到 Flexbox 布局，它可以实现更加灵活的布局方式，也能很好地解决一些复杂的布局问题。但是，在使用 Flexbox 进行多行布局时，如果数据过多，可能会出现内容溢出的问题。为了解决这个问题，我们可以考虑使用多行滚动来实现。
多行滚动原理
多行滚动的实现原理非常简单，主要是通过设置容器的高度以及 overflow: auto 来实现。具体的方法就是将多个子元素放在一个容器中，使得容器高度不够展示全部子元素，然后通过设置容器的 overflow 属性，使得容器具有滚动条，并可以对子元素进行滚动。
在 Flexbox 布局下实现多行滚动
在 Flexbox 布局下实现多行滚动的方法也很简单，我们只需要将多个 Flexbox 容器分别放在每一行中，然后对每一个 Flexbox 容器进行滚动即可。下面，我将通过示例代码来讲解如何实现。
HTML 代码
-- -------------------- ---- -------
---- -------------
---- -------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
---- -------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
---- -------------
---- --------------------
---- ---------------------
---- ---------------------
---- ---------------------
------
---- -------------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
------
------CSS 代码
-- -------------------- ---- ------- -- ---- -- ----- - -------- ----- -- ------- -- -- ---------- ----- -- -- -- ------- ------ -- ------- -- --------- ----- -- ----- -- ------- --- ----- ----- - -- --- -- ----- - -------- ----- -- ------- -- -- - -- ---- -- ----- - ----- -- -- ----- -- ------- ----- -- ---- -- ------- --- ----- ----- ------- ---- -- -- -- -
示例效果
总结
本文主要介绍了在 Flexbox 布局下实现多行滚动的方法，通过掌握这种布局方式，我们能够更加灵活地完成多列布局，并能够很好地解决内容溢出的问题。在实际项目中使用时，还需根据具体情况进行一些调整和优化，例如调整容器高度、设置滚动条样式等。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5782bf6b2d6eab30ea5dc