margin-top sadece flex öğe sarıldığında

İki esnek ürün içeren bir esnek kabım var. İkinciye bir kenar boşluğu ayarlamak istiyorum, ancak yalnızca sarıldığında ve ilk esnek çizgide değil.

Mümkünse medya sorgularını kullanmaktan kaçınmak istiyorum.

İlk elemandaki marj-alt bir çözüm olabilir diye düşündüm. Bununla birlikte, elemanlar sarılmadığında altta boşluk ekler, bu yüzden aynı sorun.

Bu benim kodum:

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

Her margin-topiki esnek öğeye bir margin-topmiktar ekleyebilir ve aynı miktarda bir negatifi esnek kapsayıcıya ekleyebilirsiniz.

Bu şekilde, esnek kabın negatif kenar boşluğu, ilk satırdaki esnek öğelerin kenar boşluğunu etkisiz hale getirecek, ancak diğer satırlara sarılmış öğelerin marjını etkisiz hale getirecektir.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

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