web-dev-qa-db-fra.com

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

J'ai un conteneur flexible avec deux articles flexibles. Je veux définir une marge sur le deuxième, mais uniquement lorsqu'elle est enveloppée et non sur la première ligne flexible.

Si possible, je veux éviter d'utiliser des requêtes multimédias.

Je pensais que margin-bottom sur le premier élément pourrait être une solution. Cependant, cela ajoute de l'espace en bas lorsque les éléments ne sont pas encapsulé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>
cssmarginflexbox
61
Manuel Di Iorio

Vous pouvez ajouter quelques margin-top aux deux éléments flexibles et à un élément négatif margin-top du même montant pour le 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 articles qui se sont enroulés sur d'autres lignes.

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