margin-top nur bei der flex-Element gewickelt ist,

Ich habe ein flex-container mit zwei flex-Elemente. Ich möchte, um einen margin-top auf die zweite, aber nur, wenn es verpackt und nicht bei der ersten flex-line.

Wenn möglich, möchte ich vermeiden Sie die Verwendung von media queries.

Ich dachte margin-bottom auf das erste element könnte eine Lösung sein. Allerdings, fügt es Raum an der Unterseite, wenn die Elemente werden nicht gewickelt, so dass gleiche problem.

Dies ist mein code:

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

HTML:

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

  • Fragen suchen debugging-Hilfe ("warum ist dieser code arbeiten?") muss das gewünschte Verhalten, ein bestimmtes problem oder einen Fehler, und der kürzeste code, der erforderlich ist, um es zu reproduzieren in der Frage selbst. Bitte missbrauchen Sie nicht die code-Blöcke, um diese Anforderung.
  • Das problem ist, dass in diesem Fall brauchte ich nicht zu erklären, mit mehr code, so ist es ein problem von StackOverflow, wenn ein block-code ist erforderlich.
  • Das Problem ist die Nützlichkeit für die Zukunft - Nutzer von SO. Wenn Ihr JSfiddle link ging dann Ihr Beitrag ist im wesentlichen nutzlos. Das ist, warum, SO fragt nach code....idealerweise in der code-Schnipsel zur Verfügung, die Sie beim erstellen der Frage.
  • Ok, ich habe verstanden, ich bin der Bearbeitung der Frage der Befolgung der Regeln; -)
InformationsquelleAutor Manuel Di Iorio | 2015-06-17
  1. 99

    Können Sie fügen Sie einige margin-top sowohl flex-Elemente und eine negative margin-top von der gleichen Menge, um die flex-container.

    Diese Weise, die negative Marge der flex-container wird neutralisieren die Marge der flex-Elemente in der ersten Zeile, aber nicht die Marge der Elemente, gewickelt zu anderen Linien.

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

    CSS:

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

    HTML:

    <div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>

    • Oh, CSS, why u do dis mir
    • Ausgezeichnete Antwort
    • Was ist, wenn Sie mit einem system, dass kein Zugriff auf CSS? (RN, Flut)
    InformationsquelleAutor Oriol
Schreibe einen Kommentar