Der Denkprozess Hinter einem Flexbox-Layout

0
259

Ich brauche nur, um zwei Boxen nebeneinander und ich höre flexbox ist gut bei sowas.

Nur das hinzufügen von display: flex; um das übergeordnete element legt die Kinder in einer Reihe.

Gut, das ist cool. Ich glaube, ich haben könnte, schwebte Sie, aber das ist einfacher.

Sie sollte wohl den gesamten Raum, den Sie haben, obwohl. Kann ich nur Strecken die Eltern zu 100% breit? Gut, ich kann, aber das ist offenbar nicht auf die Kind-Elemente.

Wenn das übergeordnete element hat mehr Platz als die Kinder brauchen es nicht alles tun, um den Kindern zu helfen, füllen den Raum für sich allein.

Vielleicht kann ich width: 50%; auf die Kinder? Das funktioniert, aber ich dachte, der Punkt der flexbox ist, dass Sie nicht haben, um alle spezifischen Breite. Ah ja, flexbox, mit all den Möglichkeiten auszudrücken, die growy-shrinky-anfängliche Verhalten von Kindern. Sieht aus wie flex: 1; ist ungefähr so einfach, wie es hier geht.

Flex: 1; die Kinder, die es Ihnen ermöglichen, zu wachsen und den Platz ausfüllen werden.

Ich mag, wie ich noch nicht zu tun hatte, irgendwelche Mathe-oder codieren Sie die Werte so weit. Kann ich machen es zu einem drei-bis-Muster ohne Berührung CSS?

Schön.

Hmmm, warten. Die Dimensionierung ist ein bisschen, uhhhh, flexy? Nichts zwingt Sie diese Felder, um ein Drittel der container, die ganze Zeit.

Sieht aus wie flex-basis: 33% nicht dieses Problem beheben. flex: 0 0 33%; auch nicht den trick tun. Sieht aus wie width: 33%; flex-shrink: 0; gilt aber, wenn wir wirklich wollen, strongarm es.

Manchmal ist ein design sieht genau gleich der Größe der Boxen. Dies ist vielleicht der CSS-Grid-Gebiet, aber was solls.

Das lange Wort zu zwingen, dass sizing Verhalten bei schmalen breiten wird vielleicht ein ungewöhnliches Szenario. Wir hätten auch gelöst es mit word-break: break-word; Bindestriche: auto; auf das Kind ist.

Eine andere Sache, die wir tun könnten es einfach lassen, die dang-Elemente umbrechen, anstatt Sie so streng über ihn. Flexbox kann machen, Recht?

Oh hey, das erinnert mich daran, wie cool es ist, dass die ersten zwei Elemente die gleiche Höhe. Das ist die Standard-stretch-Verhalten, aber es kann kontrolliert werden, wie gut. Und es ist durch die Reihe, die ist, warum die zweite Zeile hat seine eigene, unterschiedliche Höhe.

Was ist, wenn ich will, dass die erste “Liebe” – block auf der Oberseite statt? Sieht aus wie ich kann wieder, um es, eh? Mal sehen, die Standard-Reihenfolge ist 0, also die erste sein, die ich tun, um: -1;.

Ha! Das ein bisschen gearbeitet. Aber ich meinte, dass ich will, es zu nehmen, bis die volle Breite auf der obersten Zeile. Ich denke, ich kann nur kick it up auf flex-basis: 100%; und die anderen wickeln sich entsprechend.

Es ist ziemlich seltsam, haben die bei Quelle bestellen und visuelle, um andere wie dieses. Vielleicht sollte das gehen, in der “don’ T ever do this” – Kategorie.

Was ist, wenn ich will Kaution auf das gesamte flexbox Sache an einem bestimmten Punkt? Ein Teil von mir will das ändern die Richtung zu gehen, senkrecht, mit flex-direction: column; und Kraft, die Kinder werden in voller Breite. Ah, ein einfaches display: block; auf der übergeordneten macht, dass in einem Schlag.

Nicht verändert, alle flexbox-Kram zu handhaben, ein-Spalten-layout, wir schalten einfach flexbox-off.

Flexbox tun können viel mehr Zeug! Einer meiner Favoriten ist, wie die automatische Ränder Arbeit zu “drücken” andere Elemente entfernt, wenn Platz vorhanden ist. Dies ist nur eine kleine Reise spielen mit einigen UI und zu sehen, die nützliche Dinge flexibel macht zusammen mit die Dinge, die machen es verwirrend.