Vor vier Jahren habe ich "Machen Sie sich keine Gedanken über Grids" veröffentlicht und es hat bei ziemlich vielen Leuten Anklang gefunden. Schon damals dachte ich, wir könnten am Höhepunkt der Grid-Entwicklung sein. Jede Woche wurde ein neues Grid-Framework beworben.
Dieser Artikel war meine Art zu sagen: "Fürchte dich nicht! Du kannst ein Grid selbst erstellen! Du brauchst kein kompliziertes Framework." Es war vielleicht nicht ganz so schick, aber so habe ich es gemacht. Man floatet ein paar Elemente mit einigen prozentualen Breiten und fertig.
Heutzutage, wenn Sie bereit sind, Flexbox für Layouts zu verwenden, sind DIY-Grids noch einfacher.
So mache ich es normalerweise
<div class="flex-grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>.flex-grid {
display: flex;
}
.col {
flex: 1;
}Das unterstützt beliebig viele Spalten, und sie sind automatisch gleich breit und flexibel!
Möchten Sie, dass sie sich für kleine Bildschirme in eine Spalte aufteilen? Einfach.
@media (max-width: 400px) {
.flex-grid {
display: block;
}
}Brauchen Sie Abstände? Sie könnten den Spalten Margen hinzufügen. Sie könnten den Spalten Padding hinzufügen. Mir gefällt die Idee, die Ausrichtung zu nutzen, um Spalten zu erstellen, wie z.B.
.flex-grid-thirds {
display: flex;
justify-content: space-between;
}
.flex-grid-thirds .col {
width: 32%;
}Wenn Sie den Flexbox-Weg wählen, haben Sie auch die Möglichkeit, die Reihenfolge der Spalten nach Bedarf zu ändern, was großartig sein kann, um wichtigere Inhalte höher im Quellcode zu halten, sowie für responsives Design-Umordnen.
Siehe den Pen Easy Flexbox Grid von Chris Coyier (@chriscoyier) auf CodePen.
Mein Punkt, noch einmal: Sie müssen kein Grid-Framework verwenden, um ein Grid zu erstellen. Sie können es schaffen! Das bedeutet auch nicht, dass Flexbox trivial einfach ist und Sie nie Probleme haben werden. Es gibt viele Randfälle und seltsame Browser-Unterstützungsangelegenheiten, auf die Sie stoßen könnten, wenn Sie nischigere Flexbox-Features verwenden. Die hier betrachteten Dinge sind jedoch ziemlich vanilla und ich wäre überrascht, wenn Sie Probleme hätten.
Mehr
Philip Walton hat mehr über die Herrlichkeit von Flexbox-Grid-Systemen geschrieben.
Um fair zu sein, Grid-Frameworks sind in der Regel ziemlich robust, und viele Teams finden Erfolg darin, vordefinierte Klassen und Rezepte für den Aufbau jeder Art von Grid zu haben, die sie benötigen. Wenn Sie daran interessiert sind, auf ein Grid-Framework zurückzugreifen, das Flexbox-spezifisch ist, hier sind ein paar, von denen ich weiß: Frow, Flexbox Grid und Gridlex.
Hahahaha, so lustig: Man floatet ein paar Elemente mit prozentualen Breiten und fertig.
Danke für den Artikel, wieder ein paar sehr nützliche neue Dinge!
Ich habe gehört, dass die Verwendung von Flexbox für das gesamte Layout nicht so empfohlen wird, weil der Browser mehr Aufwand für das Rendern betreibt. Stimmt das noch? Wenn es jemals stimmte.
Vom Google Developer Blog: https://developers.google.com/web/updates/2013/10/Flexbox-layout-isn-t-slow?hl=en
Kurz gesagt, die alte Syntax war langsam, die neuere Syntax ist es nicht.
Würden Sie das immer noch empfehlen, wenn Sie größere Projekte bauen?
Oder genauer gesagt: Wann würden Sie die Grenze ziehen zwischen der Verwendung von etwas wie Bootstrap, Frow usw. oder Ihrem Flex-Ansatz?
Vielen Dank im Voraus!
Das Schöne an Flexbox ist, dass es skaliert. Sie müssen nie wirklich ein Framework verwenden.
Ich bin vielleicht etwas voreingenommen. Ich benutze keine Frameworks, unabhängig von der Größe des Projekts.
Wissen Sie. Grids sind nur ein kleiner Teil von CSS-Frameworks.
Ich würde sagen, dass der Flex-Ansatz für ein größeres Projekt sicherlich der bessere Ansatz ist. Bootstrap ist großartig für schnelles Prototyping oder für die Erstellung einer einfachen Broschüren-Website. Aber wenn Sie ein größeres Projekt wie eine Webanwendung bauen, würde ich behaupten, dass Bootstrap mehr Bloat hat, als Sie brauchen, und Sie nur 10% von dem verwenden, was es in Ihre Website injiziert. Halten Sie Ihr CSS klein, indem Sie nur das CSS schreiben, das Sie benötigen, und Chris' Methode oben ist eine großartige Möglichkeit, dies zu tun.
Toll zu sehen, dass Sie das mit Flexbox machen. Ich habe eine kleine Sass-Bibliothek für Flexbox-Grids zusammengestellt. Inspiriert von Neat. http://codepen.io/jmacaluso711/pen/VvpZwG
Vielleicht etwas übertrieben?
Ich würde gerne Flexbox nutzen, aber unser Hauptkunde verwendet IE11. Leider scheint die Unterstützung nur teilweise zu sein. Irgendwelche Vorschläge?
Es sei denn, Sie verwenden min-height auf dem spezifischen Bereich, sollte es keinen spürbaren Unterschied geben, wenn Sie den Code aus diesem Artikel verwenden.
http://caniuse.com/#search=flexbox
http://brolik.com/blog/when-to-use-flexbox/
Um Andrews Kommentare zu ergänzen, schauen Sie sich Flexbugs an, die hilfreiche Workarounds für viele Inkonsistenzen und Probleme bieten: https://github.com/philipwalton/flexbugs
Danke dafür, Chris. Ich stimme zu, vielleicht braucht die Industrie nicht so viele große Bibliotheken dafür.
Mein einziges Problem mit
justify-content: space-betweenfür diese Art von Abstraktion ist, dass es eine tatsächlichewidthbenötigt, um zu funktionieren, anstatt etwas wieflex: 1zu tun, es sei denn, ich vermisse etwas. Außerdem führen die prozentualen Breiten, um Platz für die Abstände zu schaffen, zu unvorhersehbaren Abstandsbreiten. Deshalb bevorzuge ich die Ränder zwischen den Spalten und dann den *negativen Rand-Trick* auf dem Container, um die Ränder herauszuholen. Ich kann immer nochwidthverwenden, wenn ich es brauche, aber das ermöglicht auch die Verwendung von Dingen wieflex: 1. Zufälligerweise habe ich gerade gestern mein eigenes "Grid auf Flexbox" für einen Kunden entwickelt. Es ist noch nicht erprobt, zeigt aber das Konzept, über das ich spreche: http://codepen.io/bradwestfall/pen/yJVvBPScheint auf dasselbe Abstandsausrichtungsproblem zu stoßen wie die DOFGs.
http://codepen.io/anon/pen/wWomNO
Nun, Flex wird immer dieses Problem haben, da
flex:1relativ und proportional zu seinen Geschwistern ist. Aber das war nicht der Punkt, den ich gemacht habe.Für Ihren Punkt können Sie weiterhin Breiten für meine Lösung verwenden, und es würde gut funktionieren.
In Bezug auf die unvorhersehbaren Abstände, die durch die Verwendung von % verursacht werden, sollten Sie diese mit "calc" etwas besser kontrollieren können.
Etwas wie das
So bleibt der Abstand bei 15px.
Das Problem scheint eher ein Box-Sizing-Problem zu sein. Der Padding-Wert wird nicht zu dem Wert addiert, den Flexbox für die Spalte bestimmt, selbst mit box-sizing border-box.
Als Beispiel habe ich 1,1,2 und 1,1,1,1,4 verwendet. In diesem Fall passen die Dinge nicht zusammen, obwohl die Geschwisterproportionen stimmen. Es sei denn, Sie haben null Padding + Margin.
Das ist in Ordnung, aber es bedeutet, dass Abstände zu den Kindern der Flex-Elemente hinzugefügt werden müssen, entweder in Form eines inneren Spalten-Wrappers (wohoo, extra divs) oder nur aller direkten Kinder, vielleicht etwas wie .col > * {}
Ich liebe Flexbox! Das Einzige, was mich davon abgehalten hat, zu 100% umzusteigen, war die Browserkompatibilität, teilweise aufgrund der drei Flexbox-Standards, die es gab. Ich versuche es jetzt wieder intensiv. Gedanken? CanIUse gab grüne Flaggen für aktuelle Browser außer Edge.
Sie müssen sich dank autoprefixer nicht wirklich um die alten Syntaxen kümmern.
Bezüglich der Umwandlung des Flex-Grids in display:block für kleine Bildschirme, würden Sie auch display:initial verwenden, um Flexbox zu deaktivieren, oder sonst die Änderungen an flex-wrap oder flex-direction nutzen?
display:initial würde display auf inline für spans und andere inline-Elemente ändern. Könnte das Layout kaputt machen.
Ich mag Flexbox zwar sehr in verschiedenen Layouts, habe aber dieses Problem, wenn es als Tabelle verwendet wird.
Besonders in dem Fall, wenn wir möchten, dass die Breite einer der Spalten durch die Breite ihres breitesten Elements bestimmt wird.
Hier sind meine Gedanken dazu als 4 Möglichkeiten, dieses Problem anzugehen.
http://codepen.io/didkobravo/pen/rLWpvY
Im Allgemeinen gelten Grid-Systeme (alte Schule oder Flex) nicht als Ersatz für die Darstellung von Daten im Tabellenformat.
Das Problem, auf das ich hier stoße, ist die Ausrichtung der Abstände.
Zwei Zeilen: 1,1,2 und 1,1,1,1,4; passen nur zusammen, wenn kein Rand oder Padding vorhanden ist. Um die Abstände auszurichten, scheint man mit der flex-basis-Eigenschaft spielen zu müssen oder Flex-Elemente ausschließlich als Wrapper zu verwenden.
Das scheint der Fall zu sein, ich hoffe wirklich, dass ich etwas Offensichtliches übersehe.
Ja, Sie müssen mit flex-basis spielen, um die Elemente auszurichten. Schauen Sie sich diesen Artikel an
https://davidwalsh.name/flexbox-layouts
Flexbox ist so großartig! Es spart Zeit, es ist skalierbar, es ist für faule Entwickler, es ist einfach, Grids nach Layout zu erstellen und in Kombination mit autoprefixer ist es solide für die Produktion. Wir nutzen es seit 2 Jahren in allen Projekten. Ich liebe es :)
Hier ist ein bisschen Spaß mit Sass für einen einigermaßen semantischen Ansatz. HTML hat Klassen wie 1/2, 1/3 und so weiter. Bin mir nicht sicher bezüglich der Kosten der Selektoren oder der Browserkompatibilität, auf jeden Fall ein bisschen Spaß :) Nutzt hier nur Prozente, aber es kann definitiv angepasst werden! Dies setzt einen Reset voraus sowie gute Box-Sizing-Einstellungen.
Ich ging davon aus, dass Klassen nicht mit Zahlen beginnen können...
Klassen in HTML sind Zeichenketten und können beliebige Werte haben. In CSS ist es ein Fehler, einen Klassennamen mit einer Zahl zu beginnen (wird wahrscheinlich als Zahlenliteral behandelt). Wenn Sie sie jedoch als Zeichenkettenwerte für einen Klassenattributselektor übergeben, können Sie HTML dazu bringen, Ihre zahlenpräfixierten Werte zu nutzen. Ob es gute Praxis ist oder nicht, bin ich mir nicht sicher, aber wenn ich 1/4 auf einem Container sehe, weiß ich ungefähr, was los ist :)
Hier ist ein weiteres Flexbox-basiertes Grid. (Disclaimer: Ich bin der Autor :D). Könnte es sich vielleicht lohnen, es sich anzusehen.
https://splintercode.github.io/core-flex-grid/
Ich bete für den Tag, an dem ich Leute auf IE8 und Handys mit 4 Jahre alten Browsern/Betriebssystemen nicht mehr unterstützen muss. . . "Nun, es sieht schrecklich aus auf Johns iPhone 2!" :-(
Sie werden immer noch viele Probleme mit IE9 und IE10 haben.
Um Himmels willen, wenn Sie den Wert
flex: 1definieren, vergessen Sie nicht, ihn für IEflex: 1 0 autoauszuschreiben. Sie werden sich fragen, warum er einen Anfall hat und nichts richtig aussieht.Grid-Nützlichkeit war schon vor der Flexbox-Ära eher oberflächlich; es ist im Wesentlichen nur eine stilisierte
width/cols-Berechnung, die kaum eine eigenständige Bibliothek rechtfertigt.Für Leute, die diese Kommentare lesen und nach einem leichten und robusten Layout-Tool suchen
gibt es die alte "float + block-formatting context" Technik, die überall funktioniert
Das Überlasten von overflow:hidden für BFC und Clearen ist so schmutzig. Auch die Kumulation von Rundungsfehlern bei Floats ist kein echtes Problem mehr, aber wenn Sie immer noch ein Problem damit haben, können Sie immer Container-relative Floats verwenden (https://www.palantir.net/blog/responsive-design-s-dirty-little-secret). Einige Grid-Systeme wie Susy bieten sogar isolierte Grids, die diese Methode verwenden.
Hallo, ich suche einen CSS-Generator-Maker, um mein Plugin zu testen und Feedback zu erhalten. https://github.com/onigetoc/FormToCSS
Mit diesem Tool können Sie in wenigen Minuten CSS-Generatoren erstellen.
Demo: https://rawgit.com/onigetoc/FormToCSS/master/example/demo.html
Ein weiteres Flexbox-Grid-System: http://philippkuehn.github.io/gridilydidily/
In Ihrem Beispiel sollten die Spalten
min-width: 0haben, um Dehnungsprobleme zu vermeiden, wenn der Inhalt zu breit ist.Ja! Dem bin ich begegnet und habe es mit
width: 0(oderoverflow: hidden) behoben – ich glaube, ich bevorzuge das weniger semantisch unangemessenemin-width: 0. Danke.Haben Sie Gedanken zu "Verwenden Sie Flexbox nicht für das gesamte Seitenlayout"?
https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
Ich mag die Einfachheit von Flexbox, aber ist es wirklich für das Seitenlayout geeignet?
Es ist bereit. https://developers.google.com/web/updates/2013/10/Flexbox-layout-isn-t-slow
Ich liebe Flexbox absolut für Grids, aber leider beeinträchtigen die `order`-Eigenschaften die Tab-Reihenfolge und verursachen Probleme für die Barrierefreiheit. Ich glaube, die Flexbox-Spezifikation erwähnt dies. Sie sollten versuchen, sie vorerst zu vermeiden.