CSS/Tutorials/Flexbox/Ausrichtung
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.
Inhaltsverzeichnis
Ausrichtung entlang der Hauptachse[Bearbeiten]
justify-content[Bearbeiten]
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
.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.
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 gleichflex-start: Alle Elemente werden am Start der Querachse angeordnetflex-end: Alle Elemente werden am ende der Querachse angeordnetcenter: Alle Elemente werden in der Mitte der Querachse angeordnetspace-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-Containersspace-around: Alle Elemente werden verteilt, der mögliche Abstand ist sowohl zwischen den Elementen als auch zum Eltern-Containerinitial:inherit:
.flex-container {
display: flex;
flex-flow: row wrap;
height: 7em;
}
.start {
align-content: flex-start;
}
.mittig {
align-content: center;
}
.ende {
align-content: flex-end;
}
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.
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 gleichflex-start: Alle Elemente werden oben angeordnetflex-end: Alle Elemente werden unten angeordnetcenter: Alle Elemente werden mittig angeordnet, ein möglicher Abstand ist oben und untenbaseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtetinitialinherit
section {
display: flex;
justify-content: space-around;
}
.oben {
align-items: flex-start;
}
.mittig {
align-items: center;
}
.unten {
align-items: flex-end;
}
stretch die Höhe aller flexiblen Elemente an das größte Schwesterelement an.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.
Details: caniuse.com
Folgende Angaben sind möglich:
auto: (Standardwert) Wert wird vom Elternelement übernommenstretch: Element wird gleichmäßig verteiltcenter: Element wird mittig angeordnetflex-start: Element wird oben angeordnetflex-end: Element wird unten angeordnetbaseline: Element wird an der Grundlinie (baseline) ausgerichtetinitialinherit
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]
.flex-container {
display: flex;
flex-flow: row wrap;
gap: 1em 2em;
border: 2px dotted;
}
.flex-item {
flex: 1;
}
gap: 1em; Spalten zwischen den Flex-Items festgelegt.Quellen[Bearbeiten]
- ↑ Philip Walton: Column flex items set to align-items:center overflow their container
- ↑ MDN: gap (grid-gap)
