margin-top hanya jika item flex dibungkus

93

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>

Manuel Di Iorio
sumber
1
Pertanyaan yang mencari bantuan debugging ("mengapa kode ini tidak berfungsi?") Harus menyertakan perilaku yang diinginkan, masalah atau kesalahan tertentu, dan kode terpendek yang diperlukan untuk mereproduksinya dalam pertanyaan itu sendiri. Harap jangan menyalahgunakan blok kode untuk mengakali persyaratan ini .
Paulie_D
Masalahnya adalah dalam kasus ini saya tidak perlu menjelaskan dengan lebih banyak kode, jadi ini masalah StackOverflow jika kode blok diperlukan.
Manuel Di Iorio
1
Masalahnya adalah kegunaan bagi pengguna SO di masa mendatang . Jika tautan JSfiddle Anda hilang maka posting Anda pada dasarnya tidak berguna. Itulah mengapa SO meminta kode .... idealnya dalam potongan kode yang tersedia untuk Anda saat Anda membuat pertanyaan.
Paulie_D
Oke, saya mengerti, saya mengedit pertanyaan untuk mematuhi aturan;)
Manuel Di Iorio

Jawaban:

181

Anda dapat menambahkan beberapa margin-topke kedua item flex, dan negatif margin-topdengan 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;
}

Oriol
sumber
121
Oh CSS, kenapa kamu melakukan ini padaku
Sanderfish
4
Jawaban luar biasa
pilau
3
Ini tidak berfungsi jika penampung memiliki warna latar belakang atau batas
Frank van Wijk
@FrankvanWijk Gunakan div transparan bersarang untuk perbaikan margin Anda, dan induk untuk elemen visual.
peninggalan