时间轴是一个常见的网页设计元素，它可以用来展示时间流逝的历程，比如公司的发展历程、个人成长历程等。在过去，实现时间轴效果通常需要使用复杂的 CSS 和 JavaScript 代码，但是现在，使用 Flexbox 布局可以轻松实现时间轴效果，无需复杂的代码。
Flexbox 布局简介
Flexbox 是一种 CSS 布局模式，它可以让开发者轻松地实现复杂的布局效果。Flexbox 布局的核心是弹性容器和弹性项目。弹性容器是一个包含弹性项目的容器，弹性项目则是弹性容器内的子元素。通过设置弹性容器和弹性项目的属性，可以实现各种复杂的布局效果。
Flexbox 布局有以下三个重要的概念：
弹性容器（Flex Container）：包含了一组弹性项目的容器。通过设置容器的属性，可以控制弹性项目的排列方式。
弹性项目（Flex Item）：弹性容器内的子元素。通过设置弹性项目的属性，可以控制弹性项目在弹性容器内的排列方式。
轴线（Axis）：弹性容器的主轴和交叉轴。在默认情况下，弹性容器的主轴是水平方向，交叉轴是垂直方向。通过设置容器的属性，可以改变主轴和交叉轴的方向。
实现时间轴效果
下面我们将使用 Flexbox 布局来实现一个简单的时间轴效果。我们将创建一个包含多个时间节点的容器，每个时间节点包含一个日期和一段描述信息。最终的效果如下图所示：
HTML 结构
首先，我们需要创建一个包含多个时间节点的容器。HTML 结构如下：
-- -------------------- ---- -------
---- -----------------
---- ----------------------
---- -------------------------------------
---- ------------------------------------
------
---- ----------------------
---- -------------------------------------
---- -------------------------------------
------
---- ----------------------
---- -------------------------------------
---- -------------------------------------
------
---- --- ---
------在容器中，每个时间节点都是一个包含日期和描述信息的 div 元素，它们都有一个共同的类名 timeline-item。日期和描述信息分别使用类名 timeline-date 和 timeline-text 来表示。
CSS 样式
接下来，我们需要使用 CSS 样式来实现时间轴效果。首先，我们需要将容器设置为弹性容器，让时间节点在主轴上排列。我们还需要设置容器的高度和宽度，以及一些其他的样式：
-- -------------------- ---- ------- --------- - -------- ----- --------------- ------- ------- ------ ------ ----- --------- --------- --------- ------- -------- ---- -- -
在上面的代码中，我们将容器的 display 属性设置为 flex，将 flex-direction 属性设置为 column，这样时间节点就会在主轴上垂直排列。我们还设置了容器的高度、宽度、位置和内边距。
接下来，我们需要为每个时间节点设置一些样式。我们将日期和描述信息都设置为绝对定位，让它们可以在容器中自由排列。我们还将日期和描述信息都设置为半透明的背景色，以便突出显示时间节点。最终的样式代码如下：
-- -------------------- ---- ------- -------------- - --------- --------- -------------- ----- - --------------- -------------- - --------- --------- ----------------- ------- -- -- ----- -------- ----- -------------- ---- ----------- - - --- ------- -- -- ----- - -------------- - ----- ------- ---- -- - -------------- - ----- -- ---- ---- ---------- ----------------- -
在上面的代码中，我们将每个时间节点设置为相对定位，并设置了一些外边距。我们将日期和描述信息都设置为绝对定位，并设置了一些内边距、圆角和阴影。日期使用 left 和 top 属性将其定位在时间轴的左侧，描述信息使用 left、top 和 transform 属性将其定位在时间轴的右侧。
最后，我们还需要为容器添加一个伪元素，用于表示时间轴的线条。我们将伪元素设置为绝对定位，并使用 left、top、bottom 和 width 属性将其定位在容器的左侧。我们还将伪元素设置为半透明的背景色和圆角，以便突出显示时间轴线条。最终的代码如下：
-- -------------------- ---- ------- ----------------- - -------- --- --------- --------- ----- ---- ---- -- ------- -- ------ ---- ----------------- ------- -- -- ----- -------------- ---- ---------- ----------------- -
完整代码
最终的 HTML 和 CSS 代码如下：
-- -------------------- ---- -------
---- -----------------
---- ----------------------
---- -------------------------------------
---- ------------------------------------
------
---- ----------------------
---- -------------------------------------
---- -------------------------------------
------
---- ----------------------
---- -------------------------------------
---- -------------------------------------
------
---- --- ---
------
-------
--------- -
-------- -----
--------------- -------
------- ------
------ -----
--------- ---------
--------- -------
-------- ---- --
-
-------------- -
--------- ---------
-------------- -----
-
---------------
-------------- -
--------- ---------
----------------- ------- -- -- -----
-------- -----
-------------- ----
----------- - - --- ------- -- -- -----
-
-------------- -
----- -------
---- --
-
-------------- -
----- --
---- ----
---------- -----------------
-
----------------- -
-------- ---
--------- ---------
----- ----
---- --
------- --
------ ----
----------------- ------- -- -- -----
-------------- ----
---------- -----------------
-
--------总结
使用 Flexbox 布局可以轻松实现时间轴效果，无需复杂的 CSS 和 JavaScript 代码。通过设置弹性容器和弹性项目的属性，可以控制时间节点在主轴上的排列方式，从而实现时间轴效果。在实际开发中，我们可以根据实际需求来调整容器和项目的属性，以实现更加复杂的时间轴效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663ec79fd3423812e4d03ddf