Pure CSS3 mind map style example

Mind Map

He probably looks like this:

Most of the implementations on the Internet are implemented using d3.js, and some are implemented manually using svg. Recently, my work requires it, and I am very lazy, so I am wondering if it can be implemented using CSS3?

The answer is yes. Here is the code

HTML code

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

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

The actual effect is as shown below:

Oh, it's a bit crude... But you can do whatever you want with the style. To add nodes, you only need to add the corresponding node code in HTML. The height and position are adaptive. Thanks to CSS3 flex, you are lucky to live in this era.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Detailed explanation of the process of building Prometheus+Grafana based on docker

>>: IE6 distortion problem

Several methods of horizontal and vertical centering of div content using css3 flex

Pure CSS3 mind map style example

Several methods of horizontal and vertical centering of div content using css3 flex

uniapp Sample code for implementing global sharing of WeChat mini-programs

Graphic tutorial on installing Ubuntu 18.04 on VMware 15 virtual machine

jQuery canvas draws picture verification code example

Detailed explanation of MySql installation and login

Summary of various methods for JavaScript to determine whether it is an array

VUE+SpringBoot implements paging function

The process of JDK installation and configuration of environment variables under WIN10 (detailed version)

Usage of Node.js http module

XHTML introductory tutorial: Use of list tags

Recommend

Example code for converting http to https using nginx

JavaScript implements password box verification information

What to do if you forget your mysql password

Detailed explanation of Javascript Echarts air quality map effect

Solve the matching problem in CSS

CentOS8 - bash: garbled characters and solutions

Detailed tutorial on installing MySQL 5.7.20 on RedHat 6.5/CentOS 6.5

Native js implements regular validation of the form (submit only after validation)

Solve the hierarchy problem of child element z-index and parent element sibling nodes in CSS

How to set background blur with CSS

js to achieve simple image drag effect

Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources

Sample code for implementing honeycomb/hexagonal atlas with CSS

Introduction to Kubernetes (k8s)

Database index knowledge points summary