使用css3实现思维导图样式示例

思维导图又称之为脑图，本篇文章主要介绍了使用css3实现思维导图样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

思维导图又称之为脑图

他大概是这个样子滴：

网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？

答案是肯定的 下面上代码

html代码

1. <div class="mainBody" id="node1">
2.     <h1>node1</h1>
3.     <div class="oneBody">
4.         <div class="mainBody">
5.             <h1>node2</h1>
6.             <div class="oneBody">
7.                 <div class="mainBody">
8.                     <h1>node3</h1>
9.                     <div class="oneBody">
10.                         <div class="mainBody">
11.                             <h1>node4</h1>
12.                         </div>
13.                         <div class="mainBody">
14.                             <h1>node4</h1>
15.                         </div>
16.                         <div class="mainBody">
17.                             <h1>node4</h1>
18.                         </div>
19.                     </div>
20.                 </div>
21.                 <div class="mainBody">
22.                     <h1>node3</h1>
23.                 </div>
24.                 <div class="mainBody">
25.                     <h1>node3</h1>
26.                 </div>
27.             </div>
28.         </div>
29.         <div class="mainBody"><h1>node2</h1></div>
30.         <div class="mainBody"><h1>node2</h1></div>
31.     </div>
32. </div>

css3代码

1. .mainBody{
2.     display: -webkit-flex; /* Safari */
3.     display: flex;
4.     flex-direction: row;
5.     justify-content: flex-start ;
6. }
7. .sbody{
8.  
9. }
10. .oneBody{
11.     display: -webkit-flex; /* Safari */
12.     display: flex;
13.     flex-direction: column;
14.     justify-content: space-around;
15. }
16. #node1{
17.     /*height: 200px;*/
18.     margin-top: 100px;
19.     margin-left: 100px;
20. }
21. h1{
22.     line-height: 100%;
23.     display: -webkit-flex; /* Safari */
24.     display: flex;
25.     flex-direction: column;
26.     justify-content: center;
27. }

实际效果如图：

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽，其中节点的增加，你只需要html中增加相应的节点代码就行，高度位置都是自适应的，感谢css3的 flex，你们活在这个时代是幸福的

以上就是使用css3实现思维导图样式示例的全部内容，希望对大家的学习有所帮助。