如果引入了新容器，请中断flexbox

Question

我想知道如何打破flex行并开始新行。我希望display:flex可以打破它，但事实并非如此。

＆＃13;

＆＃13;

.dflex {
  display:flex;
}

.flexitem {
  flex:6;
}



/* irrelevant styles */

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将flex-wrap: wrap;和width: 100%;添加到.dflex课程。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;