CSS flex-direction column

Mai 2025

Auch wenn display:flex meist zum horizontalen Ausrichten von Blöcken verwendet wird: flex-direction: column richtet gleich hohe Blöcke ein. Auch wenn HTML-Blöcke wie <div> ohnehin spaltenweise angeordnet sind: mittels flex-direction: column lässt sich die Darstellung besser steuern.

Vertikale Blöcke verteilen

Spalten gleicher Höhe waren bis zum Auftritt von display: flex ein Universum voller Schwarzer Löcher. 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.

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;
}

Methode	Wann verwenden?
flex: 1	Gleiche Verteilung innerhalb festen Containers
height oder min-height	Wenn du absolute oder Mindesthöhe willst
align-items: stretch	Querrichtung gleichmäßig (Standardverhalten)
display: grid + auto-rows	Wenn du gleich hohe Zeilen ohne Flex willst

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.

Am Ende ist display: grid meist einfacher, wenn alle Elemente eines Spaltenblocks unabhängig vom Inhalt immer gleich hoch sein sollen:

.container {
  display: grid;
  grid-auto-rows: 1fr; /* jede Zeile gleich hoch */
}

object-fit für img-Elements passt Bilder an den verfügbaren Platz an und ist das Sahnehäubchen (nicht IE11).

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; }