flex应用：使用flex布局实现纯CSS树状图表

admin管理员组

文章数量:1794759

flex应用：使用flex布局实现纯CSS树状图表

需求描述

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

如果只是需要实现树图效果，可以使用echarts树图 （echarts完全支持鼠标事件，非常便捷。。有空补上使用echarts树图实现的代码） ；这里需要每个子项支持点击，且个人想实现试试需要自由定义节点样式，考虑用纯CSS实现树图效果。

布局透视

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

代码

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

HTML <!-- HTML代码 --> <div class="chartBg"> <div class="chartHead"> <div class="chartHeadName"> 图表标题 </div> <div class="chartLine"></div> </div> <div class="chartItems"> <!-- firstItem：第一个子项相对右侧整体div的向上偏移量 --> <!-- lastItem：最后的子项相对右侧整体div的向下偏移量 --> <!-- 若图表只有一个子项（即：既是第一个子项也是最后的子项）时 --> <!-- 唯一子项需要同时加上firstItem和lastItem --> <!-- <div class="chartItem firstItem lastItem"> <div class="chartLine"></div> <div class="chartItemName"> 图表唯一子项 </div> </div> --> <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 /* 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; } /* 第一个子项相对右侧整体div的向上偏移量 */ .firstItem { margin-top: -38px; } /* 最后的子项相对右侧整体div的向下偏移量 */ .lastItem { margin-bottom: -38px; } /* 鼠标指针悬停时呈现可点击的光标形状 */ .chartItem:hover { cursor: pointer; } flex调试技巧

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

补充

其实可以不用新增firstItem、lastItem来指定chartItem的第一项、最后一项的样式，可以使用CSS选择器指定样式，好处是不用再额外为第一项、最后一项增加特别的样式类名：

/* firstItem可以使用first-child选择器改写为如下形式，这样写无需再在div中添加类名 */ .chartItem:first-child { margin-top: -38px; } /* lastItem可以使用last-child选择器改写为如下形式，这样写无需再在div中添加类名 */ .chartItem:last-child { margin-bottom: -38px; }

关于CSS选择器的使用，可以参考这篇博客：nth-child的使用方法，写得非常详细易懂~☆▽☆~。

参考文档

[1] echarts树图 [2] flex布局 [3] 菜鸟教程HTML在线工具 [4] 鼠标指针的光标形状 [5] margin和padding的用法 [6] 盒子模型 [7] CSS选择器 [8] nth-child的使用方法

本文标签： 树状图表布局Flexcss