margin-top chỉ khi vật phẩm flex được bọc

Tôi có một hộp đựng linh hoạt với hai mặt hàng linh hoạt. Tôi muốn đặt margin-top trên cái thứ hai, nhưng chỉ khi nó được bao bọc chứ không phải ở dòng flex đầu tiên.

Nếu có thể, tôi muốn tránh sử dụng các truy vấn phương tiện.

Tôi nghĩ rằng margin-bottom ở phần tử đầu tiên có thể là một giải pháp. Tuy nhiên, nó thêm không gian ở phía dưới khi các phần tử không được bao bọc, do đó, cùng một vấn đề.

Đây là mã của tôi:

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

Bạn có thể thêm một số margin-topvào cả hai mục linh hoạt và số âm margin-topcủa cùng một số lượng vào thùng chứa linh hoạt.

Bằng cách này, lề âm của vùng chứa flex sẽ vô hiệu hóa lề của các mục flex ở dòng đầu tiên, nhưng không phải là lề của các mục nằm ở các dòng khác.

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