Posiadam responsywną siatkę opartą na procentach utworzoną przy użyciu flexbox z wykorzystaniem marginesów procentowych. Gra się dobrze w Chrome i Safari. Jednak Firefox zwija marginesy, chyba że ustawiono jawną wysokość elementów. Ktoś zna obejście?Firefox ignoruje pionowe marginesy na elementach elastycznych (dzieciach modelu flexbox), chyba że deklarowana wysokość jest zadeklarowana na kontenerze
To zostało zgłoszone wcześniej jako bug in Firefox/Gecko, ale w rzeczywistości jest to bug in Chrome/Blink.
Dla elementu potomnego bloku (display:block), procent marginesów & padding zostanie rozwiązany względem szerokości bloku. Prawdopodobnie to zachowanie się spodziewamy, i to jest to, co Blink robi niepoprawnie: dla dzieci z elastycznych pojemników, jak opisano na stronie błędu powyżej.
Ale w flex kontenera, margines procent & wyściółka są supposed to resolve against the respective dimension (tak np margin-top/margin-bottom zostanie rozwiązany przed wysokości pojemnika).
Ponadto, jeśli pojemnik nie posiada określoną wysokość (np jeśli ma height:auto) następnie procentowe nie mogą być rozwiązane, więc rozwiązać 0.
można nadać szerokość marginesu w procentach, wysokość depozytu w jednostkach vw. Działa to tylko wtedy, gdy opakowanie flexbox nie ma ustalonej szerokości.
Na przykład: margin: 0 2% 2vw 0;
przykład robocza: http://codepen.io/anon/pen/JKGjdB
Dzięki Dawida! Ciekawy – jlevinson
Dzięki za znajomość – jlevinson