如何使用 flex box 将嵌套 div 结构的内部 div 放入新行中？

How to get the inner div of the nested div structure into the new line using flex box?

提问人：kumling 提问时间：6/19/2023 最后编辑：kumling 更新时间：6/19/2023 访问量：34

问：

enter image description here

我想要新行中的内部 div （Mem 3），就在 Mem 1 的下方，我不想不惜一切代价改变 div 结构。请帮忙。

像这样 =>enter image description here

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  border: solid blue;
}

.flex-fgc {
  border: solid blue;
}

.flex-inner-gc {
  border: solid blue;
}
<div class='flex-container'>
  <div class='flex-child'>
    Mem 1
  </div>
  <div class='flex-fgc'>
    <div>
      Mem 2
    </div>
    <div class='flex-inner-gc'>
      Mem 3
    </div>
  </div>
</div>

我尝试了 flex-inner-gc 的“flex： 1 1 100;”。

html css flexbox 嵌套 换行符

评论

1赞 CBroe 6/19/2023
通过 “溶解”，并使用 ...然后也许可以限制外部容器的宽度，或者根据您确切需要它的行为方式来限制它。.flex-fgcdisplay: contents.flex-inner-gcflex: 0 0 100%inline-flex
1赞 Rene van der Lende 6/19/2023
弹性框布局只有一级深度，因此为（和/或未分类）定义的任何弹性框规则都不起作用。.flex-inner-gcdiv
0赞 kumling 6/20/2023
@CBroe - 您的建议确实有效，但我不确定 display： contents 是否是一种好的做法。非常感谢！

答：

1赞 Temani Afif 6/19/2023 #1

float 可以很容易地做到这一点。

.flex-child {
  border: solid blue;
  float: left;
}

.flex-fgc > * {
  float: left;
  border: solid blue;
}

.flex-inner-gc {
  clear: both;
}
<div class='flex-container'>
  <div class='flex-child'>
    Mem 1
  </div>
  <div class='flex-fgc'>
    <div>
      Mem 2
    </div>
    <div class='flex-inner-gc'>
      Mem 3
    </div>
  </div>
</div>

评论

0赞 kumling 6/20/2023
我想使用 flex。使用 flex 可以得到这个结果吗？

上一个：想要使用 JavaScript 在每个嵌套对象中添加新的键值

下一个：如何粉碎嵌套子项 SCSS 元素