Ich habe ein paar verschachtelte Flexboxen, die ich verwenden möchtefür eine reaktionsschnelle Website, und sie funktionieren ordnungsgemäß in Firefox, aber nicht in Chrome oder IE. Wenn Sie den Bildschirm verkleinern, sollten sich die Verknüpfungen so umbrechen lassen, dass sie übereinander liegen.
Die Links werden hier richtig umbrochen: http://jsfiddle.net/6796b/
Wenn sie sich jedoch in einer anderen Flexbox befinden, hören sie auf zu wickeln und überzulaufen (Hinweis: Nur die grünen "Links" wickeln / stapeln sich nicht richtig. Alles andere funktioniert wie beabsichtigt.): http://jsfiddle.net/3525C/8/
HTML:
<div class="header">
<div class="logo">logo</div>
<div class="nav">
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
</div>
CSS:
.header {
text-align: center;
display: flex; /* If I take this line out the links wrap properly again, but everything else breaks. */
flex-flow: row wrap;
}
.logo {
flex: 1 0 auto;
min-width: 100px;
background-color: red;
}
.nav {
flex: 1 0 auto;
background-color: lightgray;
text-align: center;
}
.link {
display: inline-block;
background-color: green;
}
Antworten:
3 für die Antwort № 1Sie müssen sich bewerben flex-shrink Wert von 1 damit das flexible Element flexibel ist. Sehen bearbeiten 9.
Die Standardeinstellung ist: flex: 0 1 auto was es dem flex item erlaubt "schrumpfen Sie auf seine minimale Größe, wenn nicht genügend Platz vorhanden ist"
In Ihrem Fall Einstellung flex: 1 0 auto erlaubt nav zu wachsen, aber die 0 verhindern, dass es schrumpfen kann, auch in Überlaufsituationen (Ihr Fall hier mit Inline-Blöcken).
d. h., wenn "alles" in einen flexiblen Container eingewickelt werden soll, stellen Sie die flexiblen Elemente auf ein flex: auto;
BEARBEITEN: Geändert flex: 1 1 auto; zum flex: auto; aus Gründen der Kompatibilität aufgrund von auto Sein Möglicherweise durch ein "main-size" -Schlüsselwort ersetzt in naher Zukunft.