Nur damit jeder das klar versteht: „Flexbox“ (genauer gesagt: CSS Flexible Box Layout Module) hat in den letzten drei Jahren viele Änderungen erfahren. Änderungen sowohl an der Spezifikation als auch an dem, was Browser implementiert haben.
Wie man es erkennt
Wenn Sie nach Flexbox googeln, werden Sie viele veraltete Informationen finden. Hier können Sie schnell erkennen
Wenn Sie sich einen Blogbeitrag (oder was auch immer) über Flexbox ansehen und `display: box;` oder eine Eigenschaft sehen, die `box-{*}` ist, sehen Sie sich die alte Version von Flexbox aus dem Jahr 2009 an.
Wenn Sie sich einen Blogbeitrag (oder was auch immer) über Flexbox ansehen und `display: flexbox;` oder die `flex()`-Funktion sehen, betrachten Sie eine unbeholfene Übergangsphase aus dem Jahr 2011.
Wenn Sie sich einen Blogbeitrag (oder was auch immer) über Flexbox ansehen und `display: flex;` und `flex-{*}`-Eigenschaften sehen, betrachten Sie die aktuelle (zum Zeitpunkt des Schreibens) Spezifikation.
Beispiele für veraltete Dinge
All das war zu seiner Zeit *fantastisch*, aber jetzt ist es veraltet
Flexie – ein JavaScript Polyfill für Flexbox, **verwendet alte Syntax aus dem Jahr 2009**.
Dieser Artikel von Richard Shepard auf Smashing Magazine aus der unbeholfenen Phase von 2011. Er erwähnt beiläufig die Syntax von 2011, konzentriert sich aber mehr auf die Syntax von 2009.
Stephen Hay schreibt schon seit geraumer Zeit über Flexbox. Sein Einführungsbeitrag verwendet die alte Syntax von 2009, dann hat er einen Nachfolgebeitrag zur Syntax von 2011 geschrieben, leider nur einen Monat, bevor die aktuelle Syntax veröffentlicht wurde.
Ich war zuerst begeistert von Flexbox durch diesen Artikel von Paul Irish, der die Syntax von 2009 verwendet. Er enthält eine Warnung am Anfang, verlinkt aber zu Stephens Artikel, der die Syntax von 2011 verwendet.
Unterstützung
Die Dinge werden in Bezug auf die Browserunterstützung etwas komplizierter.
Die alte Syntax von 2009 hat eine überraschend gute Browserunterstützung: Chrome, Firefox 2+, Safari 3.1+... Praktisch alles außer IE 9- und Opera. Ich sage „Unterstützung“, weil die tatsächlichen Implementierungen teilweise waren und leicht abwichen (daher die Überarbeitung).
Trotz mehr Unterstützung ist es nicht ratsam, die ältere Syntax zu verwenden. Die alte Spezifikation ist mit dem Wind dahingeweht. Browser könnten die Unterstützung für die alte Syntax in Zukunft einstellen. Zumindest ist es sehr wahrscheinlich, dass die neue Syntax leichter zu verstehen ist und tiefer und konsistenter implementiert wird. Browser, die Flexbox noch nicht unterstützen, werden die neue Spezifikation implementieren, die sich im Status „CR“ (Candidate Recommendation) befindet.
Die Unterstützung für die **neue Syntax** ist: Chrome 21+, Safari 6.1+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ und Blackberry 10+.
Das noch unveröffentlichte IE 10 wird wahrscheinlich mit der unbeholfenen Übergangs-Flexbox (display: flexbox;) ausgeliefert.
Demo
Ich habe kürzlich jemandem bei der Erstellung eines Fluid-Fixed-Fluid-Spaltenlayouts geholfen. Beide Syntaxen sind dazu leicht in der Lage (es ist sonst ziemlich schwierig). Sie werden gute Referenzen für den Test der Browserunterstützung (und Browser-Deprecation) sein.
Das Beispiel für die „NEUE Syntax“ ist nicht in Spalten, es ist gestapelt. Ist das so gewollt?
Sie sehen es wahrscheinlich in einem nicht unterstützten Browser.
Ähm... das Gleiche passiert mir auch, obwohl ich die neueste Firefox-Version 14.0.1 verwende.
Irgendeine Idee? Könnte das an der Bildschirmauflösung liegen? Meine beträgt gerade 1366x768.
Jedenfalls ein schöner Artikel. Wusste vorher nichts davon.
Firefox unterstützt es nicht.
@Anders Grimsrud: WAAAAAAAAAAARGGGGGGGGGHHHHH!!!!
In Safari 6.0 (8536.25) die NEUE Syntax angesehen: Boxen sind übereinander gestapelt?
Safari 6 unterstützt es nicht.
Das ist fast gut. Vielleicht hat jemand schon einen Polyfill erstellt. lol.
Eine kleine CSS-Implementierung und wir haben ein gutes responsives Beispiel.
Ein Teil dieses Codes scheint etwas redundant zu sein, Rudy. Theoretisch könnte man die min-width von .col und .fluid entfernen und nur die Media Query auf max-width von 600px setzen (um die minimalen 100px links und rechts + 400px in der Mitte zu berücksichtigen) und damit fertig sein?
Außerdem vergessen Sie nicht, dass es am besten ist, Dinge Mobile-First zu entwickeln. Anstatt @media mit (max-width: … ;) zu verwenden, sollten Sie zuerst das Kleinste erstellen + `
@media screen and (min-width: ... ;)`Es scheint, dass das Web sich zu schnell bewegt. Sie sagten, Chrome 21 sei in Beta, aber obwohl dieser Artikel heute veröffentlicht wurde, ist Chrome 21 jetzt stabil. Vom Zeitpunkt des Schreibens dieses Artikels bis zu seiner Veröffentlichung wurde Chrome aktualisiert. Ich bin auf dem stabilen Kanal und die „neue Demo“ hat bei mir funktioniert.
Das ist besser, David!
Entschuldigung, ich weiß nicht, wie ich hier antworten soll? Kleine Hilfe?
Also ist Chrome 21 der einzige unterstützte Browser für die NEUE Version?
Safari 6: keine Unterstützung
Chrome 20: keine Unterstützung
Firefox 14: keine Unterstützung
Opera 11: keine Unterstützung
Ja, Chrome 21+
Wie in der Support-Tabelle angegeben, unterstützen Browser, die mit „partielle Unterstützung“ gekennzeichnet sind, entweder die alte Spezifikation oder die alte Syntax.
Es wird auch in IE10 unterstützt: http://msdn.microsoft.com/en-us/library/ie/hh673531%28v=vs.85%29.aspx
Irgendwie. Es unterstützt die komische Syntax von 2011, mit Präfix. Ich hoffe, sie aktualisieren es vor der Veröffentlichung. WAS IST DAS, WANN KOMMT DAS VERDAMMT NOCHMAL ES IST JETZT 18 MONATE HER.
Mist, ja, hätte ich vor dem Posten prüfen sollen. Keine Ahnung, ob IE10 ein endgültiges Update vor der Veröffentlichung erhalten hat; die Dokumentation wurde nicht aktualisiert. Die Veröffentlichung ist, glaube ich, im Oktober.
iOS 5 unterstützt auch nicht die neue Flexbox, aber es unterstützt die alte Syntax.
Nachdem ich mich eine Weile mit beiden Syntaxen beschäftigt habe, muss ich sagen, dass die neue Syntax meiner Meinung nach weitaus überlegen ist, da sie konzeptionell leichter zu verstehen war.
Ich hoffe wirklich, dass die A-Browser die neue Syntax bald implementieren.
Beachten Sie, dass Modernizr auf flex-wrap prüft, was offensichtlich die Unterstützung für die neue Flexbox-Spezifikation zurückgibt. (Auch wenn die Dokumente sich auf einen alten Artikel bei HTML5 Rocks beziehen, der die box-*-Werte behandelt)
Somit können wir die neue Flexbox standardmäßig verwenden (drängen Sie auf die Standards!) und auf die alte Flexbox zurückfallen, wenn sie nicht unterstützt wird.
(Ich habe die Vendor-Präfixe entfernt!)
selector { display: flex } .no-flexbox selector { display: box }Browser könnten die Unterstützung für die alte Syntax in Zukunft einstellen. Aber für jetzt und viele Leute, die alte Browser verwenden, ist das das Problem, das man berücksichtigen muss.
Endlich sieht Flexbox nützlich aus. Die alte Version hatte zu viele Mängel. #glücklich
Sie könnten display „box“ für denselben Effekt mit Chrome und Firefox verwenden. Sehen Sie unten für ein 2-Spalten-Layout von Fixed Fluid.
Ähm.
Dieser gesamte Artikel befasst sich damit, Code wie den obigen als „alte“ Syntax zu identifizieren. Ich empfehle dies nicht (trotz der Tatsache, dass es im Moment funktioniert).
Das ist der einzige Code, der für mich funktioniert. Ich habe versucht, Flexbox basierend auf dem Code, den Sie in Codepen eingefügt haben, zu implementieren, und nichts davon funktioniert. Ich bin sogar so weit gegangen, alles auf den Code mit einer Indexdatei und einer CSS-Datei und nichts anderem zu reduzieren.
Aus irgendeinem Grund funktioniert der von Ihnen in Codepen geschriebene Code in der realen Welt nicht. Er funktioniert in Codepen, aber wenn ich ihn in eine tatsächliche HTML-Datei kopiere, stapeln sich die Boxen für alle Browser, sowohl mit der alten als auch mit der neuen Methode.
Der obige Code scheint jedoch zu funktionieren.
Danke für den Artikel. Ich habe Flexbox noch nie benutzt und werde es wahrscheinlich auch nicht tun, bis wir eine brauchbare plattformübergreifende Unterstützung haben. Hoffentlich schreiben Sie nächstes Jahr keinen weiteren Blog wie diesen mit neuer Syntax.
Danke Chris
Chrome 21 ist offensichtlich nicht Beta, da meine aktuelle Version bereits eine aktualisierte Version von 21 ist. Die Demo scheint gut zu funktionieren. Flexbox ist jedoch nur ein Teaser. Wieder einmal erhalten Entwickler großartige Werkzeuge, um sich das Leben zu erleichtern, nur um sie durch inkonsistente und nicht unterstützte Browser wieder entzogen zu bekommen. Es wird noch lange dauern, bis dies sicher implementiert werden kann. So traurig.
http://cl.ly/IcLY
Ich denke, sowohl stabil als auch Beta sind derzeit 21. Ich denke, sie haben 21 stabil früher als später veröffentlicht, um Retina-Sachen zu unterstützen.
Android hat die neueste Flexbox-Syntax noch nicht aktualisiert http://dev.w3.org/csswg/css3-flexbox/, also verwenden diejenigen, die auch mobile Geräte unterstützen wollen, alte und neue Syntax, um alle Geräte zu unterstützen.
Weiß jemand, wie lange wir noch auf die Einführung der Unterstützung für dieses Projekt warten müssen?
Ich meine, offensichtlich bin ich noch nicht allzu hoffnungsvoll, aber es wäre schön zu wissen, ob Moz und IE usw. eine Meinung dazu hatten!
Jetzt müssen wir nur noch einen Polyfill finden, der die alte Syntax in die neue umwandelt.
Nachdem ich das flexible Boxmodell in einer Reihe von aktuellen Projekten über das Compass „display-box“-Mixin progressiv eingesetzt habe, hoffe ich, dass Compass, sobald diese neue Methode breiter unterstützt wird, meine Legacy-Codes mit den entsprechenden Änderungen aktualisieren und ersetzen wird.
(Daumen drückend)
CORE-27374 ist der kleine Name des Hauptfehlers in Opera-Land für die Unterstützung von Flexbox. Opera arbeitet also daran. Das Problem ist, wie Sie es erwähnt haben, die mehreren Versionen der Spezifikation. Ich erwarte Kompatibilitätsprobleme sowohl für Browser-Implementierer als auch für Webentwickler mit all dem Legacy-Code, der da draußen ist.
Ich glaube, Firefox ist sehr nützlich für die CSS-Online-Bearbeitung.
Ich habe auch eine umfangreiche Demo der neuen Syntax erstellt.
http://codepen.io/edge0703/pen/qstIo
Danke für den Beitrag, Chris. Das hat mir sehr geholfen, nichts Altes zu lernen ;)
Vielen Dank dafür. Ich hatte nicht einmal gehört, dass es eine neue „Version“ von Flexible Box gibt.
Dieses gesamte Flexible Box Layout Module war bisher die frustrierendste Sache in meiner Karriere. Ich erinnere mich, 2009 gelesen zu haben, vor zwei Jobs, und dachte: „Das wird meine visuelle/Layout-Entwicklung so viel einfacher machen, ich kann es kaum erwarten, bis Browser das implementieren.“
3 Jahre später, 3 gottverdammte Jahre später, bin ich immer noch im gleichen Zustand: „Das wird meine visuelle/Layout-Entwicklung so viel einfacher machen, ich kann es kaum erwarten, bis Browser das implementieren.“
Das ist SO traurig. Ich hoffe wirklich, dass IE10 die aktuelle Spezifikation implementiert, aber ich halte die Luft nicht an. Wahrscheinlich muss ich also bis IE11 warten, bevor Flex zuverlässig nutzbar ist, und ich bin sicher, es wird ewig dauern, bis es auf mobilen Geräten (die am meisten davon profitieren würden) verfügbar ist, und 3 Jahre von jetzt an werde ich immer noch denken: „Das wird meine visuelle/Layout-Entwicklung so viel einfacher machen, ich kann es kaum erwarten, bis Browser das implementieren.“
Es ist wirklich frustrierender, so lange so nah dran zu sein, als niemals von Box/Flexbox/Flex überhaupt gewusst zu haben.
Nur zur Info, neuere WebKit-Nightlies unterstützen die neue Syntax.
Was ich am frustrierendsten finde, ist, dass ich von Mozilla keine Auskunft darüber bekomme, wann Firefox die überarbeitete Syntax implementieren wird. Firefox hat derzeit die älteste und kaputteste Implementierung aller Browser.
display:flex
Dies wird für IE 8 und IE 9 nicht unterstützt. Bitte geben Sie eine Lösung.
Zusammen mit Rudys und Davids Beiträgen oben haben Sie uns viel Zeit gespart! Gut, dass ich sie alle zuerst gelesen habe, lol!