Beispiel
Center , um die Ausrichtungen für alle Elemente des flexiblen <div> Element:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Versuch es selber " Definition und Verwendung
Die align-Elemente-Eigenschaft gibt die Standardausrichtung für Elemente im Inneren des flexiblen Behälters.
Tip: Verwenden Sie die align-self - Eigenschaft jedes Element der align-Elemente - Eigenschaft außer Kraft zu setzen.
| Standardwert: | stretch |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.alignItems="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-items | 21.0 | 11.0 | 20,0 | 9.0 7.0 -webkit- | 12.1 |
CSS-Syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| stretch | Standard. Die Artikel werden gestreckt, um den Behälter zu passen | Spiel es " |
| center | Die Artikel werden in der Mitte des Behälters positioniert | Spiel es " |
| flex-start | Einzelteile werden zu Beginn des Behälters positioniert | Spiel es " |
| flex-end | Die Elemente werden am Ende des Behälters positioniert | Spiel es " |
| baseline | Einzelteile werden an der Grundlinie des Behälters positioniert | 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-content property
CSS Referenz: align-self property - align-self property
HTML - DOM - Referenz: alignItems property