Beispiel
Ordnen Sie die Elemente des flexiblen <div> Element mit Platz zwischen den Zeilen:
// Code for Safari 7.0+
document.getElementById("main").style.WebkitAlignContent = "space-between";
// Standard syntax
document.getElementById("main").style.alignContent
= "space-between"; Versuch es selber " Definition und Verwendung
Die alignContent Eigenschaft richtet die flexiblen Elemente des Containers , wenn die Elemente auf der Querachse nicht den gesamten verfügbaren Speicherplatz verwenden (vertically) .
Tipp: Verwenden Sie die justifyContent Eigenschaft die Elemente auf der Hauptachse auszurichten (horizontally) .
Hinweis: Es müssen mehrere Zeilen von Elementen für diese Eigenschaft sein um einen Effekt zu haben.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von Webkit geben Sie die erste Version, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| alignContent | 21.0 | 11.0 | 28.0 | 7.0 Webkit | 12.1 |
Hinweis: Safari eine Alternative unterstützen, die WebkitAlignContent Eigenschaft.
Syntax
Bringen Sie die alignContent Eigenschaft:
object .style.alignContentStellen Sie die alignContent Eigenschaft:
object .style.alignContent="stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| stretch | Standardwert. Die Artikel werden gestreckt, um den Behälter passen |
| center | Die Artikel werden in der Mitte des Behälters positioniert |
| flex-start | Einzelteile werden zu Beginn des Behälters positioniert |
| flex-end | Die Elemente werden am Ende des Behälters positioniert |
| space-between | Die Artikel werden mit Raum zwischen den Linien positioniert |
| space-around | Einzelteile werden vor mit Raum positionieren, zwischen und nach den Zeilen |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben |
Technische Details
| Standardwert: | strecken |
|---|---|
| Rückgabewert: | Ein String, repräsentiert das ALIGN-Inhaltseigenschaft eines Elements |
| CSS Version | CSS3 |
Verwandte Seiten
CSS - Referenz: align-content property
HTML - DOM - ART - Referenz: alignItems property
HTML - DOM - ART - Referenz: alignSelf property
HTML - DOM - ART - Referenz: justifyContent property
<Style - Objekt