Rand oben nur, wenn das Flex-Element eingewickelt ist

Ich habe einen Flex-Container mit zwei Flex-Artikeln. Ich möchte einen Rand oben auf den zweiten setzen, aber nur, wenn er gewickelt ist und nicht an der ersten Flexlinie.

Wenn möglich, möchte ich die Verwendung von Medienabfragen vermeiden.

Ich dachte, der untere Rand des ersten Elements könnte eine Lösung sein. Es wird jedoch unten Platz hinzugefügt, wenn die Elemente nicht umbrochen werden, also das gleiche Problem.

Das ist mein 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>

Erweitern Sie das Snippet

css margin flexbox

— Manuel Di Iorio
quelle

Fragen, die Hilfe beim Debuggen suchen ("Warum funktioniert dieser Code nicht?"), Müssen das gewünschte Verhalten, ein bestimmtes Problem oder einen bestimmten Fehler und den kürzesten Code enthalten, der erforderlich ist, um ihn in der Frage selbst zu reproduzieren . Bitte missbrauchen Sie die Codeblöcke nicht, um diese Anforderung zu umgehen .

— Paulie_D

Das Problem ist, dass ich in diesem Fall nicht mit mehr Code erklären musste, so dass es ein Problem von StackOverflow ist, wenn ein Blockcode erforderlich ist.

— Manuel Di Iorio

Das Problem ist die Nützlichkeit für zukünftige Benutzer von SO. Wenn Ihr JSfiddle-Link verschwunden ist, ist Ihr Beitrag im Wesentlichen nutzlos. Deshalb fragt SO nach Code ... idealerweise in den Codefragmenten, die Ihnen beim Erstellen der Frage zur Verfügung stehen.

— Paulie_D

Ok, ich habe verstanden, ich bearbeite die Frage, um die Regeln einzuhalten;)

— Manuel Di Iorio

172

Sie können margin-topbeiden Flex-Elementen etwas hinzufügen und margin-topdem Flex-Container ein Negativ in derselben Menge hinzufügen .

Auf diese Weise neutralisiert der negative Rand des Flex-Containers den Rand der Flex-Elemente in der ersten Zeile, nicht jedoch den Rand der Elemente, die in andere Zeilen eingeschlossen wurden.

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

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

— Oriol
quelle

113

Oh CSS, warum tust du mir das an

— Sanderfish

Hervorragende Antwort

— Pilau

Dies funktioniert nicht, wenn der Container eine Hintergrundfarbe oder einen Rand hat

— Frank van Wijk