Vertikale Blöcke verteilen
Spalten gleicher Höhe waren bis zum Auftritt von display: flex ein Universum voller Schwarzer Löcher und . flex-direction: column verteilt den verfügbaren Platz auch unter den Blöcken einer Spalte.
.flex-vert { display: flex; min-height: 24em; justify-content: center; flex-direction: column; } .flex-item { width: 280px; margin-left: auto; margin-right: auto; }
flex-basis ist die anfängliche Breite der Flex-Items und verteilt den freien Platz unter den flex-Elementen. Ohne flex-basis nehmen die Element nur den Platz ein, den sie brauchen.
flex-basis (Kurzschrift flex) kann ein absoluter Wert wie 60px oder 2em oder ein Anteil wie 1 oder 25% sein. Allerdings steht IE11 der einfachen Lösung im Weg: IE11 ignoriert flex-basis, wenn der Wert keine Maßeinheit wie 1em oder 20px aufweist. flex-basis: 1 zeigt in IE11 also keine Wirkung.
flex-column: Blöcke gleicher Höhe in Spalten
Ohne Zwiebelschichten von Wrappern bringt flex-direction: column zusammen mit flex-basis Blöcke in Spalten auf gleiche Höhe. Der Inhalt bleibt in linearer Folge.


.card { display: flex; flex-direction: column; } .card header { flex-basis: 5em;} .card .wafer { display: flex; flex-basis: 3em; align-items: center; justify-content: center; } .card .cardtext { flex-basis: auto; } .card .cardimg img { width:100%; height: 80px; object-fit:cover; }
object-fit für img-Elements passt Bilder an den verfügbaren Platz an und wäre das Sahnehäubchen, wird aber von IE11 nicht in Betracht gezogen.
_:-ms-fullscreen, :root .IE11-only-class { /* IE11 specific properties */ }