Beispiel
Pack-Linien in Richtung der Mitte des flexiblen Behälter:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Versuch es selber " Definition und Verwendung
Die align-content-Eigenschaft ändert das Verhalten der Flex-Wrap-Eigenschaft. Es ist ähnlich wie Punkte auszurichten, sondern flex Elemente auszurichten, richtet es Flexleitungen.
Tipp: Verwenden Sie die Rechtfertigung-Inhalt Eigenschaft die Elemente auf der Hauptachse auszurichten (horizontally) .
Hinweis: Es müssen mehrere Linien von Produkten für diese Eigenschaft sein um einen Effekt zu haben.
| Standardwert: | stretch |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.alignContent="center" Try it |
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 | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
CSS-Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| stretch | Standardwert. Linien strecken, um den verbleibenden Platz zu nehmen | Spiel es " |
| center | Leitungen sind in Richtung der Mitte des flexiblen Behälter gepackt | Spiel es " |
| flex-start | Linien werden in Richtung Anfang des flex Behälter gepackt | Spiel es " |
| flex-end | Linien werden gegen Ende des flexiblen Behälter gepackt | Spiel es " |
| space-between | Linien werden in der flexiblen Behälter gleichmäßig verteilt | Spiel es " |
| space-around | Linien werden in der Flex-Container, mit halber Größe Räume an beiden Enden gleichmäßig verteilt | Spiel es " |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | Spiel es " |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Verwandte Seiten
CSS Referenz: align-items property
CSS Referenz: align-self property - align-self property
CSS Referenz: justify-content property - justify-content property
HTML - DOM - Referenz: alignContent property