CSS-Eigenschaft: align-content, Kategorien: Bildschirmdarstellung (allgemein), Flexible Box Layout (CSS 3)
Abstände und Ausrichtung von Flexbox-Elementen auf der Y-Achse
Steuert die Abstände und Ausrichtung von Flexbox-Elementen auf der Y-Achse.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Abstände und Ausrichtung von Flexbox-Elementen auf der Y-Achse |
| stretch |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Flexible Box Layout (CSS 3):
- Aktuelle Seite: align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- clip
- column-count
- column-fill
- column-width
- columns
- cursor
- direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- justify-content
- min-height
- min-width
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- resize
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- visibility
- zoom
Folgendes ist beim Einsatz von align-content zu beachten:
align-content
definiert, wie Abstände zwischen Flexbox-Elementen verteilt werden.- Zu beachten ist:
- Greift nur, wenn die Flexbox selber höher ist als die Menge der darin enthaltenen Flexbox-Elemente.
- Greift nur, wenn in der Flexbox mehrere Zeilen vorhanden sind. Bei einzelnen Zeilten hat
align-content
keine Auswirkung. Damit mehrere Zeilen entstehen, muss der Zeilenumbruch »aktiviert« sein. Dies wird über die CSS-Eigenschaftflex-wrap
und dem Parameterwrap
gesteuert. Daflex-wrap
den Standardwertnowrap
hat, musswrap
expliziet definiert sein.
- Für
align-content
stehen folgende Parameter zur Verfügung:flex-start
: Alle Elemente werden oben angeordnet. Überschüssiger Leerraum befindet sich komplett unter den Flexbox-Elementen.flex-end
: Alle Elemente werden am unteren Rand der Flexbox angeordnet. Überschüssiger Leerraum wird über allen Flexbox-Elementen dargestellt.center
: Alle Zeilen werden mittig angezeigt. Der Leerraum verteilt sich zu gleichen Teilen über und unter den Flexbox-Elementen.space-between
: Die einzelnen Zeilen werden gleichmäßig auf der Y-Achse verteilt, der Leerraum wird zwischen den einzelnen Zeilen angezeigt. Die erste Zeile wird am oberen Rand, die letzte Zeile am unteren Rand der Flexbox angezeigt.space-around
: Hier werden die einzelnen Zeilen ebenfalls gleichmäßig in der Flexbox verteilt. Allerdings wird überschüssiger Leerraum auch über der ersten und unter der letzten Zeile angezeigt. Dabei entspricht der Abstand zum Rand der Flexbox der Hälfte, wie er zwischen den einzelnen Zeilen ist.stretch
(Standardwert): Verteilt alle Zeilen gleichmäßig auf die Flexbox, dabei werden die einzelnen Flexbox-Elemente so weit ausgedehnt, dass die komplette Flexbox gefüllt ist. Beistretch
werden in der Flexbox auf der Y-Achse keine Leerräume angezeigt.
- Wird von aktuellen Webbrowser in der Standardschreibweise unterstützt. Lediglich der Safari
benötigt das Vendor-Präfix
-webkit-
.
Hinweis: Laut unterschiedlichen Quellen unterstützt der IE 11 das Flexbox-Modul. Ob er auchalign-content
unterstützt, und in welchem Kontext, prüfen wir noch.- Der Support von mobilen Browsern ist je nach Browser noch unzuverlässig (Stand: August 2014).
- Sonderfall Internet Explorer 10:
-ms-flex-line-pack
ist die Entsprechung zualign-content
für den IE 10. Der Internet Explorer 10 unterstützt Flexbox-Eigenschaften nur mit dem Vendor-Präfix-ms-
. (siehe auch: CSS property '-ms-flex-line-pack')- Allerdings, wie in Falle von
-ms-flex-line-pack
, weicht die Schreibweise für den IE10 von der W3C-Standard-Schreibweisealign-content
ab. - Vergleichbares gilt für andere Flexbox-Eigenschaften. Alle benötigen den Vendor-Präfix
-ms-
, fast alle Eigenschaften haben eine abweichende Schreibweise vom Standard. - Unter Aktualisierungen für das "Flexbox"-Layout: IE 10 => IE 11 werden die Unterschiede beschrieben. Unter Flexible Box-Layout (Flexbox) in Internet Explorer 10 ist die entsprechende Referenz zu finden.
- Auch der Mozilla Firefox unterstützte das Flexbox Modul bis zur Version 21 mit einer abweichenden Syntax. Seit der Version 22 unterstützt Firefox die Standardschreibweise, allerdings mit Einschränkungen, der vollständige Support wird ab der Version 28 angegeben. Da der Firefox 22 bereits eine Weile zurückliegt, wird hier nicht weiter auf die alte Schreibweise eingegangen. Eine Einführung in das Flexbox-Modul mit der alten Syntax ist unter Quick hits with the Flexible Box Model (Paul Irish) zu finden.
Hinweis:
Eine allgemeine Einführung in das CSS3 Flexbox Modul ist bei den Webkrauts zu finden: CSS3 Flexbox: Ablösung für Float-Layouts (Dezember 2012)
Weitere Quelltextbespiele sind unter http://www.css-wiki.com/listings/flexbox.html zu finden. Diese sind im Rahmen eines Artikels über das CSS3 Flexbox Modul entstanden, der Artikel ist in der SCREENGUIDE Jahrgang 2014 :: Ausgabe 22 erschienen.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS3 |
|
|
|
|
|
Weiterführende Informationen zu align-content:
- W3C Spezifikation:
http://www.w3.org/TR/css3-flexbox/#align-content - Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content - Internet Explorer Developer Center:
http://msdn.microsoft.com/de-de/library/ie/jj127302%28v=vs.85%29.aspx
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
additive-symbols - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
align-items
Beispiele
HTML:
<div id="example-1">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
div {
border: 4px solid #cccccc;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
min-height: 18em;
}
div p {
background-color: #90EE90;
border: 1px solid darkblue;
padding: 0.25em;
font-size: 2em;
margin: 0;
}
/* Ohne eine Angabe von align-content greift der Standardwert stretch. Flexbox-Elemente werden auf die ganze Flexbox ausgehent. */
Beispiel Nr. 1 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
HTML:
<div id="example-2">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
#example-2 {
align-content: flex-start;
}
/* flex-start läßt alle Zeilen am oberen Rand der Flexbox erscheinen. */
Beispiel Nr. 2 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
HTML:
<div id="example-3">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
#example-3 {
align-content: flex-end;
}
/* flex-end sorgt dafür, dass vorhandener Leerraum über den Zeilen angezeigt wird. */
Beispiel Nr. 3 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
HTML:
<div id="example-4">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
#example-4 {
align-content: center;
}
/* center bewirkt die mittige Darstellung aller Zeilen auf der Y-Achse. */
Beispiel Nr. 4 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
HTML:
<div id="example-5">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
#example-5 {
align-content: space-between;
}
/* space-between bewirkt, dass überschüssiger Leerraum zwischen den Flexbox-Elementen dargestellt wird. */
Beispiel Nr. 5 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
HTML:
<div id="example-6">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
#example-6 {
align-content: space-around;
}
/* space-around ist ähnlich wie space-between, nur das noch vor und nach den Flexbox-Elementen zum Rand der Flexbox
noch Leerraum angezeigt wird. */
Beispiel Nr. 6 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
HTML:
<div id="example-7">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
<p>fünf</p>
<p>sechs</p>
<p>sieben</p>
<p>acht</p>
<p>neun</p>
<p>zehn</p>
</div>
CSS:
#example-7 {
align-content: space-around;
}
#example-7 p {
-ms-flex: 1 1 auto;
flex-grow: 1;
}
/* Dieses Beispiel zeigt, wie über flex-grow: 1 die einzelnen Zeilen auf die komplette Breite ausgedehnt wird. Dient nur als Ergänzung,
weitere Erkärung zu flex-grow ist entsprechend dort zu finden. */
Beispiel Nr. 7 So sieht's aus:
eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!