如何让子div在其flexbox父容器换行之前换行？

Question

我试图将行中的最后一个 div 在其换行到下一行之前将其换行。

<div class="flexcontainer">

        <div class="col1">this is text</div>
        <div class="col2">this is text</div>
        <div class="col3">
          <div class="contents m1">This is some other text</div>
          <div class="contents m2">This is some other text</div>
          <div class="contents m3">This is some other text</div>
        </div>

</div>

.flexcontainer{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.col3{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.contents{
  display:inline-block;
}

这是我正在处理的代码。 jsfiddle 示例

这是我发布的简化代码

我不太确定我之前做了什么。我能够创建一个 3 列柔性容器，其中最后一个子容器会在容器包装之前将其包装在自身内，但我似乎无法找到我之前如何做到这一点的解决方案。

Answer 1

我希望这就是您所期待的 -“在其 Flexbox 容器包装之前使子 div 包装。”。

使用

flex :shrink | wrap | basis

 属性和 

flex-wrap

 属性来包装 div 内容。

.flexcontainer {
  display: flex;
  flex-direction: row;
  background-color: lightgrey;
  flex-wrap:wrap;
}

.flexcontainer>div {
  flex: 1 1 0;
}

.col3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: red;
}

.contents {
  display: inline-block;
}

<div class="flexcontainer">
  <div class="col1">This is text</div>
  <div class="col2">this is text >> IT WILL BREAK AFTER HERE | | | </div>
  <div class="col3">
    <div class="contents m1">This is some other text</div>
    <div class="contents m2">This is some other text</div>
    <div class="contents m3">This is some other text</div>
    <div class="contents m3">This is some other text</div>
  </div>

</div>

Answer 2

一种方法是使用网格来模拟子元素的换行

.col3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Answer 3

我认为

.col3

 className 在容器元素中是重复的。

如果删除它，内容应该变成 3 列。