Flexbox außerhalb seines Containers
Ich versuche einen header-bar, in der es sind 3 Elemente, die zuerst nimmt man genau so viel Platz wie Sie können, während die anderen 2 nehmen so viel, wie Sie benötigen.
| title | button | button |
Das problem tritt auf, wenn der Titel Teil ist zu breit. Der Inhalt nicht umbrochen wird, und es schiebt die buttons aus dem Bild.
Lassen Sie mich zeigen mit codepen.
https://codepen.io/anon/pen/bqrpVg
Update
Ich sehe es jetzt, aber kann mir jemand erklären, was die Werte tun, um zu erreichen, was ich will, statt nur zu sagen Sie mir die Lösung, so dass ich es verstehen kann.
- Ich denke, dass Sie über komplizierte Dinge. Hier ist eine vereinfachte version: codepen.io/anon/pen/yMoJzd?Redakteure=1100
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem hier ist, dass Sie die Einstellung der Schaltflächen zum verkleinern, während explizit sagen, den Titel nicht zu schrumpfen. Das bedeutet, dass der Titel greifen, werden alle den Raum. Nun, wenn Sie
flex: 1;
Sie auf den Titel, und entfernen Sieflex: 0 1 auto;
undflex-basis: content;
mit den Tasten, funktioniert es wie erwartet: die buttons werden immer angezeigt und der Inhalt der Titel ist gewickelt.Sehen die geänderte codepen.
Wenn Sie die Einstellung
flex: 1 0 auto;
Sie aktivieren das Wachstum (1
) von einem flex-Element und Deaktivierung von dessen schrumpfen (0
). Also der browser wird nie schrumpfen Sie die title-element, um Platz zu machen für die Tasten.Bei der Verwendung
flex: 0 1 auto;
sagen Sie dem browser, dass der flex-Punkt ist nicht wirklich wichtig, und, wenn es nicht genug Platz, das flex-Element sollte schrumpfen, um Platz zu machen für andere Elemente.Hier ist, was meine Lösung ist:
flex: 1;
auf den Titel, die dem browser mitteilt, dass das element kann sich ausdehnen und schrumpfen können; es ist auch lehrreich zu packen, so viel Platz wie möglich;flex
Kürzel sind0 1 auto
, die nicht wirklich gebraucht wird;flex-basis: content
ist nicht wirklich unterstützt werden; siehe hier.Erstellt habe ich dieses Codepen für Sie:
https://codepen.io/anon/pen/JWyXQd
Code Hinzugefügt:
Ich bin mir nicht sicher, dass dies genau das, was Sie wollen, aber das ist, was ich mitbekommen habe.
Entfernen Sie alle Eigenschaften von Schaltflächen. Verwenden Sie einfach display:flex auf den container. Das ist es.
https://codepen.io/hunzaboy/pen/PpKNBm