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

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

.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-: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; / Safari /
    display: flex;
    flex-direction: column;
    justify-content: center;
}