randy randy - 5 months ago 9
CSS Question

Break flexbox if a new container is introduced

I'm wondering how I can break the

flex
row and start a new one. I was hoping the
display:flex
would break it, but it does not.

wish



.dflex {
display:flex;
}

.flexitem {
flex:6;
}



/* irrelevant styles */

.dflex {
border:2px solid red;
margin:4px;
}

.flexitem {
border:2px solid black;
margin:4px;
}

<div class="dflex">
<div class="flexitem">
&nbsp;
</div>
<div class="flexitem">
&nbsp;
</div>
<div class="dflex">
<div class="flexitem">
&nbsp;
</div>
</div>
</div>




Answer

You can add flex-wrap: wrap; and width: 100%; to your .dflex class.

.dflex {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  border:2px solid red;
  margin:4px;
}

.flexitem {
  border:2px solid black;
  margin:4px;
  flex: 6;
}
<div class="dflex">
  <div class="flexitem">
    &nbsp;
  </div>
  <div class="flexitem">
    &nbsp;
  </div>
  <div class="dflex">
    <div class="flexitem">
      &nbsp;
    </div>
  </div>
</div>