使用css3怎么實現一個思維導圖樣式

使用css3怎么實現一個思維導圖樣式？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

html代碼

<div class="mainBody" id="node1">
    <h2>node1</h2>
    <div class="oneBody">
        <div class="mainBody">
            <h2>node2</h2>
            <div class="oneBody">
                <div class="mainBody">
                    <h2>node3</h2>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h2>node4</h2>
                        </div>
                        <div class="mainBody">
                            <h2>node4</h2>
                        </div>
                        <div class="mainBody">
                            <h2>node4</h2>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h2>node3</h2>
                </div>
                <div class="mainBody">
                    <h2>node3</h2>
                </div>
            </div>
        </div>
        <div class="mainBody"><h2>node2</h2></div>
        <div class="mainBody"><h2>node2</h2></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;
}
h2{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

看完上述內容，你們掌握使用css3怎么實現一個思維導圖樣式的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！