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

ki1q1bka  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(86)

我希望新行中的内部div(内存3)位于内存1的正下方,并且我不希望不惜任何代价更改div结构。请帮帮我
例如:

.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:11100;’用于flex-inner-gc。

jei2mxaa

jei2mxaa1#

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>

相关问题