用CSS3怎样做思维导图样式，代码是什么-群英

上一篇：CSS中怎么让文本两端对齐，思路是什么下一篇：CSS与HTML如何结合，都有哪些方法

在实际应用中，我们有时候会遇到“用CSS3怎样做思维导图样式，代码是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用CSS3怎样做思维导图样式，代码是什么”文章能帮助大家解决问题。

思维导图又称之为脑图

他大概是这个样子滴：

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

答案是肯定的下面上代码

html代码

<div class="mainBody" 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{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#node1{
    /*height: 200px;*/
    margin-top: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

实际效果如图：