使用CSS Flexbox创建简洁时间轴

在网页设计中,时间轴是一种常见且有效的方式来展示事件的顺序和进程。本文将介绍如何使用CSS Flexbox创建一个简洁优雅的时间轴,无需复杂的JavaScript代码。
在这里插入图片描述

基本HTML结构

首先,我们需要创建基本的HTML结构:

html复制<div class="timeline">
  <div class="events">
    <div class="event life">
      <svg class="marker" xmlns="http://www.w3.org/200![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d6842b409144c9f99fd8aa5bdc24d89.png#pic_center)
0/svg" width="12" height="12">
        <circle cx="6" cy="6" r="6"></circle>
      </svg>
      <div class="content">
        <time>1989</time>
        <div class="text">
          <p>I was born in the north of Sweden</p>
        </div>
      </div>
    </div>
    <!-- 更多事件... -->
  </div>
</div>

CSS样式

1. 创建时间线

使用::before伪元素创建时间线:

css复制.events {
  position: relative;
}

.events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: white;
}

2. 事件对齐

使用Flexbox对齐事件:

css复制.event {
  display: flex;
  align-items: baseline;
}

.event .marker {
  position: relative;
  left: -6px;
}

3. 垂直间距

使用Flexbox控制事件间的垂直间距:

css复制.events {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

4. 响应式设计

使用媒体查询实现响应式设计:

css复制@media (min-width: 700px) {
  .events::before {
    left: 50%;
  }
  
  .event .marker {
    order: 1;
  }
  
  .event .content {
    width: 50%;
    text-align: right;
    padding-inline: 1em;
  }
  
  .event:nth-child(even) {
    flex-direction: row-reverse;
  }
  
  .event:nth-child(even) .content {
    text-align: left;
  }
  
  .event:nth-child(even) .marker {
    left: 6px;
  }
}

完整CSS代码

以下是完整的CSS代码:

css复制.events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--color-hr);
}

.events {
  position: relative;
  display: flex;
  margin-block: 0.5em;
  flex-direction: column;
  row-gap: 1em;
}

.event {
  display: flex;
  align-items: baseline;
}

.event .marker {
  position: relative;
  left: -6px;
}

.event.life .marker {
  fill: var(--melange_b_yellow);
}

.event.programming .marker {
  fill: var(--melange_b_magenta);
}

.event.family .marker {
  fill: var(--melange_b_red);
}

.content time {
  font-family: concourse_4, Helvetica, sans-serif;
  font-weight: bold;
}

@media (min-width: 700px) {
  .events::before {
    left: 50%;
  }
  
  .event .marker {
    order: 1;
  }
  
  .event .content {
    width: 50%;
    text-align: right;
    padding-inline: 1em;
  }
  
  .event:is(.programming, .work, .projects) {
    flex-direction: row-reverse;
  }
  
  .event:is(.programming, .work, .projects) .content {
    text-align: left;
  }
  
  .event:is(.programming, .work, .projects) .marker {
    left: 6px;
  }
}

通过这些CSS样式,我们创建了一个简洁、响应式的时间轴。在小屏幕上,事件垂直排列;在大屏幕上,事件分布在时间线的两侧。这种设计既美观又实用,能够有效地展示事件的顺序和重要性。

使用Flexbox使得创建这样的时间轴变得相对简单,它简化了许多曾经复杂的布局任务。通过调整颜色、字体和间距,你可以进一步自定义时间轴以适应你的网站设计。

demos实现

HTＭＬ实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交互式时间轴演示</title>
  <style>
    /* CSS 样式将在这里 */
  </style>
</head>
<body>
  <h1>交互式时间轴演示</h1>
  
  <div class="controls">
    <label>
      时间轴颜色:
      <input type="color" id="lineColor" value="#ffffff">
    </label>
    <label>
      事件间距:
      <input type="range" id="eventSpacing" min="0.5" max="3" step="0.1" value="1">
    </label>
    <label>
      响应式布局宽度:
      <input type="number" id="responsiveWidth" min="300" max="1200" step="50" value="700">px
    </label>
  </div>

  <div class="timeline">
    <div class="events">
      <div class="event life">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>1989</time>
          <div class="text">
            <p>我出生在瑞典北部</p>
          </div>
        </div>
      </div>
      <div class="event programming">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2005</time>
          <div class="text">
            <p>开始学习编程</p>
          </div>
        </div>
      </div>
      <div class="event life">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2010</time>
          <div class="text">
            <p>搬到瑞典南部</p>
          </div>
        </div>
      </div>
      <div class="event programming">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2015</time>
          <div class="text">
            <p>开始职业编程生涯</p>
          </div>
        </div>
      </div>
      <div class="event family">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2020</time>
          <div class="text">
            <p>组建家庭</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // JavaScript 代码将在这里
  </script>
</body>
</html>

CSS实现

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f0f0;
  color: #333;
}

h1 {
  text-align: center;
}

.controls {
  background-color: #e0e0e0;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.controls label {
  display: block;
  margin-bottom: 10px;
}

.timeline {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--line-color, #fff);
}

