Bagaimana untuk meletakkan div dalaman struktur div bersarang ke dalam baris baharu menggunakan kotak flex?
P粉982054449
P粉982054449 2023-09-13 12:26:10
0
1
603

Saya mahukan div dalam (Mem 3) dalam baris baharu, di bawah Mem 1, dan saya tidak mahu menukar struktur div pada semua kos. tolong bantu.

Seperti ini =>

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

Saya mencuba "flex: 1 1 100;" untuk flex-inner-gc.

P粉982054449
P粉982054449

membalas semua(1)
P粉190883225

float boleh melakukan ini dengan mudah.

.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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan