kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Visualisierung der Flexbox mit Haupt- und Kreuzachse

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-content steuert die Items auf der Haupt-Achse
  • align-items steuert die Items auf der Kreuz-Achse
  • flex-direction dreht die Haupt-Achse

Wenn lediglich mit display:flex; die Flexbox eingeschaltet wurde, wirken die Standardwerte für justify-contentalign-items und flex-direction.

  • Der Standardwert für flex-direction ist row – von links nach rechts
  • Der Standardwert für justify-content ist flex-start: Die Items stehen  am Anfang der Hauptachse, was normalerweise einer Positionierung links entspricht.
  • Der Standardwert für align-items ist stretch: Alle Items sind daher standardmäßig so hoch wie der Flex-Container.
.flex-container {
  display: flex;
}
Positionierung der Items, wenn die Standardwerte der Flexbox genutzt werden.

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)
Die verschiedenen Werte für flex-direction im direkten Vergleich

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)
Die verschiedenen Werte für justify-content im direkten Vergleich – hier am Beispiel der flex-direction: row

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)
Die verschiedenen Werte für align-items im direkten Vergleich – hier am Beispiel der flex-direction: row

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;
}
Die Items sind auf beiden Achsen zentriert und befindet sich daher mittig im Flex-Container

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 Angaben height, width bzw. 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;
}
Mit flex-grow: 1; erlauben wir dem 2. Item sich auszudehnen

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; 
}
Item 2 und 3 dehnen sich gleich weit aus.

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; 
}
Unterschiedliche flex-grow-Werte für Item 2 und 3 sorgen für eine unterschiedliche Raumaufteilung

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%;
}
Da Item 2 einen großen Basis-Wert hat und nicht schrumpfen darf, laufen die Items aus dem Container heraus

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%;
}
Item 2 ist dank flex-shrink von seiner Basisbreite von 75% abgewichen um die Fehldarstellung zu vermeiden

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;
}
Die Reihenfolge der Items wurde mit der Flexbox-order-Eigenschaft verändert

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;
}
Die Items werden dank flex-wrap: wrap; mehrspaltig angezeigt

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.

Flexbox im Responsive Design

/* 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;
  }
	
}

Beispiel anzeigen

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.

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 →

Das könnte dich auch interessieren

31 Kommentare

  1. 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.

  2. Sebastian

    Verfasst am 16. Juli 2013 um 16:06 Uhr.

    Kann mich 2b nur anschließen.

  3. 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.

  4. 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!

  5. 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!

  6. 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

  7. 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.

  8. 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!

  9. 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!

  10. 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

  11. 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:

    Syn­tax, die
    Wortart: Substantiv, feminin

    LG
    Rechtschreib-Hans

    • Torsten

      Verfasst am 29. Dezember 2015 um 14:47 Uhr.

      Da stimme ich zu.

  12. 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.

  13. 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 …

  14. 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!

  15. 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.

  16. 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.

  17. 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ß.

  18. 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!

  19. 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.

  20. 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!

  21. 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).

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.