.events {
  position: relative;
  display: flex;
  margin-block: 0.5em;
  flex-direction: column;
  row-gap: var(--event-spacing, 1em);
}

.event {
  display: flex;
  align-items: baseline;
}

.event .marker {
  position: relative;
  left: -6px;
}

.event.life .marker { fill: #ffd700; }
.event.programming .marker { fill: #ff00ff; }
.event.family .marker { fill: #ff0000; }

.content time {
  font-weight: bold;
}

@media (min-width: 700px) {
  .events::before {
    left: 50%;
  }

  .event .marker {
    order: 1;
  }

  .event .content {
    width: 50%;
    text-align: right;
    padding-inline: 1em;
  }

  .event:nth-child(even) {
    flex-direction: row-reverse;
  }

  .event:nth-child(even) .content {
    text-align: left;
  }

  .event:nth-child(even) .marker {
    left: 6px;
  }
}

js实现

document.addEventListener('DOMContentLoaded', function() {
  const lineColor = document.getElementById('lineColor');
  const eventSpacing = document.getElementById('eventSpacing');
  const responsiveWidth = document.getElementById('responsiveWidth');
  const timeline = document.querySelector('.timeline');
  const events = document.querySelector('.events');

  function updateTimeline() {
    timeline.style.setProperty('--line-color', lineColor.value);
    events.style.setProperty('--event-spacing', `${eventSpacing.value}em`);
    document.body.style.setProperty('--responsive-width', `${responsiveWidth.value}px`);
  }

  lineColor.addEventListener('input', updateTimeline);
  eventSpacing.addEventListener('input', updateTimeline);
  responsiveWidth.addEventListener('input', updateTimeline);

  updateTimeline();
});

完整demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交互式时间轴演示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f0f0f0;
      color: #333;
    }

    h1 {
      text-align: center;
    }

    .controls {
      background-color: #e0e0e0;
      padding: 10px;
      margin-bottom: 20px;
      border-radius: 5px;
    }

    .controls label {
      display: block;
      margin-bottom: 10px;
    }

    .timeline {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .events::before {
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
      width: 2px;
      background: var(--line-color, #fff);
    }

    .events {
      position: relative;
      display: flex;
      margin-block: 0.5em;
      flex-direction: column;
      row-gap: var(--event-spacing, 1em);
    }

    .event {
      display: flex;
      align-items: baseline;
    }

    .event .marker {
      position: relative;
      left: -6px;
    }

    .event.life .marker { fill: #ffd700; }
    .event.programming .marker { fill: #ff00ff; }
    .event.family .marker { fill: #ff0000; }

    .content time {
      font-weight: bold;
    }

    @media (min-width: var(--responsive-width, 700px)) {
      .events::before {
        left: 50%;
      }

      .event .marker {
        order: 1;
      }

      .event .content {
        width: 50%;
        text-align: right;
        padding-inline: 1em;
      }

      .event:nth-child(even) {
        flex-direction: row-reverse;
      }

      .event:nth-child(even) .content {
        text-align: left;
      }

      .event:nth-child(even) .marker {
        left: 6px;
      }
    }
  </style>
</head>
<body>
  <h1>交互式时间轴演示</h1>
  
  <div class="controls">
    <label>
      时间轴颜色:
      <input type="color" id="lineColor" value="#ffffff">
    </label>
    <label>
      事件间距:
      <input type="range" id="eventSpacing" min="0.5" max="3" step="0.1" value="1">
    </label>
    <label>
      响应式布局宽度:
      <input type="number" id="responsiveWidth" min="300" max="1200" step="50" value="700">px
    </label>
  </div>

  <div class="timeline">
    <div class="events">
      <div class="event life">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>1989</time>
          <div class="text">
            <p>我出生在瑞典北部</p>
          </div>
        </div>
      </div>
      <div class="event programming">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2005</time>
          <div class="text">
            <p>开始学习编程</p>
          </div>
        </div>
      </div>
      <div class="event life">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2010</time>
          <div class="text">
            <p>搬到瑞典南部</p>
          </div>
        </div>
      </div>
      <div class="event programming">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2015</time>
          <div class="text">
            <p>开始职业编程生涯</p>
          </div>
        </div>
      </div>
      <div class="event family">
        <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
        <div class="content">
          <time>2020</time>
          <div class="text">
            <p>组建家庭</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const lineColor = document.getElementById('lineColor');
      const eventSpacing = document.getElementById('eventSpacing');
      const responsiveWidth = document.getElementById('responsiveWidth');
      const timeline = document.querySelector('.timeline');
      const events = document.querySelector('.events');

      function updateTimeline() {
        timeline.style.setProperty('--line-color', lineColor.value);
        events.style.setProperty('--event-spacing', `${eventSpacing.value}em`);
        document.body.style.setProperty('--responsive-width', `${responsiveWidth.value}px`);
      }

      lineColor.addEventListener('input', updateTimeline);
      eventSpacing.addEventListener('input', updateTimeline);
      responsiveWidth.addEventListener('input', updateTimeline);

      updateTimeline();
    });
  </script>
</body>
</html>