Question 43845 in Html Question posted in
Some basic documentation can be found here.

Flexbox for nested items – Html

I am creating a graph from divs. The outermost div is a flexbox and it has nested divs for nodes in it. They are nested because every node recursively creates its child nodes. I want the nodes to be horizontally next to each other, but for some reason each one is in its own row. Additionally, for some reason, the second node is not overlapping the first but every other is overlapping its parent a bit.
What am I doing wrong and is there a way to use flexbox for such a nested graph?

.graph {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.node {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  font-size: 18px;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
<div class="graph">
  <div class="node">
    <p>3</p>
    <div class="node">
      <p>2</p>
      <div class="node">
        <p>1</p>
        <div class="node">
          <p>0</p>
        </div>
      </div>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    In my understanding you want something like this. The issue in your code is that you use flex on graph when node added in graph flex property apply on it but when next node added in node it don’t inherit flex property because it don’t contain flex property.

    .graph {
  display: flex;
  justify-content: center;
  position: relative;
}

.node {
  position: absolute;
  top: 0;
  left: 55px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  font-size: 18px;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.node:first-child {
  left: 50%;
  margin-left: -100px;
}
    <div class="graph">
  <div class="node">
    <p>3</p>
    <div class="node">
      <p>2</p>
      <div class="node">
        <p>1</p>
        <div class="node">
          <p>0</p>
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Sorry to say but there is no proper way to do it. Because you can’t use Flexbox or Grid layout models here. So my suggestion is to use position:absolute property.
    I hope my answer is helpful to you.

    .flex{
  position: absolute;
  top:0;
 }
.margin{
  margin-left:50px;
}
.node {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ccc;
    text-align: center;
    font-size: 18px;
    color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
}
    <div class="graph flex">
   <div class="node flex ">
      <p>3</p>
      <div class="node flex margin">
         <p>2</p>
         <div class="node flex margin">
            <p>1</p>
            <div class="node flex margin">
               <p>0</p>
            </div>
         </div>
      </div>
   </div>
</div>
    Login or Signup to reply.
  3. 0

    You can make use of the CSS display: contents setting and still use flex.

    This snippet moves the formatting to the child of each node and sets the node itself to display: contents. This means its children are considered by the flex.

    .graph {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

p {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  font-size: 18px;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node {
  display: contents;
}
    <div class="graph">
  <div class="node">
    <p>3</p>
    <div class="node">
      <p>2</p>
      <div class="node">
        <p>1</p>
        <div class="node">
          <p>0</p>
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search