Einführung in das Flexbox-Modell von CSS
Vor dem Hintergrund flexibler Website-Layouts werden die Rufe nach Alternativen zu Floats & Co. immer lauter. Eine dieser Alternativen ist das sog. Flexbox-Modell von CSS, das vor dem Hintergrund „Content Choreography“ und „Responsive Webdesign“ bald sehr interessant werden dürfte. In diesem Beitrag möchte ich euch Flexbox kurz vorstellen und die grundlegende Funktionsweise erklären.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …
Warum ist Flexbox so spannend?
Im Responsive Design ist es wichtig, dass die verschiedenen Elemente einer Website flexibel gestaltet werden. Das Flexbox-Modell bietet dazu umfangreiche Möglichkeiten, von denen wir bisher nur träumen konnten. Ihr habt die Möglichkeit Elemente sowohl in der Höhe, als auch in der Breite nach unterschiedlichsten Verhältnissen flexibel zu gestalten. Boxen lassen sich nebeneinander in Zeilen, oder untereinander in Spalten anordnen, in der Reihenfolge beliebig positionieren und aneinander ausrichten (z.B. rechts unten).
Achtung, veraltete Syntax!
Wenn ihr euch mit dem Thema Flexbox beschäftigt, werdet ihr schnell merken, dass unterschiedliche Schreibweisen existieren. Dazu müsst ihr wissen, dass sich die Syntax in der Vergangenheit mehrfach verändert hat. Erfreulich ist allerdings, dass die Funktionsweise beibehalten wurde. Wenn ihr auf veraltete Quellen stoßt, könnt ihr den Code daher mit verhältnismäßig geringem Aufwand aktualisieren.
Immer wenn ihr den Befehl display: box;, die Eigenschaften box- oder den Befehl display: flexbox; seht, handelt es sich um veralteten Code! Die aktuelle Syntax lautet display:flex; bzw. die Eigenschaften beginnen mit flex-. Einen sehr detaillierten Artikel zu diesem Thema findet ihr auch auf CSS Tricks.
Flexbox-Grundlagen
Beginnen wir mit den wichtigsten Funktionen. Das Flexbox-Modell arbeitet mit verschiedenen neuen CSS-Eigenschaften, die sowohl auf ein umschließendes „Container“-Element, als auch auf enthaltene „Box“-Elemente angewendet werden müssen.
Zunächst muss mit display:flex; erst einmal die gewünschte Anzeigeart bestimmt werden. Diese Eigenschaft wird dem Container zugewiesen und wirkt sich auf die enthaltenen Elemente aus. Als nächstes müsst ihr festlegen, ob die Boxen nebeneinander (als Zeile) oder untereinander (als Spalte) angeordnet werden sollen. Dafür verwendet ihr die CSS-Eigenschaft flex-direction: row; bzw. flex-direction: column;. Beachtet bitte, dass die horizontale Ausrichtung (row) die Standardeigenschaft ist. Wenn ihr also nur display:flex; schreibt, ist die Ausrichtung der enthaltenen Boxen automatisch horizontal.
Nun muss definiert werden, wie sich die enthaltenen Boxen zueinander verhalten sollen. Dafür existiert u. a. die Eigenschaft flex: /* Zahlwert */;. Diese Eigenschaft bestimmt sozusagen die Flexibilität des Elements. Beachtet bitte, dass sich die Eigenschaft relativ verhält. Ein Element mit der Eigenschaft flex: 3; ist demnach drei mal so flexibel wie ein Element mit der Eigenschaft flex: 1;.
Flexbox-Beispiele
Ich möchte nun einige Beispiele konstruieren um die wichtigsten Eigenschaften von Flexbox anschaulich erklären zu können. Es werden allerdings nicht alle Funktionen behandelt, da das Flexbox-Modell sehr umfangreich ist. Eine detaillierte Erklärung der nicht behandelten Funktionen entnehmt ihr bitte der Spezifikation.
Beachtet bitte, dass die Beispiele zum Veröffentlichungszeitpunkt dieses Beitrags nur in Chrome funktionieren. Um eine weitreichendere Kompatibilität zu gewährleisten, muss neben der akuellen Flexbox-Syntax auch der mittelalte und ganz alte Code geschrieben werden. Zusätzlich erfordern die verschiedenen Browser individuelle Präfixe. Um die Beispiele übersichtlich zu halten, verwende ich daher nur die aktuelle Schreibweise, sowie die Vendor-Präfixe von Chrome.
Der HTML-Code der folgenden Beispiele ist identisch aufgebaut und sieht wie folgt aus.
<div id="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4</div>
</div>
Beispiel 1 – Floats vermeiden
Alle Boxen haben eine feste Breite zugewiesen bekommen und werden dank display: flex; nebeneinander dargestellt. Floats werden nicht verwendet und die Höhe der Boxen entspricht immer der Höhe des #container, unabhängig vom Inhalt.
#container {
width:100%;
height:300px;
background:#ccc;
display:-webkit-flex;
display:flex;
}
#box1 {
background:red;
width:250px;
}
#box2 {
background:yellow;
width:250px;
}
#box3 {
background:green;
width:250px;
}
#box4 {
background:blue;
width:250px;
}
Beispiel 2 – Flexible Spalte einfügen
Die gelbe Box (#box2) verfügt über keine feste Breite, alle anderen Boxen schon. Mit flex: 1; dehnt sich die gelbe Box immer auf die volle zur Verfügung stehende Breite aus, da sie als einziges Element flexibel ist.
#container {
width:100%;
height:300px;
background:#ccc;
display:-webkit-flex;
display:flex;
}
#box1 {
background:red;
width:150px;
}
#box2 {
background:yellow;
-webkit-flex:1;
flex:1;
}
#box3 {
background:green;
width:150px;
}
#box4 {
background:blue;
width:150px;
}
Beispiel 3 – Zwei flexible Spalten
Die gelbe Box (#box2) und die grüne Box (#box3) verfügen über keine feste Breite, die beiden anderen Boxen schon. Mit flex: 1; streckt sich nun sowohl die gelbe als auch die grüne Box auf die volle zur Verfügung stehende Breite. Der Platz wird dabei unter beiden Boxen zu je 50% aufgeteilt, da sie gleich flexibel sind.
#container {
width:100%;
height:300px;
background:#ccc;
display:-webkit-flex;
display:flex
}
#box1 {
background:red;
width:150px;
}
#box2 {
background:yellow;
-webkit-flex: 1;
flex: 1;
}
#box3 {
background:green;
-webkit-flex: 1;
flex: 1;
}
#box4 {
background:blue;
width:150px;
}
Beispiel 4 – Zwei unterschiedlich flexible Spalten
Die gelbe Box (#box2) hat nun flex: 3; zugewiesen bekommen, die grüne Box (#box3)flex: 1;. Die beiden anderen Boxen haben nach wie vor eine feste Breite. Die gelbe und die grüne Box teilen den verfügbaren Platz nun untereinander mit einer Flexibilität von 3:1 auf.
#container {
width:100%;
height:300px;
background:#ccc;
display:-webkit-flex;
display:flex;
}
#box1 {
background:red;
width:150px;
}
#box2 {
background:yellow;
-webkit-flex: 3;
flex: 3;
}
#box3 {
background:green;
-webkit-flex: 1;
flex: 1;
}
#box4 {
background:blue;
width:150px;
}
Beispiel 5 – vertikale Ausrichtung als Spalte
In diesem Beispiel hat der #container mit flex-direction: column; die Anweisung erhalten, die enthaltenen Elemente vertikal von oben nach unten anzuordnen. Die gelbe und die grüne Box verhalten sich nach wie vor flexibel im Verhältnis von 3:1.
#container {
width:100%;
height:1000px;
background:#ccc;
display:-webkit-flex;
display:flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#box1 {
background:red;
height:150px;
}
#box2 {
background:yellow;
-webkit-flex: 3;
flex: 3;
}
#box3 {
background:green;
-webkit-flex: 1;
flex: 1;
}
#box4 {
background:blue;
height:150px;
}
Beispiel 6 – Reihenfolge verändern
Alle Boxen teilen den Raum untereinander zu gleichen Teilen auf (flex: 1). Die Darstellung erfolgt als Zeile (row = Standardwert).
Um die Reihenfolge der Boxen umzukehren haben alle Boxen die Eigenschaft order: und einen entsprechenden Zahlwert von 1-4 erhalten.
Der Vollständigkeit halber sei erwähnt, dass ein identisches Ergebnis auch erreicht werden kann indem die Richtung der Hauptachse (im #container) mit flex-direction: row-reverse; von rechts nach links angegeben wird.
#container {
width:100%;
height:300px;
background:#ccc;
display:-webkit-flex;
display:flex;
}
#box1 {
background:red;
-webkit-flex: 1;
flex: 1;
-webkit-order:4;
order:4;
}
#box2 {
background:yellow;
-webkit-flex: 1;
flex: 1;
-webkit-order:3;
order:3;
}
#box3 {
background:green;
-webkit-flex: 1;
flex: 1;
-webkit-order:2;
order:2;
}
#box4 {
background:blue;
-webkit-flex: 1;
flex: 1;
-webkit-order:1;
order:1;
}
Praxisbeispiel – Flexbox + Media Queries
Mit den nun kennengelernten Eigenschaften und einem Media Query lässt sich bereits ein 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.
<div id="container">
<header id="header"> … </header>
<nav id="nav-main"> … </nav>
<div id="content">
<article id="main"> … </article>
<aside id="sidebar"> … </aside>
<aside id="sidebar2"> … </aside>
</div>
<footer id="footer"> … </footer>
</div>
* {
padding:0;
margin:0;
}
body {
background: #333;
margin: 0;
}
#container {
background: white;
margin: 0 auto;
padding: 15px;
max-width:1200px;
}
#container * { padding: 15px; }
#header { background: #aa8147; }
#nav-main { background: #97a2aa; }
#content {padding:0;}
#main { background: white; }
#sidebar { background: #f0f3f5; }
#sidebar2 { background: #daedc1; }
#footer {
background: #353535;
color: white;
}
@media screen and (min-width:800px) {
body {margin:20px; }
#content {
display:-webkit-flex;
display:flex;
}
#main {
-webkit-flex:3;
flex:3;
-webkit-order:2;
order:2;
}
#sidebar {
-webkit-flex:1;
flex:1;
-webkit-order:1;
order:1;
}
#sidebar2 {
-webkit-flex:1;
flex:1;
-webkit-order:3;
order:3;
}
}
Praxisbeispiel – zweispaltige Layout mit Flexbox
Mehrspaltige Layouts werden üblicherweise mit Floats realisiert. Sofern ein Clearfix eingesetzt wird, funktionieren gefloatete Layouts in der Praxis sehr gut. Schwierig wird es allerdings, wenn ein mehrspaltiges Layout mit gleich hohen Spalten erzeugt werden soll. Mit Flexbox stellt das kein Problem dar.
<div class="container">
<div>…</div>
<div>…</div>
</div>
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background:lightblue;
padding:10px;
}
.container > div {
width: 50%;
padding: 10px;
background:white;
}
.container > div:first-child {
margin-right: 10px;
}
Kann Flexbox heute schon eingesetzt werden?
Im Moment rate ich noch davon ab, Flexbox für die Desktop-Ansicht einzusetzen, bzw. die Darstellung von Flexbox abhängig zu machen. Wie erwartet interpretiert der Internet Explorer die Eigenschaft nicht ausreichend. Selbst die modernen Browser Firefox und Safari haben noch einige Schwierigkeiten mit dem Modell.
Für die mobilen Browser könnte Flexbox bereits heute interessant sein. Hier dominieren der mobile Safari und Android den Markt. Diese beiden Browser verstehen die Eigenschaft, zumindest wenn auch die alten Schreibweisen verwendet werden. Allerdings muss auch bei Smartphones damit gerechnet werden, dass Benutzer den Opera-Browser verwenden, was dann auch hier zu Kompatibilitätsproblemen führen kann. Die HTML-Struktur der Website sollte daher unbedingt eine geeignete Fallback-Lösung darstellen und vom Aufbau her der Smartphone-Version ohne Flexbox-Kompatibilität entsprechen.
Eine Übersicht über den Browser-Support findet ihr auf Can I Use.
Tools und Hilfsmittel
Auf Best Web Design Tools findet ihr hilfreiche Tools zum Thema Flexbox.
Links / Quellen
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
28 Kommentare
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.
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!