CSS flex-direction column

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.

Jelly beans lemon drops candy canes cookie.

Oat cake macaroon caramels.

Jujubes soufflé jelly beans tootsie roll. Sesame snaps liquorice soufflé muffin. Jelly beans marshmallow tiramisu.

Muffin sesame snaps macaroon pie jujubes tiramisu tiramisu pie liquorice

Ohne flex-basis flex-basis relativ flex-basis absolut

.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 – Header Kurz

Dessert Wafer

Oat cake dragée apple pie jelly-o ice cream marzipan halvah apple pie.

CARD – Header Lang, länger, noch länger

Danish Toffee Wafer claw

Lemon drops tart jujubes cake pastry sweet roll jujubes pastry sesame snaps. Apple pie candy gummi bears muffin bear claw wafer.

.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 ist das Sahnehäubchen (nicht IE11).

Da flex-basis jeweils individuell betrachtet und eingerichtet werden muss, ist die Lösung nicht wirklich flexibel. Die jüngere CSS-Eigenschaft display: contents ist zielführender.

Alternative: Flex Auto Margins

margin:auto richtet Flex-Elemente aus.

.itemleft { 
	margin-right: auto;
	background-color: cornflowerblue;
}

.itemright {
	margin-left: auto;
	background-color: cornflowerblue;
}

.itemtop { margin-bottom: auto; }
.itembottom { margin-top: auto; }

.auto .itemcenter { margin: auto; }