Nützliche Flexbox-Technik: Ausrichtung verschiebendes Umbrechen

Ich bin gerade auf eine Situation gestoßen, in der ich einen Titel hatte, der in zwei Abschnitte unterteilt war. Der Haupttitel, groß und fett, linksbündig wie jeder normale Titel. Aber dann eine Art Untertitel, rechtsbündig, auf derselben Zeile wie der Titel. Wenn dafür Platz ist, ist das großartig. Aber natürlich ändert sich Text ständig und der verfügbare Platz ist variabel. Schauen wir uns das mal an.

So soll es aussehen, wenn Platz vorhanden ist

Wenn nicht genügend Platz vorhanden ist, je nach Bildschirmgröße oder Länge, ist linksbündiges Umbrechen das, was wir wollen

Es gibt eine Reihe von Möglichkeiten, diesen rechtsbündigen Text dort zu platzieren, wenn Platz vorhanden ist.

• Wir könnten ihn absolut positionieren rechts. Das Hauptproblem dabei ist jedoch, dass absolut positionierte Elemente aus dem Dokumentfluss genommen werden, sodass sie nicht intelligent entscheiden können, wann sie mit anderem Text umbrechen sollen. Wir müssten einige feste Breiten festlegen, was wir in diesem Fall nicht wollen.
• Wir könnten ihn rechts float. Wir müssen keine Breiten festlegen und der Text bleibt im Dokumentfluss, was großartig ist. Aber sobald ein Umbruch erforderlich ist, bleibt der Text rechts "angeheftet" und ist nicht schön linksbündig, wie wir es wollen.
• Wir könnten das Ganze als Tabelle gestalten, was es uns ermöglicht, den Text problemlos am rechten Rand zu platzieren. Aber Tabellenzellen brechen überhaupt nicht um, daher können wir das gewünschte Layout nicht erreichen.

Glücklicherweise kann uns Flexbox hier helfen! Indem wir den Titel zu einem Flex-Container mit display: flex; und den Titel selbst mit flex-grow: 1; machen, kann er den Untertitel ganz nach rechts schieben. Flex-Container können umbrechen, daher stellen wir sicher, dass dies mit flex-wrap: wrap; geschieht.

Hier ist ein Video, das all die nicht so guten Methoden zeigt und wie Flexbox gewinnt

Und eine Live-Demo

Siehe den Stift Wrapping Same-Line Titles von Chris Coyier (@chriscoyier) auf CodePen.