Ich muss nur zwei Boxen nebeneinander stellen und ich höre, Flexbox ist gut für so etwas.
display: flex; zum Elternelement legt die Kindelemente in einer Reihe an.Nun, das ist cool. Ich hätte sie wahrscheinlich schwimmen lassen können, aber das hier ist einfacher.
Sie sollten aber wahrscheinlich den gesamten Platz einnehmen, den sie haben. Kann ich die Eltern einfach auf 100% Breite dehnen? Nun, das kann ich, aber das wirkt sich offenbar nicht auf die Kindelemente aus.
Vielleicht kann ich width: 50%; für die Kinder verwenden? Das funktioniert, aber ich dachte, der Sinn von Flexbox sei, dass man nicht alle Breiten spezifisch angeben muss. Ah ja, Flexbox hat all diese Möglichkeiten, das wachstums-schrumpfende-ursprüngliche Verhalten von Kindern auszudrücken. Sieht so aus, als wäre flex: 1; hier so einfach wie möglich.
flex: 1; auf die Kinder erlaubt ihnen, zu wachsen und den Platz auszufüllen.Ich mag, dass ich bisher keine Mathematik oder hart kodierte Werte verwenden musste. Kann ich ein Drei-Spalten-Muster erstellen, ohne CSS anzufassen?
Schön.
Hmmm, Moment. Die Größen sind ein bisschen, ähhh, flexibel? Nichts zwingt diese Boxen, ständig ein Drittel des Containers zu sein.
Sieht so aus, als würde flex-basis: 33% das nicht beheben. flex: 0 0 33%; tut das auch nicht. Sieht so aus, als würde width: 33%; flex-shrink: 0; das tun, wenn wir es wirklich erzwingen wollen.
Das lange Wort, das dieses Größenverhalten bei schmalen Breiten erzwingt, ist vielleicht ein ungewöhnliches Szenario. Wir hätten es auch mit word-break: break-word; hyphens: auto; am Kind lösen können.
Eine andere Sache, die wir tun könnten, ist, die verdammten Elemente einfach umbrechen zu lassen, anstatt so streng damit zu sein. Flexbox kann das, oder?
Oh hey, das erinnert mich daran, wie cool es ist, dass die ersten beiden Elemente die gleiche Höhe haben. Das ist das Standardverhalten stretch, aber es kann auch gesteuert werden. Und das ist zeilenweise, weshalb die zweite Zeile ihre eigene unterschiedliche Höhe hat.
Was, wenn ich möchte, dass der erste „Love“-Block stattdessen oben ist? Sieht so aus, als könnte ich ihn neu anordnen, oder? Mal sehen, die Standardreihenfolge ist 0, also um zuerst zu sein, mache ich order: -1;.
Ha! Das hat irgendwie funktioniert. Aber ich meinte, ich möchte, dass er in der oberen Zeile die volle Breite einnimmt. Ich denke, ich kann ihn einfach auf flex-basis: 100%; setzen und die anderen werden entsprechend umbrechen.
Es ist ziemlich seltsam, die Quellreihenfolge und die visuelle Reihenfolge so unterschiedlich zu haben. Vielleicht sollte das in die Kategorie „niemals tun“ fallen.
Was, wenn ich das ganze Flexbox-Ding an einem bestimmten Punkt aufgeben will? Ein Teil von mir möchte die Richtung zu vertikal mit flex-direction: column; ändern und die Kinder auf volle Breite erzwingen. Ah, ein einfaches display: block; am Elternelement macht das in einem Zug.
Flexbox kann viel mehr! Eines meiner Lieblingsfeatures ist, wie automatische Ränder funktionieren, um andere Elemente wegzudrücken, wenn Platz vorhanden ist. Dies ist nur eine kleine Reise, bei der wir etwas UI ausprobieren und die nützlichen Dinge sehen, die Flexibilität bietet, sowie Dinge, die sie verwirrend machen können.
Ich benutze überall Flex – vielleicht zu viel, aber CSS Grid erscheint mir immer noch undurchdringlich.
Ich verstehe immer noch nicht alle Flex-Eigenschaften mühelos – aber flex-direction und seine zugehörigen justify-content-Optionen sind einfach phänomenal.
Wirklich gute Arbeit, ich schätze, wie Sie den Denkprozess durchlaufen haben. Macht es einfacher, die Verbindungen herzustellen und die Flex-Eigenschaften zu verstehen.
Grid ist noch erstaunlicher, wenn es um große Layouts und allgemeines Templating geht als Flex für die Kinder.
Genial! Ich liebe so etwas – den Entwicklungsweg zu zeigen ist der beste Weg, jemandem etwas Neues beizubringen. Danke!
Sehr gut artikuliert. Ausgezeichnete Art, Flexbox zu erklären. Brauchen Sie mehr Inhalte mit diesem Schreibstil. Danke.
Ich löse diese „seltsamen“ Situationen immer mit „min-width: 0“ oder einem beliebigen Wert, der für uns geeignet ist und sich von „auto“ unterscheidet.
Eine so „andere“ Herangehensweise an einen Artikel. Ich habe sowohl gelächelt als auch etwas Neues gelernt.
Ich mag diesen Ansatz wirklich. Chapeau an Chris.
Ich finde das eigentlich ein sehr überzeugendes und zukunftsorientiertes Merkmal von Flexbox, da es uns ermöglicht, das Markup von jeder spezifischen Darstellung zu trennen. Nehmen wir an, wir haben ein Layout für eine Magazinseite, die einen Absatz in der oberen Ecke und eine riesige Überschrift darunter platziert. Wenn wir dieses Layout betrachten, werden wir instinktiv zuerst die Überschrift und dann den kleinen Absatz lesen. Das Markup, das dies am besten beschreibt, ist so etwas wie
<h1>Große Überschrift</h1><p>Lorem ipsum dolor sit amet...</p>. Früher hätten wir uns mit Floats oder einer unhandlichen Kombination vonposition: absolutes beholfen, um dies zu erreichen. Es wäre sehr verlockend gewesen, einfach denpvor demh1zu platzieren. Flex-Order macht dies trivial und ausdrucksstark.Diese Möglichkeit hilft uns, jedes spezifische visuelle Layout als eine mögliche Darstellung von Inhalten zu betrachten, anstatt als ein intrinsisches Merkmal des Inhalts. Die beliebtesten Bereiche, in denen dies diskutiert wird, sind Responsive Design und Barrierefreiheit – im obigen Beispiel, wenn ein kleines („mobiles“) Layout die Überschrift zuerst platziert, wäre dies nur eine weitere Darstellung desselben Inhalts, nicht anderer Inhalt. Dasselbe gilt für Screenreader. Diese Darstellungen sollten nicht darunter leiden, dass sie in der ursprünglichen visuellen Anordnung platziert wurden.
Aber das Problem ist größer als nur diese beiden Fälle. Markup soll Text und Medien Bedeutung und Kontext verleihen (z. B. Überschriftenebenen festlegen, Alt-Texte hinzufügen oder einen Absatz als Blockquote kennzeichnen). Dieser zusätzliche Kontext ist am nützlichsten, wenn er sowohl maschinenlesbar als auch menschenlesbar ist. Markup ist auf seiner höchsten Ebene eine Erweiterung der geschriebenen Sprache.
Werkzeuge wie Flexbox-Order befähigen uns als Designer, reichhaltige, ausdrucksstarke Dokumente zu erstellen, die auch im Browser großartig aussehen.
Ich denke, Chris meint hier, dass es ein Problem der Barrierefreiheit ist, wenn die Dokumentreihenfolge und die Bildschirmreihenfolge zu stark voneinander abweichen. Flexbox und CSS Grid können schlechte Barrierefreiheits-Praktiken ermöglichen, wenn man nicht aufpasst.
Ich denke, Jonathan hat den Punkt mit seinem Beispiel verstanden. Ich bin Designer und bin es gewohnt, dass ein Layout nicht von links nach rechts und von oben nach unten gelesen wird. Durch Anpassen von Skalierung und Kontrast kann ich den Betrachter dazu bringen, die Elemente in der von mir gewünschten Reihenfolge zu lesen. Und aus Sicht der Barrierefreiheit denke ich, dass DIES die Markup-Reihenfolge sein sollte. Ich meine, ich möchte die Erfahrung für eine Person mit Screenreader genauso steuern und verfeinern, wie ich es für eine sehende Person tue.
Natürlich ist das eine große Macht, die mit großer Verantwortung einhergeht. Und da es eine einfache Sprache für Neulinge ist, ist es gefährlich, dass es so einfach ist, die Erfahrung für nicht-sehende Benutzer zu beeinträchtigen. Aber das ist ein Grund für uns, zu diskutieren und zu exponieren, nicht zu vermeiden.
Gut gemacht. Habe etwas gelernt.
Toller Artikel. Vielen Dank.
Die 3 (oder mehr) gleich breiten Spalten könnten besser mit Grid Layout als mit Flexbox gehandhabt werden. Grid hat auch die
gap-Eigenschaft (die in Flexbox-Layouts mit Margins simuliert werden kann).Flexbox ist nicht das richtige Werkzeug für jeden Layoutjob, aber wie Sie gezeigt haben, kann es oft zum Funktionieren gebracht werden.
Das ist der beste Artikel über Flexbox, den ich bisher gelesen habe!
Schöner Einblick in einige Flexbox-Gedanken. Eine Randnotiz: width: 100% ist hier unnötig. Der Standardwert width: auto sorgt für das Dehnen.
Sie haben es versucht, es hat versagt, entfernen Sie es dann, da es Ihren Code unübersichtlich macht :)
Was ist die Schriftart, die im Code verwendet wird?
Man muss den Desktop-First-Ansatz mit
max-widthin der Media Query LIEBEN. Wer sagt, dass man Mobile-First bauen MUSS?! Ppphhfft!Ja, ich meine es ernst.
Ich benutze seit ein paar Jahren viel Flex, eine der ersten Sachen, die ich bei einem neuen Projekt mache, ist das Hinzufügen von ein paar Mixins, die ich vor einiger Zeit erstellt habe, hier ist ein Beispiel.
Damit können Sie einfach in Ihren SASS-Dateien so etwas verwenden:
Ich finde es lesbarer und leichter zu visualisieren, wenn man CSS-Dateien liest :)
Sie finden mehr unter https://github.com/Yexan/codepen-utilities/blob/master/sass/mixins/utilities.sass#L78, wenn Sie interessiert sind :)
Hallo Autor! Danke für den brillanten Artikel. Können Sie die automatische Ränder-Sache, die Sie unten erwähnt haben, erläutern? Ich bin nicht vertraut, daher weiß ich nicht, wonach ich suchen soll. Gibt es Begriffe, nach denen ich suchen könnte?
Schauen Sie sich an, wie das „Benutzermenü“ hier sich bis zum Ende des Containers schiebt.
Hallo Chris, danke für den Artikel, er hat mir viele Dinge über CSS Flexbox erklärt, die mich zuvor verwirrt haben.
Sie sagen an einer Stelle im Artikel
Kann ich also CSS Flexbox anstelle von Floats verwenden? Da ich Websites mit Seitenleisten erstelle und die Größenänderung von Floats mühsam ist.
Ja, wir verwenden keine Floats mehr für Layouts.
Man könnte sogar ein Stirnrunzeln bekommen, wenn man Flexbox für Layouts verwendet, weil es bereits CSS Grid gibt. Wenn Ihnen das passiert, ignorieren Sie sie, hahaha.
PS. Ja, die Größenänderung von Floats (und das Clearen, möchte ich hinzufügen) ist nicht mehr etwas, womit Sie sich befassen müssen, Flexbox FTW.
Es ist großartig. Habe von der flex-wrap-Eigenschaft erfahren. Die kniffligste, aber nützliche Eigenschaft. Das Grid-Layout kam und ist auch sehr nützlich für Entwickler und sehr notwendig, um Elemente so einfach anzuordnen. Werden die Grid-Layout-Eigenschaften uns die Notwendigkeit von Flex nicht fühlen lassen?