思維導(dǎo)圖又稱之為腦圖，本篇文章主要介紹了使用css3實現(xiàn)思維導(dǎo)圖樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

思維導(dǎo)圖又稱之為腦圖

他大概是這個樣子滴：

網(wǎng)上大部分實現(xiàn)有用d3.js實現(xiàn)，有手動用svg實現(xiàn)，最近工作需要，本人很懶，在琢磨看看用css3能不能實現(xiàn)呢？

答案是肯定的 下面上代碼

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. }

實際效果如圖：

哦有點簡陋····不過樣式什么的你想怎么搞就怎么搞嘍，其中節(jié)點的增加，你只需要html中增加相應(yīng)的節(jié)點代碼就行，高度位置都是自適應(yīng)的，感謝css3的 flex，你們活在這個時代是幸福的

以上就是使用css3實現(xiàn)思維導(dǎo)圖樣式示例的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。