flex布局应用——运用flex布局纯css实现树状图表

需求描述

实现横向树状图效果，其中右侧子项支持点击后跳转页面：

其实如果只是需要实现树图效果，可以使用echarts树图；但这里需要每个子项支持点击，且需要自由定义节点样式，考虑用纯CSS实现树图效果。

布局透视

观察效果树图，可以看到其中的对称结构较多（使用flex布局可以很方便地实现各种div对齐效果）：
1、图表标题需与右侧子项水平居中对齐；
2、右侧子项需要在垂直方向等距分布；
3、图表的连线与连接项需要垂直居中分布

代码

可以到这里（菜鸟教程HTML在线工具）粘贴代码执行查看效果

<!-- HTML代码 -->
<div class="chartBg">
  <div class="chartHead">
    <div class="chartHeadName">
      图表标题
    </div>
    <div class="chartLine"></div>
  </div>
  <div class="chartItems">
    <div class="chartItem firstItem">
      <div class="chartLine"></div>
      <div class="chartItemName">
        图表分支1
      </div>
    </div>
    <div class="chartItem">
      <div class="chartLine"></div>
      <div class="chartItemName">
        图表分支2
      </div>
    </div>
    <div class="chartItem lastItem">
      <div class="chartLine"></div>
      <div class="chartItemName">
        图表分支3
      </div>
    </div>
  </div>
</div>

/* CSS代码 */
.chartBg {
  width: 640px;
  height: 320px;
  background: #acacac;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.chartHead, .chartItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}

.chartItems {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-left: 4px solid green;
}

.chartHeadName {
  width: 120px;
  text-align: center;
  color: white;
  background: grey;
  font-size: 28px;
  padding: 8px 10px;
}

.chartItemName {
  height: 28px;
  line-height: 28px;
  background: yellow;
  font-size: 22px;
  padding: 4px 6px;
  border: 2px solid green;
  border-radius: 6px;
  margin: 20px 0;
}

.chartLine {
  background: green;
  height: 4px;
  min-width: 80px;
}

.firstItem {
  margin-top: -38px;
}

.lastItem {
  margin-bottom: -38px;
}

.chartItem:hover {
  cursor: pointer;
}

flex调试技巧

在Chrome浏览器中，使用开发者工具->元素，选中页面div后可直接调试样式
注意：在开发者工具中调试出预期的页面效果后，需将样式覆盖本地代码，否则页面刷新后将“一夜回到解放前”-_-||

参考文档
[1] echarts树图
[2] flex布局
[3] 菜鸟教程HTML在线工具