如何使用flex box將嵌套div結構的內部div放入新行?
P粉982054449
P粉982054449 2023-09-13 12:26:10
0
1
602

我想要新行中的內部 div (Mem 3),位於 Mem 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: 1 1 100;」對於 flex-inner-gc。

P粉982054449
P粉982054449

全部回覆(1)
P粉190883225

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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板