margin-top uniquement lorsque l'élément flexible est enveloppé


88

J'ai un conteneur flexible avec deux éléments flexibles. Je veux définir une marge supérieure sur le second, mais uniquement lorsqu'il est enveloppé et non à la première ligne flexible.

Si possible, je souhaite éviter d'utiliser les requêtes multimédias.

Je pensais que la marge inférieure sur le premier élément pourrait être une solution. Cependant, cela ajoute de l'espace en bas lorsque les éléments ne sont pas enveloppés, donc même problème.

Voici mon code:

.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
Les questions demandant une aide au débogage ("pourquoi ce code ne fonctionne-t-il pas?") Doivent inclure le comportement souhaité, un problème ou une erreur spécifique et le code le plus court nécessaire pour le reproduire dans la question elle-même. Veuillez ne pas abuser des blocs de code pour contourner cette exigence .
Paulie_D

Le problème est que dans ce cas, je n'ai pas besoin d'expliquer avec plus de code, c'est donc un problème de StackOverflow si un code de bloc est requis.
Manuel Di Iorio

1
Le problème est l'utilité pour les futurs utilisateurs de SO. Si votre lien JSfiddle a disparu, votre message est essentiellement inutile. C'est pourquoi SO demande du code .... idéalement dans les extraits de code dont vous disposez lorsque vous créez la question.
Paulie_D

Ok, j'ai compris, je suis en train de modifier la question pour respecter les règles;)
Manuel Di Iorio

Réponses:


174

Vous pouvez en ajouter margin-topaux deux éléments flexibles et un négatif margin-topdu même montant au conteneur flexible.

De cette façon, la marge négative du conteneur flexible neutralisera la marge des éléments flexibles à la première ligne, mais pas la marge des éléments enveloppés dans d'autres lignes.

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


114
Oh CSS, pourquoi tu me dis
Sanderfish

3
Excellente réponse
pilau

3
Cela ne fonctionne pas lorsque le conteneur a une couleur d'arrière-plan ou une bordure
Frank van Wijk
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.