CSS/Tutorials/Flexbox/Ausrichtung

← Flex-Items

Einstieg in Flexbox
(Übersicht)

Feststehender Footer →

Text-Info

15min

mittel

Grundkenntnisse in
• HTML
• CSS

Flex-Items können bei festen Größenangaben kleiner als der Flex-Container sein und dann beliebig innerhalb des Flex-Containers ausgerichtet werden.

Einige dieser Eigenschaften wurden in Flexbox eingeführt – mittlerweile sind sie auch im Grid Layout verfügbar, können dort jedoch teilweise andere Werte annehmen.

Vergleiche: CSS/Tutorials/Grid/Ausrichtung von Grid-Items

Ausrichtung entlang der Hauptachse

justify-content

Die Eigenschaft justify-content legt fest, wie die einzelnen flexiblen Elemente entlang der Hauptachse angeordnet werden.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Folgende Angaben sind möglich:

• flex-start: Alle Elemente werden linksbündig angeordnet
• flex-end: Alle Elemente werden rechtsbündig angeordnet
• center: Alle Elemente werden mittig angeordnet, ein möglicher Abstand ist links und rechts
• space-between: Alle Elemente werden verteilt, zwischen ihnen ist ein (möglicher) Abstand, das erste und letzte Element stoßen an die rechte und linke Seite des Elternelements
• space-around: Alle Elemente werden verteilt, der mögliche Abstand ist sowohl zwischen den Elementen als auch zum Eltern-Container
• initial
• inherit

Anordnung von Elementen mit justify-content ansehen …

.vorne  {
  justify-content: flex-start;
}
 
.mittig {
  justify-content: center;
}
 
.verteilt1 {
  justify-content: space-between;
}

.verteilt2 {
  justify-content: space-around;
}

ansehen …

Ausrichtung entlang der Querachse

align-content

Die Eigenschaft align-content legt fest, wie die einzelnen flexiblen Elemente entlang der Querachse angeordnet werden.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Folgende Angaben sind möglich:

• stretch: (Standardwert) Alle Elemente werden gleichmäßig verteilt, ein möglicher Abstand zwischen den Elementen und nach dem letzten Element ist gleich
• flex-start: Alle Elemente werden am Start der Querachse angeordnet
• flex-end: Alle Elemente werden am ende der Querachse angeordnet
• center: Alle Elemente werden in der Mitte der Querachse angeordnet
• space-between: Alle Elemente werden verteilt, zwischen ihnen ist ein (möglicher) Abstand, das erste und letzte Element stoßen an die obere und untere Seite des Flex-Containers
• space-around: Alle Elemente werden verteilt, der mögliche Abstand ist sowohl zwischen den Elementen als auch zum Eltern-Container
• initial:
• inherit:

Anordnung von Elementen mit align-content ansehen …

.flex-container {
  display: flex;
  flex-flow: row wrap;
  height: 7em;
}

.start  {
  align-content: flex-start;
}
 
.mittig {
  align-content: center;
}
 
.ende {
  align-content: flex-end;
}

Der Flex-Container erhält eine Höhe von 7em. Die flex-items erhalten nun eine feste Höhe von 1em, da sie ansonsten die gesamte Querachse einnehmen würden.

ansehen …

Beachten Sie: align-content hat nur in Verbindung mit flex-wrap:wrap (oder wrap-reverse) eine Wirkung.

align-items

Die Eigenschaft align-items legt fest, wie die einzelnen flexiblen Elemente entlang der Querachse angeordnet werden. Im Gegensatz zu justify-content geht es hier meist um die vertikale Anordnung, z. B. von Bildern.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Folgende Angaben sind möglich:

• stretch: (Standardwert) Alle Elemente werden gleichmäßig verteilt, ein möglicher Abstand zwischen den Elementen und nach dem letzten Element ist gleich
• flex-start: Alle Elemente werden oben angeordnet
• flex-end: Alle Elemente werden unten angeordnet
• center: Alle Elemente werden mittig angeordnet, ein möglicher Abstand ist oben und unten
• baseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtet
• initial
• inherit

Anordnung von Elementen mit align-items ansehen …

section {
  display: flex;
  justify-content: space-around;
}
 
.oben  {
  align-items: flex-start;
}
 
.mittig {
  align-items: center;
}
 
.unten {
  align-items: flex-end;
}

ansehen …

Beachten Sie: Wenn Sie den flexiblen Elementen keine feste Höhe und in der Eigenschaft align-items keinen Wert zuweisen, passt der Standardwert stretch die Höhe aller flexiblen Elemente an das größte Schwesterelement an.

Beachten Sie: Der Internet Explorer hat in den Versionen 10 und 11 einen Bug, der flexible Elemente über den Flex-Container herausragen lässt, wenn zuwenig Platz vorhanden ist. Eine Angabe von max-width: 100% löst das Problem..

Siehe auch: CSS/Tutorials/Inhalte zentrieren

align-self

Durch die Eigenschaft align-self können Sie eine Ausnahme der Anordnung der flexiblen Elemente festlegen. Dabei bekommt das flexible Element mit align-self eine andere Eigenschaft als die anderen Schwesterelemente, die durch die Eigenschaft align-items des Eltern-Containers angeordnet werden.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Folgende Angaben sind möglich:

• auto: (Standardwert) Wert wird vom Elternelement übernommen
• stretch: Element wird gleichmäßig verteilt
• center: Element wird mittig angeordnet
• flex-start: Element wird oben angeordnet
• flex-end: Element wird unten angeordnet
• baseline: Element wird an der Grundlinie (baseline) ausgerichtet
• initial
• inherit

Anordnung von Elementen mit align-self ansehen …

section {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
 
#ausnahme {     
  align-self: flex-end;
}

ansehen …

Spalten (gutter) mit gap

Sie können Flex-Items mit margin einen Abstand zu den anderen Flex-Items geben – dieser Abstand besteht dann aber auch am Rand des Flex-Containers. Deshalb wurde im Grid Layout die Eigenschaft grid-gap eingeführt, die Spalten (englisch: gutter) zwischen den einzelnen Rasterzellen ermöglichte.

Diese Eigenschaft wurde nun unter dem Namen gap auch für Flexbox und ein Mehrspaltenlayout mit columns standardisiert. Sie ist die zusammenfassende Eigenschaft der Eigenschaften row-gap und column-gap.

• 
• 
• 
• 
• 

Details: caniuse.com

Spalten mit gap ansehen …

.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 1em 2em;
  border: 2px dotted;
}

.flex-item {
  flex: 1;
}

In diesem Beispiel wurde auf den Rand mit margin verzichtet. Stattdessen werden mit gap: 1em; Spalten zwischen den Flex-Items festgelegt.

ansehen …

Vergleiche: CSS/Tutorials/Grid/Ausrichtung von Grid-Items#Spalten (gutter) mit gap

← Flex-Items

Einstieg in Flexbox
(Übersicht)

Feststehender Footer →