在上一篇文章中，我们介绍了 Flexbox 布局的基本概念和用法，本文将延续上一篇的话题，通过实战案例来深入学习和掌握 Flexbox 布局。
项目介绍
本项目是一个彩虹滑道，由多个颜色块组成，用户可以通过滑动页面来调整颜色块的位置。页面效果如下：
本项目主要采用 Flexbox 布局来实现，通过对 Flexbox 的灵活运用，可以轻松实现这样一个炫酷的效果。
HTML 结构
本项目的 HTML 结构非常简单，只需要一个 div 元素来包含所有的颜色块即可。
-- -------------------- ---- ------- ---- ---------------- ---- --------------------- --------------------------- ---- --------------------- ------------------------------ ---- --------------------- ------------------------------ ---- --------------------- ----------------------------- ---- --------------------- ---------------------------- ---- --------------------- ------------------------------ ---- --------------------- ------------------------------ ------
其中，.rainbow 为整个彩虹滑道的容器，.rainbow__color 为每个颜色块的类名，后面的 rainbow__color--red、rainbow__color--orange 等为不同颜色块的类名。
CSS 样式
容器设置
首先，我们需要设置 .rainbow 容器的样式，使其能够充满整个页面，并且禁止滚动。
-- -------------------- ---- ------- ----- ---- - ------- ----- - -------- - ------ ----- ------- ----- -------- ----- --------------- ------- --------- ------- -
其中，html 和 body 的高度设置为 100%，以使 .rainbow 容器能够充满整个页面。display: flex 和 flex-direction: column 则是设置 Flexbox 布局的基本属性，使得颜色块能够垂直排列。overflow: hidden 则是禁止滚动，以免影响用户体验。
颜色块设置
接下来，我们需要设置每个颜色块的样式。首先，我们需要设置它们的基本样式，包括宽度、高度、和背景颜色等。
-- -------------------- ---- ------- --------------- - ------ ----- ------- ----- - -------------------- - ----------------- -------- - ----------------------- - ----------------- -------- - ----------------------- - ----------------- -------- - ---------------------- - ----------------- -------- - --------------------- - ----------------- -------- - ----------------------- - ----------------- -------- - ----------------------- - ----------------- -------- -
这里我们采用了 BEM 命名规范，.rainbow__color 为每个颜色块的基本类名，后面的 .rainbow__color--red、.rainbow__color--orange 等为不同颜色块的类名，用于设置不同颜色的背景。
Flexbox 布局设置
接下来，我们需要对每个颜色块设置 Flexbox 布局的属性，以实现彩虹滑道的效果。
首先，我们需要设置每个颜色块的 flex-grow 属性，使它们能够根据容器的高度进行等比例放大。
.rainbow__color {
flex-grow: 1;
}接着，我们需要设置每个颜色块的 flex-shrink 属性，以避免它们在容器尺寸过小时过度缩小。
.rainbow__color {
flex-grow: 1;
flex-shrink: 0;
}最后，我们需要设置每个颜色块的 flex-basis 属性，以使它们的初始尺寸与容器的尺寸相等。
.rainbow__color {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}至此，我们已经完成了彩虹滑道的样式设置，可以通过滑动页面来调整颜色块的位置了。
JavaScript 交互
为了实现滑动页面来调整颜色块的位置，我们需要使用一些简单的 JavaScript 代码。具体实现方式如下：
-- -------------------- ---- ------- ----- ------- - ----------------------------------- --- ------ - -- --- -------- - -- --- -------------- - -- -------------------------------------- ------- -- - ------ - ------------------------- -------------- - -------------- -- ------------------ -- ----------------------------------- --- ------------------------------------- ------- -- - ----------------------- -------- - ------------------------- ----- ------ - -------- - ------- ------------------ -------------- - -------- ---
首先，我们需要获取 .rainbow 容器的 DOM 元素，并设置一些变量来记录滑动事件的相关信息。然后，我们通过 touchstart 和 touchmove 事件来监听用户的滑动行为，并计算出滑动的距离 deltaY，最后通过 window.scrollTo 方法来实现页面滑动的效果。
至此，我们已经完成了彩虹滑道的实现，通过对 Flexbox 布局的灵活运用，我们可以轻松实现这样一个炫酷的效果。希望本文对大家掌握 Flexbox 布局有所帮助，也希望大家能够通过实践来深入学习和掌握前端技术。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6785ddfb5638eae9601681f1