I am attempting to dynamically draw a line using the provided JSON data.
I have heard that this can be easily achieved with flexbox.
Important: I would greatly appreciate a solution involving flexbox
This is what I hope to achieve:
https://i.stack.imgur.com/7IH2d.png
Here is the JSON data I have:
var path = [
[{name:"S",color:"blue",parent:true}]
[{name:"A",color:"blue"},{name:"B",color:"blue"},{name:"C",color:"blue"}],
[{name:"D",color:"blue"},{name:"E",color:"blue"}],
[{name:"E",color:"blue"},{name:"F",color:"blue"}]
]
I have attempted something like this:
.container{
display:flex;
max-width:1200px;
margin-top:100px;
justify-content:center;
margin-left: 214px;
}
.container .items{
padding: 40px 70px;
border:1px solid rgba(15,30,200,.6);
margin-right: 90px;
}
.line{
flex:1;
position:relative;
left:40px;
width:100px;
border-top:1px solid red;
display:inline-block;
}
.line {
flex: 1;
position: relative;
left: 161px;
width: 91px;
border-top: 1px solid rgba(15,30,200,.6);
display: inline-block;
}<div class="container">
<div class="items"><span class="line"></span>A</div>
<div class="items"><span class="line"></span>B</div>
<div class="items"><span class="line"></span>C</div>
<div class="items">D</div>
</div>Please assist me with this task. Thank you in advance for your help!