如果引入了新容器，则中断 flexbox答案

【问题标题】：Break flexbox if a new container is introduced如果引入了新容器，则中断 flexbox
【发布时间】：2016-10-15 10:21:05
【问题描述】：

我想知道如何打破flex 行并开始一个新行。我希望display:flex 会破坏它，但它没有。

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

【问题讨论】：

值得记住的是，flex-grow 属性不一定等于宽度。 - stackoverflow.com/questions/34733955/…
offtopic，只是出于好奇：你为什么使用flex:6？
@blonfu 我正在尝试构建自己的网格系统。对于这个flex:1 本来可以工作的，但是元素具有基于类的弹性宽度。

标签： html css flexbox

【解决方案1】：

您可以将flex-wrap: wrap; 和width: 100%; 添加到您的.dflex 类中。

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

【讨论】：