Ich habe drei divs innerhalb eines Eltern-divs, die unter Verwendung von:
voneinander getrennt sind %Vor% Allerdings hat das Eltern-Div ein :after , was bewirkt, dass die drei Divs nicht an den Rand des Eltern-Div gehen. Gibt es eine Möglichkeit, Flexbox die :before und :after ignorieren zu lassen?
In CSS gibt es derzeit keine 100% zuverlässige Methode, um zu verhindern, dass sich Pseudoelemente auf die Berechnung von justify-content: space-between auswirken.
::before und ::after Pseudo-Elemente in einem Flex-Container werden zu Flex-Elementen.
Aus der Spezifikation:
Jedes In-Flow-Kind eines Flex-Containers wird zu einem Flex-Element.
Mit anderen Worten, jedes Kind eines Flex-Containers, das sich im normalen Fluss befindet (d. h. nicht absolut positioniert ist), wird als Flex-Element betrachtet.
Die meisten, wenn nicht alle Browser interpretieren dies als Pseudo-Elemente. Der Pseudo ::before ist das erste Flex-Element. Der ::after -Eintrag ist der letzte.
Hier ist eine weitere Bestätigung dieses Renderverhaltens aus der Firefox-Dokumentation:
In-Flow
::afterund::beforePseudo-Elemente sind jetzt flex Elemente ( Fehler 867454 ).
Eine mögliche Lösung für Ihr Problem ist das Entfernen der Pseudo-Elemente aus dem normalen Fluss mit absoluter Positionierung. Diese Methode funktioniert jedoch möglicherweise nicht in allen Browsern:
Siehe meine Antwort hier für Illustrationen von Pseudoelementen, die justify-content :
Verschachtelte ein anderes div innerhalb des Eltern-div und gab den ganzen Flex-Code, so dass die Pseudo-Elemente das nicht beeinflussen.
Wenn Sie dies tun müssen, können Sie das automatische Randverhalten für Flex-Elemente nutzen. Sie müssten auch den linken Rand des ersten Flex-Kindes und den rechten Rand des letzten Flex-Kindes gleich null setzen. Siehe den untenstehenden CodePen.
Flexbox & amp; automatische Ränder: Ссылка
Codepen-Demo: Ссылка
%Vor%Tags und Links html css css3 flexbox pseudo-element