Flexbox 布局实战（下）：利用 Flexbox 布局打造彩虹滑道-FunTeaLearn Online Web Tutorials

在上一篇文章中，我们介绍了 Flexbox 布局的基本概念和用法，本文将延续上一篇的话题，通过实战案例来深入学习和掌握 Flexbox 布局。

项目介绍

本项目是一个彩虹滑道，由多个颜色块组成，用户可以通过滑动页面来调整颜色块的位置。页面效果如下：

本项目主要采用 Flexbox 布局来实现，通过对 Flexbox 的灵活运用，可以轻松实现这样一个炫酷的效果。

HTML 结构

本项目的 HTML 结构非常简单，只需要一个 div 元素来包含所有的颜色块即可。

// www.javascriptcn.com code example
<div class="rainbow">
  <div class="rainbow__color rainbow__color--red"></div>
  <div class="rainbow__color rainbow__color--orange"></div>
  <div class="rainbow__color rainbow__color--yellow"></div>
  <div class="rainbow__color rainbow__color--green"></div>
  <div class="rainbow__color rainbow__color--blue"></div>
  <div class="rainbow__color rainbow__color--indigo"></div>
  <div class="rainbow__color rainbow__color--violet"></div>
</div>

其中，.rainbow 为整个彩虹滑道的容器，.rainbow__color 为每个颜色块的类名，后面的 rainbow__color--red、rainbow__color--orange 等为不同颜色块的类名。

CSS 样式

容器设置

首先，我们需要设置 .rainbow 容器的样式，使其能够充满整个页面，并且禁止滚动。

// www.javascriptcn.com code example
html, body {
  height: 100%;
}

.rainbow {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

其中，html 和 body 的高度设置为 100%，以使 .rainbow 容器能够充满整个页面。display: flex 和 flex-direction: column 则是设置 Flexbox 布局的基本属性，使得颜色块能够垂直排列。overflow: hidden 则是禁止滚动，以免影响用户体验。

颜色块设置

接下来，我们需要设置每个颜色块的样式。首先，我们需要设置它们的基本样式，包括宽度、高度、和背景颜色等。

// www.javascriptcn.com code example
.rainbow__color {
  width: 100%;
  height: 100%;
}

.rainbow__color--red {
  background-color: #f44336;
}

.rainbow__color--orange {
  background-color: #ff9800;
}

.rainbow__color--yellow {
  background-color: #ffeb3b;
}

.rainbow__color--green {
  background-color: #4caf50;
}

.rainbow__color--blue {
  background-color: #2196f3;
}

.rainbow__color--indigo {
  background-color: #3f51b5;
}

.rainbow__color--violet {
  background-color: #9c27b0;
}

这里我们采用了 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 代码。具体实现方式如下：

// www.javascriptcn.com code example
const rainbow = document.querySelector('.rainbow');
let startY = 0;
let currentY = 0;
let startScrollTop = 0;

rainbow.addEventListener('touchstart', (event) => {
  startY = event.touches[0].clientY;
  startScrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
});

rainbow.addEventListener('touchmove', (event) => {
  event.preventDefault();
  currentY = event.touches[0].clientY;
  const deltaY = currentY - startY;
  window.scrollTo(0, startScrollTop - deltaY);
});

首先，我们需要获取 .rainbow 容器的 DOM 元素，并设置一些变量来记录滑动事件的相关信息。然后，我们通过 touchstart 和 touchmove 事件来监听用户的滑动行为，并计算出滑动的距离 deltaY，最后通过 window.scrollTo 方法来实现页面滑动的效果。

至此，我们已经完成了彩虹滑道的实现，通过对 Flexbox 布局的灵活运用，我们可以轻松实现这样一个炫酷的效果。希望本文对大家掌握 Flexbox 布局有所帮助，也希望大家能够通过实践来深入学习和掌握前端技术。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6785ddfb5638eae9601681f1

Flexbox 布局实战（下）：利用 Flexbox 布局打造彩虹滑道