Ich hab mir das verlinkte Beispiel gerade mal angeschaut.
Auf den ersten Blick ist mir aufgefallen, dass es etwas schwierig ist durchzusteigen, weil durch die vielen Präfixes und mediaqueries es mir als "Fremden" schwer fällt, genau das alles in den Entwicklerwerkzeugen anzupassen, was ich für relevant empfinde.
Ich würde meine Testdatei also zunächst ohne mediaqueries aufbauen und für die Tests im IE 11 auch ohne Präfixe arbeiten. Der kann das nämlich auch so.
Dann ist mir aufgefallen, dass Deine flex-Werte für die Items in meinen Augen etwas gewöhnungsbedürftig sind.
Ich habe mal der Einfachheit halber nur die äußere Flexbox bei großem Bildschirm angeschaut.
Der Flex-Container hat
Code:
.mein_flexcontainer {flex-flow: row wrap;
}
Das erste Item
Code:
.item_1 {flex: 1 1 100%;
}
Kann sich also ausdehnen und auch kleiner werden bei einer Basis-Breite von 100%.
Das zweite und dritte Item
Code:
.item_2 {flex: 6 1 50%;
}
.item_3 {flex: 6 1 48.7%;
}
Können sich auf das 6fache ausdehen und auch verkleinern bei einer Basis von 50% bzw. 48.7%
Für das 4. Item gibt es keine Angaben. Also sollte das Standardverhalten greifen flex: 0 1 auto. Ausdehnen nicht erlaubt, verkleinern erlaubt Basis automatisch.
Ich weiss nicht was Du insbesondere mit Deinen Anweisungen ausdehnen auf das 6fache bezweckst.
Habe ich zwei Elemente die ich nebeneinanderstellen will und jedes Element soll die Hälfte einnehmen, dann reicht flex: 1 0 50%. Falls ein Element eventuell doch von Natur aus größer als die 50% werden könnte - bei Tabellen ist mir so etwas schon passiert - oder man mit den Außenabständen nicht extra aufpassen will, dann gern auch flex: 1 1 50%.
Ich habe mal versucht Dein Beispiel anzupassen und im IE zu testen. Der nachfolgende Code sollte klappen
Code:
.item_1{flex: 1 1 100%;
}
.item_2 {flex: 1 1 50%;
}
.item_3 {flex: 1 1 48.7%;
}
.item_4{flex: 1 1 100%;
}
Wobei bei den Elementen mit der Basis 100%, die Werte für flex-shrink bzw. flex-grow völlig egal sind, soweit ich weiss.
Nachtrag: Nur Außenabstände spielen auch hier eine Rolle.
Ansonsten kann ich Peter Müllers Video-Training zu Flexboxen empfehlen
Lesezeichen