Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Tutorials/Flexbox/Ausrichtung

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

Informationen zu diesem Text

Lesedauer
15min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
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.

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


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:


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
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
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 Firefox > 63 unterstützt.[2]

  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer

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.

Quellen[Bearbeiten]

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