Flex-box ignoriert eingewickelt Kinder-Marge (Marge Zusammenbruch)

Angesichts des folgenden HTML-Code:

<div class="outer">
  <div>
    <div class="inner">A</div>
  </div>
</div>
<div class="outer">
  <div class="inner">B</div>
</div>

und die folgenden CSS - (prefix-free):

.outer {
  display: box;
  box-orient: vertical;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height:     50px;
  margin-top: 10px;
  background: green;
}

Flex-box ignoriert eingewickelt Kinder-Marge (Marge Zusammenbruch)

Hier ist ein CodePen.

A verpackt in einem <div> so ist es Marge wird ignoriert.

Q: Wie kann ich erreichen B's Verhalten für A (margin) mit dem flex-box-Modell?

Hinweis: Die div-Wrapper kann gehen mehrere Ebenen tief

Ausrichtung: neueste Chrome/Safari/iOS

Danken Ihnen sehr für Ihre Hilfe!

Edit: Dank @JoséCabo ich kam mit dieser:

.outer {
  display: flex;
  flex-direction: column;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height:     50px;
  margin-top: 10px;
  background: green;
}

CodePen

Chrome:
Flex-box ignoriert eingewickelt Kinder-Marge (Marge Zusammenbruch)

Safari:
Flex-box ignoriert eingewickelt Kinder-Marge (Marge Zusammenbruch)

Leider es funktioniert nicht in Safari wie erwähnt von @cimmanon, so brauche ich noch etwas Hilfe.

  • Wussten Sie, dass box-API ist veraltet? Sie haben die Verwendung von display: flex; api statt.
  • Das ist das Ergebnis wollen Sie bekommen? Sorry, aber ich verstehe dich nicht.
  • Die Eigenschaften, die verwendet werden sollte, hängt stark von dem browser, die Sie sind targeting. Safari, zum Beispiel, folgt man der älteren specs.
  • das zweite Ergebnis (B) ist die gewünschte ein, aber es sollte funktionieren mit diesen div-Wrapper zwischen .outer und .inner wie in (A). Danke!!!
InformationsquelleAutor Stephan Bönnemann | 2013-02-24
  1. 5

    Was Sie suchen eigentlich nichts zu tun hat mit Flexbox, aber was heißt Marge Zusammenbruch

    .outer div {
  border: 1px solid;
}

    Die neben der Grenze hat verhindert, dass die Marge kollabiert. Anstatt sich auf die Margen, würde ich empfehlen, eine Polsterung für den übergeordneten container:

    .outer {
  padding-top: 10px;
}

    Beispiel:

    CSS:

    .wrapper {
  background: #eef;
  border: 1px solid darkgray;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -1em;
}
  
.item {
  flex-grow: 1;
  margin: 1em;
  border: 1px solid black;
  padding: 1em;
  min-width: 6em;
}

    HTML:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
  <div class='container'>
    <div class='item'>item</div>
    <div class='item'>item</div>
    <div class='item'>item</div>   
    <div class='item'>item</div>
    <div class='item'>item</div>
    <div class='item'>item</div>    
  </div>
  </div>
</body>
</html>

    Nun decken alle Ihre Präfixe, brauchen Sie etwas wie dieses:

    .outer {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100px;
  width: 100px;
  background: red;
  margin: 10px;
}
    • Ich sehen immer noch für die beste Lösung, wo ich halten kann, mit dem Rand auf .inner. Im Idealfall würde ich mag, um änderungen an .inner nur. Aber der margin-collapse was ist sth. Ich kann darauf aufbauen. Ich danke Ihnen sehr!
    InformationsquelleAutor cimmanon
  2. 2

    Schließlich kam ich auf die richtige Lösung (für mein spezifisches problem).

    .outer {
  display: flex;
  flex-direction: column;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height: 50px;
  margin-top: 10px;
  background: green;
  display: inline-block;
  width: 100%;
}

    CodePen

    Ich bin mit display: inline-block auf .inner zu deaktivieren Marge reduzieren und dann kompensieren die verlorenen Breite mit width: 100%.

    Alle der Kredit geht an cimmanon für den Hinweis mich in die richtige "margin collapse" Richtung

    • Sie sollten akzeptieren, Ihre Antwort jedenfalls 🙂
    • akzeptieren kann Sie Ihre eigene Antwort in 2 Tagen" 😉
    InformationsquelleAutor Stephan Bönnemann
Schreibe einen Kommentar