Break flexbox if a new container is introduced

Question

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.

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

Worth remembering that the `flex-grow` property does not necessarily equal width. - http://stackoverflow.com/questions/34733955/width-vs-flex-grow-in-flexbox — Paulie_D, Jun 14 '16 at 15:38
@blonfu I'm trying to build my own grid System. For this `flex:1` would've worked, but elements have flex width based on the class. — Randy, Jun 14 '16 at 15:47

score 1 · Accepted Answer · answered Jun 14 '16 at 15:31

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>

Break flexbox if a new container is introduced

1 Answers1