CSS Flexbox – Einführung in das Flexible Box Layout Module
Das sog. »CSS Flexible Box Layout Module« – kurz Flexbox – stellt neben CSS Grid eine der beiden wesentlichen Techniken zur Gestaltung von Layouts mit CSS dar. Im Gegensatz zu älteren Techniken wie z.B. Floats wurde Flexbox für die Konstruktion von flexiblen und responsiven Layouts erfunden. Es stehen daher sehr mächtige und komfortable Möglichkeiten zur Verfügung.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …
Grundsätzliche Funktionsweise
Flexbox arbeitet mit einem Container-Element – dem. sog. Flex-Container – und den darin enthaltenen Kind-Elementen der 1. Ebene – den sog. Flex-Items. Die Flexbox wirkt genau eine Ebene tief. Weitere Verschachtelungen werden ignoriert.
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>Mit display:flex; auf dem Container-Element, wird die Flexbox aktiviert.
.flex-container {
display:flex;
}Haupt-Achse & Kreuz-Achse der Flexbox
Innerhalb des Flex-Containers existieren zwei Achsen. Die Hauptachse verläuft standardmäßig von links nach rechts, die Kreuz-Achse von oben nach unten.
Standard-Eigenschaften des Flex-Containers
Die Items können nun mit Hilfe der Container-Eigenschaften justify-content und align-items auf den beiden Achsen positioniert werden. Die Ausrichtung der Hauptachse kann mit flex-direction verändert werden.
justify-contentsteuert die Items auf der Haupt-Achsealign-itemssteuert die Items auf der Kreuz-Achseflex-directiondreht die Haupt-Achse
Wenn lediglich mit display:flex; die Flexbox eingeschaltet wurde, wirken die Standardwerte für justify-content, align-items und flex-direction.
- Der Standardwert für
flex-directionistrow– von links nach rechts - Der Standardwert für
justify-contentistflex-start: Die Items stehen am Anfang der Hauptachse, was normalerweise einer Positionierung links entspricht. - Der Standardwert für
align-itemsiststretch: Alle Items sind daher standardmäßig so hoch wie der Flex-Container.
.flex-container {
display: flex;
}
flex-direction – Die Achsen drehen
Wie bereits beschrieben, läuft die Hauptachse standardmäßig von links nach rechts und die Kreuzachse von oben nach unten. Mit der Container-Eigenschaft flex-direction können die Achsen gedreht werden.
.flex-container {
display: flex;
flex-direction: row; /* Standardwert */
}Es stehen folgende Werte zur Verfügung:
flex-direction: row(von links nach rechts = Standardwert)flex-direction: column(von oben nach unten)flex-direction: row-reverse(von rechts nach links)flex-direction: column-reverse(von unten nach oben)
justify-content – Items auf der Hauptachse positionieren
Standardmäßig befinden sich die Flex-Items am Anfang der Hauptachse.
.flex-container {
display: flex;
justify-content: flex-start; /* Standardwert */
}Um die Flex-Items auf der Hauptachse zu positionieren, existieren ebenfalls zahlreiche Werte:
justify-content: flex-start(Am Anfang der Hauptachse)justify-content: center(In der Mitte der Hauptachse)justify-content: flex-end(Am Ende der Hauptachse)justify-content: space-between(Das 1. Flex-Item ist am ganz Anfang der Achse, das letzte ganz am Ende. Alle anderen Items werden gleichmäßig verteilt. Es entstehen also Abstände zwischen den Items.)justify-content: space-around(Die Flex-Items werden wie bei space-between verteilt, allerdings entsteht auch vor dem 1. Item und nach dem letzten Item ein Abstand)justify-content: space-evenly(Die Flex-Items werden wie bei den beiden vorherigen Methoden verteilt, allerdings werden die Abstände einheitlich gewählt)
align-items – Items auf der Kreuzachse positionieren
Auf der Kreuzachse werden die Items normalerweise mit dem Wert stretch positioniert: Alle Items sind so hoch wie der Flex-Container.
.flex-container {
display: flex;
align-items: stretch; /* Standardwert */
}Auch für die Positionierung auf der Kreuzachse wurden in Flexbox einige Möglichkeiten bedacht. Folgende Werte stehen zur Verfügung:
align-items: flex-start(Am Anfang der Kreuzachse)align-items: center(In der Mitte der Kreuzachse)align-items: flex-end(Am Ende der Kreuzachse)align-items: baseline(Die Flex-Items werden so ausgerichtet, dass die Grundlinie der Schrift bündig ist. Nur sichtbar bei unterschiedlichen Schriftgrößen)align-items: stretch(Alle Flex-Items sind so hoch wie die Flexbox)
Beispiel – horizontal und vertikal zentrieren
Wenn ihr mit Hilfe des Flex-Containers Elemente zentrieren möchtet, richtet die Items mittig auf beiden Achsen aus.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
Standard-Eigenschaften der Flex-Items
Neben der Positionierung über den Flex-Container können auch die Items selbst beeinflusst werden. Dies kann einerseits mit den klassischen CSS-Angaben für Größe und Box-Modell erledigt werden. Darüber hinaus existieren in Flexbox die Eigenschaften flex-basis, flex-grow und flex-shrink zur Beeinflussung der Größe eines Items sowie order zur Veränderung der Reihenfolge von Items.
Wenn keine speziellen Angaben für ein Flex-Item gemacht werden, besitzen die Items folgende Standardwerte:
flex-grow: 0(Items dürfen nicht größer werden als festgelegt)flex-shrink: 1(Items dürfen kleiner werden als festgelegt)flex-basis: auto(Die Basis-Größe der Items wird automatisch festgelegt – also anhand der Angabenheight,widthbzw. auf Grundlage des enthaltenen Inhalts)order: 0(Die Reihenfolge entspricht der des HTML-Codes)
Hinweis: flex-grow, flex-shrink und flex-basis werden in der Kurzschreibweise flex zusammengefasst.
/* Kurzschreibweise */
.flex-item {
flex: 0 1 auto;
}
/* Lange Schreibweise */
.flex-item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto
}flex-grow, flex-shrink und flex-basis – Flexibilität für Items festlegen
Mit den verschiedenen flex-Werten kann das gewünschte Layout innerhalb des Containers hergestellt werden. Die folgenden Beispiele mit jeweils vier Items zeigen was möglich ist.
Beispiel 1
Mit flex-grow: 1; erlauben wir dem 2. Item sich auszudehnen.
flex-item-2 {
flex-grow: 1;
}
Beispiel 2
Wenn mehrere Items flex-grow: 1; erhalten, teilen sie sich den verfügbaren Platz in gleichen Teilen auf.
.flex-item-2,
.flex-item-3, {
flex-grow: 1;
}
Beispiel 3
Wenn Items unterschiedliche flex-grow-Werte erhalten, teilen Sie sich den verfügbaren Platz in ungleichen Teilen auf.
.flex-item-2 {
flex-grow: 1;
}
.flex-item-3 {
flex-grow: 3;
}
Beispiel 4
Item 2 hat nun eine Ausgangsbreite von 75% erhalten und darf weder kleiner noch größer werden. Alle anderen Items nutzen die Standardwerte – dürfen also schrumpfen. Da der verbliebene Platz für diese drei übrigen Items sehr gering ist, werden sie zusammengedrückt, was erkennbar daran ist, dass die Texte umbrechen. Dennoch passen nicht alle Items gemeinsam in den Container und laufen daher nach rechts heraus.
.flex-item-2 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 75%;
}
Um eine solche Fehldarstellung zu vermeiden, würde man im Normalfall dem Item 2 erlauben zu schrumpfen. Flexbox versucht dann grundsätzlich für das Item 2 eine Breite von 75% zu erreichen – weicht aber nach unten ab, wenn ansonsten die Items aus dem Container heraus laufen würden.
.flex-item-2 {
flex-shrink: 1;
flex-basis: 75%;
}
order – Die Reihenfolge von Items beeinflussen
Normalerweise werden die Items in der Reihenfolge angezeigt, in der sie im HTML-Code notiert wurden. Mit der Eigenschaft order kann diese Reihenfolge geändert werden, ohne dass der HTML-Code angepasst werden muss.
.flex-item-1 {
order: 4;
}
.flex-item-2 {
order: 1;
}
.flex-item-3 {
order: 2;
}
.flex-item-4 {
order: 3;
}
flex-wrap – Mehrspaltigkeit über das Container-Element ermöglichen
Normalerweise werden die Items innerhalb der Flexbox linear nebeneinander oder untereinander auf den Achsen positioniert. Wenn mehrere Items von der Abmessung her nicht in den Container passen, kann mit flex-grow und -shrink festgelegt werden was passieren soll. Mit der Container-Eigenschaft flex-wrap kann festgelegt werden, dass Items in mehrere Spalten und Zeilen umbrechen.
.flex-container {
display: flex;
flex-wrap: wrap; /* Standardwert = nowrap */
}
.flex-item {
flex-basis: 50%;
flex-grow: 1;
flex-shrink: 1;
}
Responsive Design mit Flexbox
Mit den nun kennengelernten Eigenschaften und einem Media Query lässt sich unkompliziert kleines Praxisbeispiel erstellen. Die folgende Website ist so aufgebaut, dass in der Smartphone-Ansicht (und im HTML-Quellcode) die beiden Sidebars nach dem Hauptinhalt angezeigt werden. In der Desktop-Ansicht wird mit Hilfe von Flexbox der Hauptinhalt zwischen den Sidebars dargestellt. Wir erreichen so gleichzeitig die perfekte Darstellung und den semantisch sinnvollsten HTML-Code.
/* Nur der für die mit Flexbox gebaute Desktop-Darstellung notwendige Code wird gezeigt. */
@media screen and (min-width: 800px) {
.content {
display: flex;
}
.main {
flex: 3;
order: 2;
}
.sidebar {
flex: 1;
order: 1;
}
.sidebar2 {
flex: 1;
order: 3;
}
}CSS Flexbox Beispiele
Wir haben im Laufe der Zeit einige Beispiele für Layouts oder Komponenten auf Grundlage von Flexbox erstellt. Zur Vertiefung der oben beschriebenen Grundlagen sind die folgenden Beispiele sicher hilfreich.
- Text mit CSS vertikal zentrieren
- Responsive Sticky Footer
- Prozess- / Fortschritts-Navigation mit CSS
Browser-Support
Der Browser-Support für Flexbox ist sehr gut. Eine Übersicht über den stets aktuellen Browser-Support findet ihr auf Can I Use.
Tools und Hilfsmittel
Auf Best Web Design Tools findet ihr hilfreiche Tools zum Thema Flexbox.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Unterstützung bei Responsive Design-Projekten
Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →
2b
Verfasst am 16. Juli 2013 um 9:29 Uhr.
Geil! Damit liese es sich extrem viel einfacher und intuitiver basteln! Bleibt zu hoffen, dass es bald weiträumig unterstützt wird…
Vielen Dank für den Artikel. Wie immer sehr informativ und verständlich.
Sebastian
Verfasst am 16. Juli 2013 um 16:06 Uhr.
Kann mich 2b nur anschließen.
Florence
Verfasst am 17. Juli 2013 um 9:03 Uhr.
… nur eine kleine Anmerkung zu der Browserunterstützung: Die Beispiele funktionieren nicht nur in Chrome, sondern auch im aktuellen Firefox (22) und im aktuellen Opera (15).
Jonas Hellwig
Verfasst am 17. Juli 2013 um 10:30 Uhr.
Vielen Dank für die Info! Ich hatte es selbst nur in Chrome getestet und wollte niemanden verwirren.
Dominik Horn
Verfasst am 19. Juli 2013 um 15:40 Uhr.
Wow, sehr cool. Ich kannte das noch gar nicht, da wird auf jeden Fall mit experimentiert.
Mir gefällt auch dein Schreibstil, du erklärst das super und anschaulich. Ich denke, selbst CSS-Neulinge kommen mit deiner Hilfe zurecht. Weiter so!
drewjosh
Verfasst am 23. Juli 2013 um 8:36 Uhr.
Das werde ich gleich mal ausprobieren! Dieses float-gebastle geht mir schon lange auf die Nerven! ;D Merci für die Beispiele und die Demo!
herrfischer
Verfasst am 24. Juli 2013 um 13:19 Uhr.
extrem cool, aber leider noch nicht benutzbar aufgrund der geringen unterstützung. naja ich bin ja schonmal froh über das was sich so in den letzten jahren getan hat, ich habe vor 15 jahren angefangen mit tabellen-layouts und ohne css *gg
das erste was ich damals mit css gemacht habe war den scrollbalken des IE5 einzufärben, war groß in mode damals :D
Magnus
Verfasst am 26. Juli 2013 um 15:02 Uhr.
Sehr schön, ich habe das ganze auch direkt ausprobiert. Meine Intention war es die flex-direction per css transitions zu animieren. Leider funktioniert das nicht. Aber auch ohne transitions beschreiben flex Objekte einen schönen Ansatz der hoffentlich schon bald von allen führenden Browsern unterstützt wird.
Lars Ebert
Verfasst am 1. August 2013 um 13:24 Uhr.
Es wird auf jeden Fall deutlich, wohin die Reise in den nächsten Jahren gehen wird: der Inhalt hat Vorrang, die Darstellung ist mehr oder weniger unwichtig, solange sie das aufnehmen der Inhalte unterstützt. Das Flex-Model macht da einen großen Schritt in die richtige Richtung. Weniger CSS für mehr Effekt.
Danke für die coole Übersicht!
kili
Verfasst am 8. September 2013 um 19:57 Uhr.
Hallo,
Eine Frage habe ich noch:
Wenn ich ein responsives design programmierer, das bei hoher Auflösung 3 Spalten, bei medium-auflösung 2 Spalten und auf dem smartphone 1 Spalte hat – wie löse ich das denn am sinnvollsten? Mit Div-Containern und statischer höhenangabe wird das etwas schwierig… und die flexbox-zeit ist wohl immer noch nich reif…
Viele Grüße!
JG-Consulting
Verfasst am 26. November 2013 um 9:11 Uhr.
Hallo, toller Beitrag. Sehr gut und nachvollziehbar geschrieben.
Ich habe zwei Fragen:
1.) Kann ich das Flexbox-Modell für meine Webseite jetzt schon einsetzen?
2.) Ich möchte zwei verschiedene Tabellen in meiner Webseit einsetzen, wie kann ich das am Besten machen (eine Tabelle für Kontaktformular und die zweite Tabelle im Fußbereich für Bookmarking).
Ich habe dabei an CSS und Classen gedacht, geht das?
Wäre nett, wenn Sie mir ein kleines Bespiel per Email zusenden könnten.
Mit freundlichen Grüßen
JG-Consulting Gastronomische Beratung
Alex
Verfasst am 30. Januar 2014 um 8:37 Uhr.
Hi,
danke für den Beitrag, aber mir rollen sich die Fußnägel auf. Es heißt:
Syntax, die
Wortart: Substantiv, feminin
LG
Rechtschreib-Hans
Torsten
Verfasst am 29. Dezember 2015 um 14:47 Uhr.
Da stimme ich zu.
James
Verfasst am 25. Februar 2014 um 13:20 Uhr.
Super Artikel, auch sehr verständlich geschrieben. Wenn man mittlerweile mit den aktuellen Browsern unterwegs ist, dürfte es keine Kompatibilitätsprobeleme mehr geben. Würdest du Jonas jetzt immer noch vom Einsatz in der Desktop-Ansicht abraten?
Was ich noch probieren werde, ob dieses Modell auch bei Texten (p) oder Bildern anwendbar ist.
Jonas Hellwig
Verfasst am 25. Februar 2014 um 22:04 Uhr.
Da der Internet Explorer 9 nicht kompatibel ist, würde ich Flexbox aktuell noch nicht für die Desktop-Version der Website einsetzen. Zumindest sollte die Darstellung nicht von der Flexbox-Technologie abhängig sein. Wenn du Flexbox nutzt um kompatiblen Browsern ein »nice to have« zu bieten finde ich das okay. Nur sollte eine sinnvolle Fallback-Lösung vorhanden sein.
James
Verfasst am 28. Februar 2014 um 9:32 Uhr.
Ja, eine Fallbacklösung sollte auf jeden Fall vorhanden sein. Da das Flexbox-Modell nicht so neu ist, frage ich mich, warum es sich bisher noch nicht durchgesetzt hat bzw. browserübergreifend noch nicht vollständig unterstützt wird, wenn es doch so viele Vorteile bringt …
Katharina
Verfasst am 9. Mai 2014 um 21:33 Uhr.
Hallo Jonas,
hast du dich bei „Beispiel 2 – Flexible Spalte einfügen“ nicht mit dem CSS vertan? Du schreibst, dass Box2 keine feste Breite hat, alle anderen schon.
Aber dein Code lautet :
#box2 {
background:yellow;
width:150px;
-webkit-flex:1;
flex:1;
}
Also hast du doch eine feste Breite vergeben.
Jonas Hellwig
Verfasst am 9. Mai 2014 um 22:26 Uhr.
Hallo Katharina,
ich habe feste Breite im Text und im Beispiel entfernt. Die Flex-Eigenschaft überschreibt die Breite eines Elements, daher hat das Beispiel trotz fixer Breitenangabe funktioniert. Aber so wie es jetzt ist, ist es sauberer und auch leichter verständlich. Vielen Dank für deinen Hinweis!
Alina
Verfasst am 7. Januar 2015 um 16:08 Uhr.
Ich habe versucht das Flexbox-Model in einem Onlineprojekt zu integrieren. Die Flexbox css sollte per php Script nur für die neueren Browser ausgegeben werden. Leider bin ich bei der responsive Darstellung an Grenzen gekommen. Bilder können im Flexbox-Model nur mit einer Breitenangabe von width: 100%; richtig angepasst werden. Die Eigenschaft max-width: 100%; reicht nicht aus und wird von vielen Browsern vollständig ignoriert. Die Gestaltung der Seite ist dadurch sehr eingeschränkt. Hast du die gleichen Erfahrungen gemacht? Kennst du ein aktives Onlineprojekt das schon mit dem Flexboxsystem arbeitet?
Jonas Hellwig
Verfasst am 7. Januar 2015 um 20:20 Uhr.
Hallo Alina,
von diesem Problem habe ich bisher nichts gehört. Ich habe es gerade mal mit einem Demo-Layout von flexboxgrid.com ausprobiert und Bilder mit maximaler Breite haben wie gewohnt funktioniert.
Kai
Verfasst am 1. Juni 2015 um 2:31 Uhr.
Hi
Wie immer bei Kulturbanause = einfach nur TOP!
Wer noch mehr davon will, ich bin mal auch hier gelandet, durch die üblichen Tweets etc.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
http://de.learnlayout.com/
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Andreas
Verfasst am 14. Juli 2015 um 9:13 Uhr.
Hallo Jonas,
ich arbeite sehr gerne mit dem Felxbox-Modell. Die Möglichkeiten sind der Hammer. Dein Artikel hat mich da in meinen Möglichkeiten auf jeden Fall ein gutes Stück voran gebracht.
Ich kann bei aktuellen Browsern bisher (eigentlich schon seit ich damit arbetie) auch keine Probleme feststellen.
Aus deiner Guru-Sicht: Ist Flexbox, Stand heute, reif für die Serienfertigung?
Deine Einschätzung dazu würde mich brennend interessieren :)
Viele Grüße, Andreas
Jonas Hellwig
Verfasst am 15. Juli 2015 um 8:22 Uhr.
Hallo Andreas, die Praxistauglichkeit hängt vom Einsatzzweck und der Zielgruppe ab. Das kann ich nicht pauschal beantworten. Aktuelle mobile Betriebssysteme unterstützen Flexbox so gut, dass ich es für die kleinen Layoutvarianten einsetzen würde. Ich baue allerdings keinesfalls meine gesamte Architektur mit Flexbox auf. Flexbox kommt dort zum Einsatz wo es anders nicht geht, also für Detailanpassungen im Inhalt. Das hat damit zu tun, dass der IE Flexbox nicht ausreichend genug unterstützt als dass ich das Konzept ruhigen Gewissens für die Desktop-Ansicht meiner Website einsetzen würde.
Torsten
Verfasst am 29. Dezember 2015 um 14:45 Uhr.
Klasse Artikel: sehr ausführlich geschrieben und gut erklärt. Ich habe bisher noch nichts mit Flexbox umgesetzt (ehrlich gesagt, arbeite ich mich jetzt erst in die Thematik ein), aber ich denke, es funktioniert inzwischen (Ende 2015) in allen aktuellen Browsern. Internet Explorer 11 und Microsoft Edge spielen mit, soweit ich es getestet habe, und IE 9 und älter dürften ja langsam aussterben, da XP wohl nicht mehr sehr verbreitet ist.
Gut, dass der Artikel aktuell gehalten worden ist, denn ich bin, bevor ich ihn fand, auf einige veraltete Angaben in anderen Blogs gestoßen und habe mich natürlich gewundert, warum die Beispiele, die ich nachbaute, nicht funktionieren wollten.
Mal was anderes: Die Schrift hier im Kommentar-Eingabefeld finde ich ein bisschen klein geraten. Für Menschen mittleren Alters, so wie mich, kann das anstrengend sein. Klar, ich hab jetzt die Browserschrift vergrößert, aber … ist auch lästig …
Torsten
Verfasst am 29. Dezember 2015 um 14:46 Uhr.
Also, nur während der Eingabe. Nach dem Absenden des Kommentars ist die Schrift ja „normal“ groß.
Elena
Verfasst am 13. Januar 2016 um 13:14 Uhr.
boah ist das geil!
Seid dem ich meine site responive machen will muss ich immer wieder traurig so einige Möglichekeiten aufgrund der schreiß Browserkompartibilität zur seite legen. Meine Zielgruppe ist einfach zu alt :-(
Flexbox, steht da ganz oben und dank dieser Einführung habe sogar ich es gut verstanden und durch die anschaulichen demos schon viele Ideen…
Danke dafür!
nice2knowit
Verfasst am 30. Januar 2016 um 11:35 Uhr.
Coole Sache, dieser Beitrag ist es Wert in die Favoriten aufgenommen zu werden. Danke für diesen Beitrag.
Andreas
Verfasst am 2. Februar 2016 um 9:41 Uhr.
Hallo Jonas,
dein Artikel bildet seit Veröffentlichung die Basis meiner Arbeit mit dem Flexboxmodell.
vor einiger Zeit hatte ich (vor allem mit den vorinstallierten Android-Browser) doch ein paar Probleme. Leicht zu lösen mit Ergänzung des passenden Präfix. Evtl. ergänzt du diese noch in deinem Artikel, damit gerade Einsteiger nicht unnötig mit Fehlersuche und Workaround-Lösung für den Android-Browser verschwenden (müssen).
display: flex;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
Ansonsten an dieser Stelle mal ein Danke für diene ehrenamtliche Arbeit für Webentwickler!
Loïc Etter
Verfasst am 3. August 2018 um 18:43 Uhr.
Hallo zusammen
erstmal danke für diesen Blog! Er hat mir schon sehr viel geholfen.
Ich habe eine Frage und zwar: Ich möchte das ein Element (also 1 fraction) 45% des Bildschirm ist. Wie kann ich das festlegen?
Liebe Grüsse
Loïc
Jonas Hellwig
Verfasst am 4. August 2018 um 9:18 Uhr.
Die Einheit fraction ist eigtl. eher im Zusammenhang mit CSS Grid gebräuchlich. 1fr nimmt immer den Platz ein, der übrig bleibt, wenn alle anderen Platzbedarfe abgezogen wurden. Es macht also keinen Sinn 1fr auf 45% einzustellen. Wenn du möchtest, dass etwas immer 45% der Viewport-Breite breit ist, schreib besser 45vw (Viewport Width).