If you hadn’t seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing an element to stack at a certain container width. I was particularly interested, as I was fighting a little layout situation at the time I saw this and thought it could be a solution. Let’s take a peak.
„Anzeigen-Doppel“-Einheiten
Ich habe diese kleinen Werbeeinheiten im Design dieser Seite. Ich kann sie an verschiedenen Stellen auf der Seite einfügen und tue dies auch. Manchmal sind sie in einer Spalte wie dieser
Manchmal platziere ich sie an einer Stelle, die eher einer Full-Width-Umgebung ähnelt
Und manchmal kommen sie in ein Multi-Column-Layout, das durch ein flexibles CSS-Grid erstellt wird.
Sie könnten also wirklich fast jede Breite haben.
Aber es gibt einen Punkt, an dem ich möchte, dass die Anzeigen gestapelt werden. Sie funktionieren nicht mehr nebeneinander, wenn sie in einer schmalen Spalte gequetscht werden, also möchte ich, dass sie sich über/unter statt links/rechts anordnen.
Mir ist egal, wie breit der Bildschirm ist, mir ist der Platz wichtig, in den diese kommen
Ich habe angefangen, Media Queries zu schreiben, um diese Anzeigen von nebeneinander nach gestapelt zu verschieben. Ich habe es an einer Stelle „repariert“, nur um es an einer anderen kaputt zu machen, weil dieselbe Media Query in einem anderen Kontext nicht funktioniert. Ich brauchte eine verdammte Container-Abfrage!
Das ist die Schönheit von Heydons Albatros-Technik. Der Punkt, an dem ich möchte, dass sie umbrechen, ist etwa 560px, also habe ich das als Ziel genommen.
Der Übergang
Ich habe bereits Flexbox verwendet, um diese Ad Doubles zu gestalten. Daher waren die einzigen Änderungen, sie umbrechen zu lassen, die schicke 4-Eigenschaften-Albatros-Magie einzufügen und die Ränder so zu handhaben, dass keine Media Query sie zurücksetzen muss.
Das ist die gesamte diff
Und es funktioniert großartig!
Ein Blick in die Firefox DevTools
Victoria Wang schrieb kürzlich über die Gestaltung des Firefox DevTools Flexbox Inspectors. Ich musste die Firefox Developer Edition öffnen, um es mir anzusehen! Es ist ziemlich cool!
Das Coolste daran ist für mich, wie es zeigt, wie ein einzelnes Flex-Element zu seiner Render-Größe kommt. Wie wir alle wissen, kann das etwas verrückt werden, da viele Dinge es beeinflussen können, wie flex-basis, flex-grow, flex-shrink, max-width, min-width usw.
Hier ist, was die Albatros-Technik zeigt
Ich liebe die Innovation! Und ich werde wahrscheinlich selbst eine Media Query verwenden. Ich wäre wirklich verwirrt und vielleicht verstört, wenn ich einen über diesen Taktik für einen so scheinbar einfachen Prozess geerbten Beitrag erben würde. Aber trotzdem großartig zu sehen, was die neueste CSS-Layout-Technologie uns bieten kann.
Das ist ja gerade der Punkt, dass es keine Media Query gibt, die das kann, zumindest noch nicht.
Das ist ein Game Changer! Ich habe mir schon lange Medienanfragen für die Inhaltsbreite gewünscht und denke, dass diese Technik die Aufgabe sehr gut erfüllen wird :)
Kein Trend bei Media Queries, vielleicht im Moment der richtige Ansatz. Meiner Meinung nach ist das verwirrend und ich würde eher bei Resize Observer bleiben, wenn ich kann. Deklarative Ansätze mit Webkomponenten wären meine Lösung.
Ich habe dasselbe Problem mit fließender Typografie im Web. Niemand kann diesen intelligenten Code nach einer Weile verstehen.
Diese Tricks für fließende Typografie sind für
font-size, wascubic-bezierfür Übergangs- oder Animations-Timing-Funktionen ist. Sicher, es wäre hilfreich, wenn diese Tricks irgendwie standardisiert wären, z. B.font-size: linear-font-size(30rem, 1rem, 75rem, 1.2rem)oder einfacherlinear(x1: von dieser Viewport-Breite, y1: von dieser Schriftgröße, x2: bis zu dieser Viewport-Breite, y2: bis zu dieser Schriftgröße). Die Visualisierung der Funktionskurve auf einer x/y-Achse ist eine gute Möglichkeit, sich daran zu erinnern, wie sie funktioniert, ähnlich wie bei cubic-bezier. Viele native CSS-Funktionen oder Werte verbergen ebenfalls komplexe Mathematik, wie Mischmodi und Filter.Ich verteidige nur diese Tricks für fließende Typografie. Ich versuche nicht zu beweisen, dass ich schlauen Code nach einer Weile verstehen kann und du nicht. :)
Ich habe Heydons Artikel neulich gelesen. Sehr artikuliert und noch hilfreicher. Ein absoluter Game Changer, bis wir native Container-Abfragen haben.
Hey Chris, könntest du das nicht einfach erreichen, indem du auf deinen Anzeigeneinheiten „flex: 1 280px;“ (oder den entsprechenden Pixelwert) einstellst? Es scheint, dass der „Flexbox Albatross“ wirklich nur für 3+ Flex-Elemente nützlich wäre, es sei denn, ich übersehe etwas.
HMMMMM ICH GLAUBE, DU KÖNNTEST RECHT HABEN. Lass mich das überdenken. Ich werde das so bald wie möglich ausprobieren, aber ja, ich denke, du hast Recht, dass es mit nur 2 Elementen, die wachsen, aber nicht schrumpfen können, viel einfacher ist, sie genau an einem Minimum brechen zu lassen und wenn der Flex den neuen Platz füllt.
seltsamer Flex, aber okay
Wie wäre es mit Grid dafür? Der minimale Spaltenwert wird unser Breakpoint sein. Das würde ich vielleicht tun.
Ich habe einen SCSS-Mixin mit dieser Technik erstellt.
Codepen
Wenn es doch nur einen Weg gäbe, dies für srcset zu tun…
Kann diese Technik mit nicht-gleichmäßigen Spalten funktionieren?