플렉스 아이템이 포장 된 경우에만 margin-top

두 개의 플렉스 항목이있는 플렉스 컨테이너가 있습니다. 두 번째 줄에 여백 상단을 설정하고 싶지만 첫 번째 플렉스 라인이 아닌 래핑 된 경우에만 설정합니다.

가능하다면 미디어 쿼리 사용을 피하고 싶습니다.

첫 번째 요소의 margin-bottom이 해결책이 될 수 있다고 생각했습니다. 그러나 요소를 감싸지 않을 때 하단에 공간을 추가하므로 동일한 문제가 발생합니다.

이것은 내 코드입니다.

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

margin-top두 플렉스 항목 에 일부 를 추가 margin-top하고 플렉스 컨테이너에 동일한 양 의 음수 를 추가 할 수 있습니다 .

이런 식으로 플렉스 컨테이너의 음수 여백은 첫 번째 줄에서 플렉스 항목의 여백을 중립화하지만 다른 줄로 래핑 된 항목의 여백은 무효화합니다.

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