margin-top solo cuando el elemento flexible está envuelto


88

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>


1
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

1
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

Respuestas:


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;
}


114
Oh CSS, ¿por qué me lo
dices

3
Excelente respuesta
pilau

3
Esto no funciona cuando el contenedor tiene un color de fondo o un borde
Frank van Wijk
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.