margin-top solo cuando el elemento flexible está envuelto

Tengo un contenedor flexible con dos elementos 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 el 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 es el mismo problema.

Este es mi codigo:

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

Expandir fragmento

css margin flexbox

— Manuel Di Iorio
fuente

Las preguntas que buscan ayuda para depurar ("¿por qué no funciona este código?") Deben incluir el comportamiento deseado, un problema o error específico y el código más corto necesario para reproducirlo en la pregunta. No abuse de los bloques de código para eludir este requisito .

— Paulie_D

El problema es que en este caso no necesité explicar con más código, por lo que es un problema de StackOverflow si se requiere un código de bloque.

— Manuel Di Iorio

El problema es la utilidad para los futuros usuarios de SO. Si su enlace JSfiddle desapareció, entonces su publicación es esencialmente inútil. Es por eso que SO solicita código ... idealmente en los fragmentos de código disponibles para usted cuando crea la pregunta.

— Paulie_D

Ok, lo entendí, estoy editando la pregunta para cumplir con las reglas;)

— Manuel Di Iorio

174

Puede agregar algo margin-topa ambos elementos flexibles y un negativo margin-topde 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 ajustaron a otras líneas.

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

Mostrar fragmento de código

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

Expandir fragmento

— Oriol
fuente

114

Oh CSS, ¿por qué me lo

— dices

Excelente respuesta

— pilau

Esto no funciona cuando el contenedor tiene un color de fondo o un borde

— Frank van Wijk