margin-top apenas quando o item flexível é embalado

88

Eu tenho um contêiner flexível com dois itens flexíveis. Eu quero definir um margin-top no segundo, mas apenas quando estiver embrulhado e não na primeira linha flexível.

Se possível, quero evitar o uso de consultas de mídia.

Achei que a margem inferior do primeiro elemento poderia ser uma solução. No entanto, ele adiciona espaço na parte inferior quando os elementos não são embalados, portanto, mesmo problema.

Este é o meu 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>

Manuel Di Iorio
fonte
1
Perguntas que buscam ajuda na depuração ("por que este código não está funcionando?") Devem incluir o comportamento desejado, um problema ou erro específico e o código mais curto necessário para reproduzi-lo na própria pergunta. Não abuse dos blocos de código para contornar este requisito .
Paulie_D
O problema é que, neste caso, não precisei explicar com mais código, então é um problema de StackOverflow se um código de bloco for necessário.
Manuel Di Iorio
1
A questão é a utilidade para futuros usuários de SO. Se o seu link JSfiddle foi removido, sua postagem é essencialmente inútil. É por isso que o SO pede o código ... de preferência nos fragmentos de código disponíveis para você ao criar a pergunta.
Paulie_D
Ok, entendi, estou a editar a questão para cumprir as regras;)
Manuel Di Iorio

Respostas:

174

Você pode adicionar alguns margin-topa ambos os flex items e um negativo margin-topdo mesmo valor ao flex container.

Dessa forma, a margem negativa do flex container neutralizará a margem dos flex items na primeira linha, mas não a margem dos itens que quebraram nas outras linhas.

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

Oriol
fonte
114
Oh CSS, por que você faz isso comigo
Sanderfish
3
Excelente resposta
pilau
3
Isso não funciona quando o contêiner tem uma cor de fundo ou borda
Frank van Wijk