在网页设计中，时间轴布局常常被用来展示一段历史或者进程。时间轴布局可以很好的展示一系列的事件或者步骤，而且在各种设备上都能够很好的呈现。在本文中，我们将会使用 CSS Flexbox 技术实现一个响应式的时间轴布局。
什么是CSS Flexbox？
CSS Flexbox 是一种用来进行布局的 CSS 模块。通过使用 Flexbox，能够轻松的实现各种复杂布局，并且支持响应式布局。Flexbox 的特点包括：
- 灵活性：容器内的子元素的大小和位置能够被灵活地调整。
- 容器和子元素所有的属性都可以调整
- 支持响应式布局。
在本文中，我们将实现一个响应式的时间轴布局，该布局将支持移动设备和桌面设备。这个布局的样式大致如下：
接下来我们将通过以下几个步骤来实现这个布局：
步骤1：HTML 结构
我们首先来看一下这个时间轴布局的 HTML 结构。
-- -------------------- ---- -------
---- -----------------
---- ----------------------
---- -------------------------
--------- ------
------- --------
------
---- ---------------------------
---- --------------------------------
------
---- ----------------------
---- -------------------------
--------- ------
------- --------
------
---- ---------------------------
---- --------------------------------
------
---- ----------------------
---- -------------------------
--------- ------
------- --------
------
---- ---------------------------
---- --------------------------------
------
------在这里，我们将时间轴布局存储在名为 timeline 的 div 中。每个时间点都放置在一个名为 timeline_item 的 div 中。每个时间点都有三个子元素：
- timeline_content: 该 div 存储关于时间点的主要信息，如标题和文本内容。
- timeline_dot: 该 div 存储一个小点来表明该时间点。
- timeline_year: 该 div 存储年份。
步骤2：CSS 样式
接下来我们将设置 CSS 样式来实现时间轴布局的外观。请注意，为了使布局响应式，我们将使用 CSS Flexbox 属性。
-- -------------------- ---- -------
--------- -
-------- -----
--------------- -------
-
-------------- -
-------- -----
--------------- ----
------------ -------
----------- -----
--------- ---------
-------- -----
-------------------------
------ ----
------------- -----
------------ -----
-------------- -----
----------- --- --- ---- ------- -- -- -----
----------- --- ---- ------------
-
-------------------- -
---------- ------------------
----------- --- --- ---- ------- -- -- -----
-
----------------- -
----------
-
------------- -
------ -----
------- -----
-------------- ----
----------------- --------
------------- -----
-
-------------- -
----------------- --------
------ -----
-------------- ----
-------- --- -----
--------- ---------
--------
---- --
-
------ ---- ------ --- ----------- ------ -
---------------
--------- ---------
------ -----
---- -----
----------- -----
------ -----
-
--------------
------- - -----
-
----------------- -
-----------
-
-这里我们首先为 timeline 添加样式，样式包括：
- display: flex; 设置 timeline 容器的 flex 属性。
- flex-direction: column; 设置容器的纵向 flex 方向，每个步骤都是竖直排列。
- .timeline_item 元素的样式设置。
接下来我们设置每个时间点的样式。我们定义了以下 CSS 属性:
- display: flex; 设置 elem 容器的 flex 属性。
- flex-direction: row; 将容器设为水平方向的 flex 排列。
- align-items: center; 将每个元素水平对齐。
- margin-top: 50 px; 设置每个步骤之间的间距。
- position: relative; 设定相对定位。
- padding: 15 px; 设置每个元素的 padding 值。
- background-color: # f5f5f5; 设置时间轴的背景色。
- width: 90%; 设置每个时间点的宽度在 90% 的容器内。
- margin-right: auto; margin-left: auto; 设置元素居中。
- border-radius: 10 px; 为边框设置一个圆角半径值。
- box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); 设置一个盒子的阴影效果。
- transition: all 0.3s ease-in-out; 让元素的转变更加自然。
我们还为:hover 状态设置了一些属性。当鼠标悬停在时间内时，元素将会向上移动 10 像素，增加一个阴影效果。
要实现响应式的布局，我们需要在媒体查询中设置这个布局的样式。以上的样式设置将调整每个布局元素的宽度，使其可以在移动设备和桌面设备上都能够适当的显示。
在@media only screen 和 (max-width: 767px) 中，我们将 .timeline_year、.timeline_dot 和.timeline_content 的宽度设置为 100%。我们还将.timeline_year 上用的绝对定位设置为相对定位，以便这些元素将在垂直上居中。
总结
在本文中，我们通过使用 CSS Flexbox 技术，实现了一个响应式的时间轴布局。我们使用了 Flexbox 的一些技术，并且通过响应式媒体查询设置了它的一些属性。这种布局可以适用于不同类型的网站，例如学术论文，产品历程，甚至新闻事件。由于 CSS Flexbox 的灵活性，无论你使用的是移动设备还是桌面设备，该布局都可以很好地呈现。
示例代码
样例代码见 https://codepen.io/zhangshuai/pen/XWJwbzo.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520a34f95b1f8cacd8145e4