Flexbox Dynamischer Zeilentrenner

Während der Arbeit an einer Benutzeroberfläche mussten wir ein Zeilentrennzeichen zwischen zwei Abschnitten hinzufügen. Hier ist es:

In kleineren Viewports wird die Linie horizontal:

Schauen wir uns das HTML an.

Wir haben einen Abschnitt mit zwei untergeordneten Hauptartikeln. Zwischen ihnen werden wir einen Zeilentrenner haben.

In CSS verwenden wir Flexbox, um das Layout zu handhaben.

Wir haben eine Lücke von 1 rem zwischen den einzelnen Elementen hinzugefügt, und außerdem sollte jedes untergeordnete Objekt 50% seines übergeordneten Elements ausfüllen. Hier ist das Ergebnis:

Im nächsten Schritt wollen wir die beiden Elemente vertikal zentrieren, also verwenden wir align-items für das übergeordnete Objekt.

Jetzt sind die beiden Elemente zentriert (wir haben die rote Linie hinzugefügt, damit das leichter zu erkennen ist). Sie fragen sich vielleicht, was hat das mit dem Separator zu tun?

Hinzufügen des Trennzeichens

Wir wollten das als Pseudoelement hinzufügen, also haben wir dieses CSS geschrieben. Kannst du das visuelle Ergebnis erwarten, ohne nach unten zu scrollen?

Oh, was macht der kleine Platz da drüben? Da das Pseudoelement von allen Seiten nur einen 1px-Rand hat, ist das Ergebnis ein Quadrat von 2*2`.

Konzentrieren wir uns hier ein bisschen. Das ist der Kern dieses kleinen CSS-Tricks.

Das Quadrat entsteht dadurch, dass für jeden Rand dieselbe Farbe verwendet wird. Mit verschiedenen Farben kann es so aussehen.

‍

Warum sieht das Trennzeichen wie ein Quadrat aus?

Da wir align-items: center hinzugefügt haben, um die untergeordneten Elemente vertikal zu zentrieren, haben wir das Standardverhalten entfernt, bei dem die Flexbox untergeordnete Elemente dehnt (in diesem Fall vertikal gestreckt).

Jetzt sieht es wie das folgende Bild aus:

Als Nächstes müssen wir die Flex-Elemente neu anordnen, damit die Trennlinie zwischen ihnen erscheint.

Und wir sind fertig!

Damit das auf allen Bildschirmgrößen funktioniert, benötigen wir Flex-Direction: column mobile und flex-direction: row für größere Bildschirme.

Hier ist ein Video zum Ändern der Flex-Richtung. Beachten Sie, wie sich das Trennzeichen ändert!

‍

Das funktioniert wie von Zauberhand weil es ein Flexbox-Verhalten ist.

Wenn flex-direction: row gesetzt ist, Querachse ist vertikal, also dehnt sich das Pseudoelement vertikal aus.

Und wenn die Querachse ist auf flex-direction: column gesetzt, sie wird horizontal sein, sodass sich das Pseudoelement horizontal erstreckt.

Ist das nicht toll? Sie müssen keine Breite, Höhe oder etwas anderes verwenden! Es ist nur eine Grenze, die sich über Flexbox erstreckt.

‍

Die Dicke des Separators

Da der Randwert zu den vier Richtungen beiträgt, müssen wir das 0,5-fache der gewünschten Dicke verwenden. Wenn wir beispielsweise ein 1-Pix-Trennzeichen verwenden möchten, sollte der Rand wie folgt aussehen:

‍

Gradiententrennzeichen

Dies ist ein weiterer Grund für uns, die Grenzlösung anderen vorzuziehen. Wir können Farbverläufe per Border-Image verwenden.

‍

Gestrichelte Trennzeichen

Da wir Grenzen verwenden, können wir auch ein gestricheltes Trennzeichen verwenden.

‍

Eine andere Art, es zu tun

Wenn wir uns nicht die Zeit genommen haben, über die Implementierung nachzudenken, hätten wir möglicherweise Breite und Höhe verwendet. Wir sagen nicht, dass das Folgende eine schlechte Lösung ist, aber es ist gut, Lösungen zu verlassen, die wir für selbstverständlich gehalten haben, und über andere Möglichkeiten nachzudenken, UI-Probleme zu lösen.

Quelle: https://ishadeed.com/

‍