纯css3实现思维导图样式示例

思维 导图又称之为脑图

他大概是这个样子滴：

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

答案是肯定的 下面上代码

ht ML 代码

<div class=" ;m  ai nBody" id="node1">
    < h1 >node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>node2</h1></div>
        <div class="mainBody"><h1>node2</h1></div>
    </div>
</div>

css3代码

.mainBody{
    dis play : - webkit -flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex -s tart ;
}
.sbody{

}
.oneBody{
    display: -webk IT -flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
 # node1{
    /*h ei ght: 200px;*/
    m arg in -t op: 100px;
    mar gin -left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content:  center ;
}

实际效果如图：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是 为你收集整理的 纯css3实现思维导图样式示例 全部内容，希望文章能够帮你解决 纯css3实现思维导图样式示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于纯css3实现思维导图样式示例的详细内容...