Saya memiliki wadah fleksibel dengan dua item fleksibel. Saya ingin menetapkan margin-top pada yang kedua, tetapi hanya jika dibungkus dan bukan pada garis fleksibel pertama.
Jika memungkinkan, saya ingin menghindari penggunaan kueri media.
Saya pikir margin-bottom pada elemen pertama bisa menjadi solusi. Namun, itu menambah ruang di bagian bawah ketika elemen tidak dibungkus, jadi masalahnya sama.
Ini kode saya:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item-big {
background: blue;
width: 300px;
}
.item-small {
background: red;
margin-top: 30px;
}
<div class="container">
<div class="item-big">
FIRST BIG ELEM
</div>
<div class="item-small">
SECOND SMALL ELEM
</div>
</div>
Jawaban:
Anda dapat menambahkan beberapa
margin-top
ke kedua item flex, dan negatifmargin-top
dengan jumlah yang sama ke wadah flex.Dengan cara ini, margin negatif dari wadah fleksibel akan menetralkan margin item fleksibel di baris pertama, tetapi bukan margin item yang digabungkan ke baris lain.
.container { margin-top: -30px; } .item-big, .item-small { margin-top: 30px; }
Tampilkan cuplikan kode
.container { display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: -30px; } .item-big, .item-small { margin-top: 30px; background: red; } .item-big { background: blue; width: 300px; }
<div class="container"> <div class="item-big"> FIRST BIG ELEM </div> <div class="item-small"> SECOND SMALL ELEM </div> </div>
sumber