Ich habe ein Responsive-Prozentsatz basiertes Raster mit Flexbox und prozentualen Rändern erstellt. Es funktioniert gut in Chrome und Safari. In Firefox werden die Ränder jedoch zusammengeklappt, es sei denn, eine explizite Höhe wird für die Elemente festgelegt. Kennt jemand eine Lösung?
Antworten
Zu viele Anzeigen?
Dies wurde bereits als Fehler in Firefox/Gecko gemeldet, ist aber tatsächlich ein Fehler in Chrome/Blink.
Bei einem Kind eines Block-Elements (display:block) werden Prozent-Margen und -Padding gegen die Breite des Blocks aufgelöst. Das ist wahrscheinlich das Verhalten, das Sie erwarten, und das ist auch das, was Blink irrtümlicherweise für Kinder von Flex-Containern tut, wie auf der obigen Bug-Seite beschrieben.
Aber, in einem Flex-Container sollen Prozent-Margen und -Padding sich gegen die jeweilige Dimension auflösen (also z.B. margin-top/margin-bottom werden gegen die Höhe des Containers aufgelöst).
Zudem, wenn der Container keine eindeutige Höhe hat (z.B. wenn er height:auto hat), können Prozentwerte nicht aufgelöst werden und werden daher zu 0 aufgelöst.
David
Punkte
31
Sie können die Randbreite in Prozent und die Randhöhe in vw-Einheiten angeben. Dies funktioniert nur, wenn dem Flexbox-Wrapper keine feste Breite zugewiesen wird.
Zum Beispiel: margin: 0 2% 2vw 0;
Arbeitsbeispiel: http://codepen.io/anon/pen/JKGjdB
