CSS/Tutorials/Flexbox/Ausrichtung

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Flexbox(Weitergeleitet von Justify-content)
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.

Ausrichtung entlang der Hauptachse[Bearbeiten]

justify-content[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

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


Beispiel: 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[Bearbeiten]

align-content[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

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:


Beispiel: 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[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

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


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.[1].

Siehe auch: CSS/Tutorials/Inhalte zentrieren


align-self[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

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
Beispiel: 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[Bearbeiten]

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.

Heute (Stand Oktober 2018) wird sie jedoch noch von keinem Browser außer FF63 unterstützt.[2]

  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer
Beispiel: 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.

Quellen[Bearbeiten]

  1. Philip Walton: Column flex items set to align-items:center overflow their container
  2. MDN: gap (grid-gap)