How to evenly space (space-between) nested divs as if they were on same level

userI2c4 0
Viewed 27

can i have flex's space-between work on nested divs? ie the columns should be evenly spaced without changing the html markup as in this example:

<Column />
<div>
   <Column />
   <Column />
</div>
flexbox reactjs css html
2 Answers

No, the flex properties would only apply to div's. Here you can add the specific flex properties on div itself to achieve the desired effect.

criccode0

You just need to use display: contents; property to the inner wrapper.

.wrapper{
      display: flex;
      justify-content: space-between;
    }
    .column{
      height: 30px;
      width: 30px;
      border: 2px solid red;
    }
    .inner_wrapper{
      display: contents;
    }
<div class="wrapper">
  <div class="column"></div>
  <div class="inner_wrapper">
    <div class="column"></div>
    <div class="column"></div>
    <div class="inner_wrapper">
      <div class="column"></div>
      <div class="column"></div>
    </div>
  </div>
</div>

Happy Patel0
Related