CSS/Tutorials/Flexbox/Ausrichtung

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Flexbox
Wechseln zu: Navigation, Suche

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.


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.


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.

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.

Siehe auch: CSS/Tutorials/Ausrichtung/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.

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.

Browserunterstützung
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

Quellen

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Flexbox/Ausrichtung&oldid=85993“