Chen Hui Jing stellt fest, dass ein absolut positioniertes Flex-Element nicht mehr Teil des Flex-Layouts ist. Außer... es ist doch ein bisschen Teil davon. Wenn Sie das Kind auf position: absolute; setzen, aber keine top/right/bottom/left-Eigenschaften zuweisen, dann wird die Flexbox-Ausrichtung immer noch darauf angewendet.
Es ist seltsam anzusehen, aber es macht auch einen gewissen Sinn. Wenn Sie position: absolute; auf Elemente anwenden (und nichts weiter), bleiben sie irgendwie dort, wo sie sind, bis Sie andere Positionierungseigenschaften zuweisen. Sehen Sie, wie dieses SVG-Icon einfach in der Mitte dieses Absatzes sitzt und sogar mit ihm fließt, wenn die Größe geändert wird, da es keine spezifischen Positionierungsanweisungen außer "beeinflusse nichts anderes" hat.
Hallo!
Frage: Kann ich mich auf dieses Verhalten browserübergreifend verlassen?
Elternteil: (display flex; justify-content:center; align-items: center).
Kinder: (position: absolute; z-index:verschieden;). Schön zentriert, aber ich kann sie unabhängig voneinander animieren, ohne den Fluss der Seite zu unterbrechen.
Vielen Dank,
Sonya
Hmm... was ist, wenn das Kind dynamische Inhalte/Höhe hat? Wenn ich zum Beispiel die feste Höhe von 300px im CodePen entferne, bewegt sich der Elternteil nicht und ist auf 0 zusammengefallen. Konnte bisher keine CSS-Lösung finden, damit sich der Elternteil um das Kind herum flexen kann.
Hallo Freunde. Ich habe eine Frage. Ich habe ein Div, das eine absolute Position und Flex-Display und eine maximale Breite von 700 Pixel hat, okay? Jetzt möchte ich, dass dieses Div in der Mitte der Seite zentriert und responsiv ist. Was kann ich tun?
Ich habe festgestellt, dass es genau funktioniert, wenn Sie alles auf 0 setzen.
(top:0,right:0,bottom:0,left:0)