.avif)
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/
FAQ
What is a dynamic line separator in a Flexbox layout?
A dynamic line separator is a visual divider (such as a line or space) that adapts automatically within a Flexbox container, resizing or repositioning itself based on available space and content.
Why use Flexbox for creating line separators?
Flexbox allows separators to align, stretch, and respond fluidly to layout changes without hardcoded widths or heights, making designs more responsive and maintainable.
How can a line separator automatically fill available space in Flexbox?
This is typically achieved by setting the separator element’s flex-grow property, allowing it to expand and fill remaining space between other flex items.
What are common use cases for dynamic separators in Flexbox layouts?
They are often used in headers, navigation bars, list items, breadcrumbs, and form layouts to visually separate content while maintaining responsive behavior.
How does Flexbox handle separators in horizontal vs. vertical layouts?
In horizontal layouts, separators usually grow in width, while in vertical layouts they grow in height. This behavior depends on the flex-direction setting of the container.
What mistakes should be avoided when implementing Flexbox separators?
Common mistakes include using fixed dimensions, ignoring alignment properties, and overcomplicating the layout with extra wrappers instead of leveraging Flexbox’s native capabilities.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
