Flexbox 布局是一种强大的 CSS 布局方式，可以快速而灵活地实现各种布局效果，包括行列滚动。
在传统的布局方式中，实现行列滚动需要使用 JavaScript 来操作 DOM 元素的位置和尺寸，而在 Flexbox 布局中，我们可以利用其强大的属性来实现这种效果，而不需要任何 JavaScript 的帮助。
Flexbox 布局的基本概念
在使用 Flexbox 布局之前，需要先了解一些基本的概念。
- Flex 容器（Flex container）：用于包含 Flex 元素的容器，可以使用
display: flex或display: inline-flex来定义。 - Flex 元素（Flex item）：Flex 容器中的子元素，可以使用
flex属性来定义它在 Flex 容器中的排列方式。 - 主轴（Main axis）：Flex 容器的主要方向，可以使用
flex-direction属性来定义。 - 交叉轴（Cross axis）：与主轴垂直的方向，可以使用
align-items和justify-content属性来定义。
实现行滚动
在 Flexbox 布局中，我们可以使用 flex-wrap 属性来控制 Flex 元素的换行方式。默认情况下，flex-wrap 属性的值为 nowrap，即不换行。如果将其设置为 wrap，则当 Flex 元素超出 Flex 容器的宽度时，会自动换行。
我们可以利用这个特性来实现行滚动的效果。具体实现方式如下：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- --------------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ------ ------ ------- ------ ----------- ----- - ----- - ------ ----- ------- ----- ----------------- ----- ------- ----- -
在上面的代码中，我们创建了一个 Flex 容器，并将其宽度设置为 300px，高度设置为 100px，在容器中创建了 10 个 Flex 元素，每个元素的宽度和高度都为 50px，背景色为 #ccc，之间有 10px 的间距。
为了实现行滚动的效果，我们将容器的 flex-wrap 属性设置为 wrap，并将其 overflow-x 属性设置为 auto，表示当容器中的元素超出容器的宽度时，会出现水平滚动条。
实现列滚动
与行滚动类似，我们也可以利用 flex-wrap 属性来实现列滚动的效果。具体实现方式如下：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- --------------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ------ ------ ------- ------ ----------- ----- - ----- - ------ ----- ------- ----- ----------------- ----- ------- ----- -
在上面的代码中，我们创建了一个 Flex 容器，并将其宽度设置为 100px，高度设置为 300px，在容器中创建了 10 个 Flex 元素，每个元素的宽度和高度都为 50px，背景色为 #ccc，之间有 10px 的间距。
为了实现列滚动的效果，我们将容器的 flex-wrap 属性设置为 wrap，并将其 overflow-y 属性设置为 auto，表示当容器中的元素超出容器的高度时，会出现垂直滚动条。
总结
Flexbox 布局是一种强大的 CSS 布局方式，可以快速而灵活地实现各种布局效果，包括行列滚动。通过掌握 Flexbox 布局的基本概念和属性，我们可以轻松地实现行列滚动的效果，而不需要任何 JavaScript 的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65113e4795b1f8cacd9a9ff6