css - que - margen superior solo cuando el elemento flexible está envuelto

que es margin y padding en css

Question

Tengo un contenedor flexible con dos artículos flexibles. Quiero establecer un margen superior en el segundo, pero solo cuando está envuelto y no en la primera línea flexible.

Si es posible, quiero evitar el uso de consultas de medios.

Pensé que margen inferior en el primer elemento podría ser una solución. Sin embargo, agrega espacio en la parte inferior cuando los elementos no están envueltos, por lo que el mismo problema.

Este es mi código:

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

Answer 1

Puede agregar un poco de margin-top a ambos elementos flexibles, y un margin-top negativo de la misma cantidad al contenedor flexible.

De esta manera, el margen negativo del contenedor flexible neutralizará el margen de los elementos flexibles en la primera línea, pero no el margen de los elementos que se ajustan a otras líneas.

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