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

Ausrichtung entlang der Querachse

Die folgende Beschreibung gilt für eine Flexbox mit flex-direction:row. In einer Flexbox, die spaltenweise ausgerichtet ist, müssen Sie die Begriffe Zeile und Breite gegen Spalte und Höhe austauschen. Sofern möglich, werden wir einfach von Reihen und ihrer Größe sprechen.

Beim Darstellen einer Flexbox bestimmt der Browser zunächst die Ausgangsgröße der einzelnen flexiblen Elemente. Das ist ein komplexer Prozess, der die Größe des Flex-Containers und die Breiten- und Höhen-Restriktionen für Container und Elemente beachtet. Falls die Flexbox umbrechen kann (flex-wrap: wrap), werden die Elemente auf Grund dieser Ausgangsgröße auf Reihen aufgeteilt. In einer einreihigen Flexbox ist die Höhe dieser Reihe immer identisch mit der Höhe der Flexbox, in einer mehrzeiligen Flexbox bestimmen die flexiblen Elemente, die in einer Zeile liegen, ihre Höhe.

Es gibt nun zwei Arten von ungenutztem Platz in einer solchen Zeile:

  1. Innerhalb einer Reihe, wenn die Reihe größer ist als ein flexibles Element
  2. Außerhalb der Reihen, wenn die Größe aller Reihen insgesamt kleiner ist als die Querachsengröße der Flexbox (das kann vorkommen, wenn diese Größe durch andere Einflüsse definiert wird).

Die Eigenschaften align-content und align-items legen fest, wie mit diesem Platz umgegangen werden soll.

align-content

Die Eigenschaft align-content legt fest, wie die Reihen einer mehrzeiligen Flexbox im Flexbox-Container verteilt werden sollen. In einer einzeiligen Flexbox (flex-wrap: nowrap) ist die Eigenschaft ohne Funktion, die einzige vorhandene Reihe ist immer so groß wie der Container.

Folgende Angaben sind möglich:

  • normal: (Standardwert) Entspricht bei Flexboxen dem Wert stretch. Der Standardwert ist deshalb nicht stretch, weil align-content auch für andere Layouts nutzbar ist.
  • stretch: Der freie Platz wird gleichmäßig auf die Reihen verteilt, d.h. die Reihen selbst werden größer und die darin enthalten flexiblen Elemente vergrößern sich entsprechend. Flexible Elemente, für die max-height bzw. max-width gesetzt wurde, überschreiten diese Größe aber nicht.
  • start (flex-start): Die Reihen werden am Beginn der Querachse angeordnet, der freie Platz befindet sind dahinter.
  • end (flex-end): Die Reihen werden am Ende der Querachse angeordnet, der freie Platz befindet sich davor
  • center: Alle Reihen werden in der Mitte der Querachse angeordnet, der freie Platz wird zu gleichen Teilen davor und dahinter angeordnet
  • space-between: Der freie Platz wird gleichmäßig zwischen den Reihen aufgeteilt. Vor der ersten und nach der letzten Reihe befindet sich kein Leerraum, sie grenzen an die jeweilige Seite des Flex-Containers an
  • space-around: Der freie Platz wird vor, zwischen und hinter den Reihen aufgeteilt. Der Abstand vor der ersten Reihe und nach der letzten Reihe ist zusammen so groß wie der Abstand zwischen zwei Reihen.
  • space-evenly: Der freie Platz wird gleichmäßig vor, zwischen und hinter den Reihen aufgeteilt. Der Abstand vor der ersten Reihe und nach der letzten Reihe ist genauso groß wie der Abstand zwischen zwei Reihen.
  • baseline
    first baseline
    last baseline: Gibt an, dass die Flexbox selbst an der Baseline-Ausrichtung
Empfehlung: Die Namen flex-start und flex-end stammen aus der Zeit vor der Einführung des Grid-Layouts und werden heute als historisch bedingte Synonyme zu start und end aufgefasst. Sie sind nicht missbilligt, das mag aber irgendwann kommen und Sie sollten nur start und end verwenden.
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.


align-items

Die Eigenschaft align-items legt fest, wie die einzelnen flexiblen Elemente innerhalb der Flexbox-Reihe 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:

  • normal: (Standardwert) Entspricht im Flexbox-Layout dem Wert stretch.
  • stretch: Die Elemente werden vergrößert, so dass sie innerhalb der Reihe den Platz in Richtung der Querachse vollständig ausfüllen, sofern sie keine Eigenschaften haben, die das verhindern (wie z. B. height).
  • start (flex-start): Die Elemente werden in ihrer Reihe so angeordnet, dass sie dem Anfang der Querachse am nächsten liegen.
  • end (flex-end): Die Elemente werden in ihrer Reihe so angeordnet, dass sie dem Ende der Querachse am nächsten liegen.
  • center: Die Elemente werden in ihrer Reihe in Richtung der Querachse zentriert
  • baseline
    first baseline
    last baseline: Die Elemente werden an einer Baseline ihrer Textinhalte ausgerichtet. baseline und first baseline sind dabei identisch. Die Angabe von baseline bzw. first baseline richtet die flexiblen Elemente so aus, dass ihre ersten Baselines auf einer Höhe ausgerichtet sind. Durch Angabe von last baseline werden die flexiblen Elemente an Hand ihrer letzten Baseline ausgerichtet.
Empfehlung: Die Namen flex-start und flex-end stammen aus der Zeit vor der Einführung des Grid-Layouts und werden heute als historisch bedingte Synonyme zu start und end aufgefasst. Sie sind nicht missbilligt, das mag aber irgendwann kommen und Sie sollten nur start und end verwenden.
Anordnung von Elementen mit align-items ansehen …
section {
  display: flex;
  justify-content: space-around;
}
 
.oben  {
  align-items: start;
}
 
.mittig {
  align-items: center;
}
 
.unten {
  align-items: end;
}
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 Geschwisterelement an.

Siehe auch:

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

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.
Vergleiche: CSS/Tutorials/Grid/Ausrichtung von Grid-Items#Spalten (gutter) mit gap

Weblinks

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