CSS Referenzhandbuch

CSS @Regel(RULES)

Vollständiges Verzeichnis der CSS-Attribute

CSS3 flex-basis Eigenschaft CSS leer-cells Eigenschaft

CSS3 Verwendung und Beispiel für die Eigenschaft flex

Die CSS-Eigenschaft flex legt die Bestandteile der Elastizitätslänge fest. Es wird verwendet, um gleichzeitig zuflex-grow,flex-shrinkundflex-basisKurzschreibweise der Eigenschaft.

Die folgende Tabelle enthält die Anwendungsbeschreibungen und Versionshistorie dieser Eigenschaft sowie deren Verwendung in JavaScript-Skripten.

Standardwert:	0 1 auto; Alle Eigenschaften anzeigen
Geeignet für:	Elastische Elemente
Vererbung:	keine
Animierbar:	Ja, da jeder Attribut der Kurzschrift animierbar ist.Bitte beziehen Sie sich auf: Animationseigenschaften.
Version:	CSS3neue Funktion
JavaScript-Syntax:	object.style.flex="1"

Syntax der Verwendung von flex

Die Syntax dieser Eigenschaft ist wie folgt:

flex:　[　flex-grow　flex-shrink　flex-basis　]　|　none　|　auto　|　initial　|　inherit

Die folgenden Beispiele demonstrate, wie die flex-Eigenschaft verwendet wird.

Beispiel

.flex-container　{
　　　　-webkit-flex:　1;　/*　Safari　6.1+　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　　　　　flex:　1;　
}

Testen Sie heraus‹/›

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
flex-grow	Gibt den Elastizitätsvergrößerungsfaktor oder die positive Elastizität des elastischen Elements an.
flex-shrink	Gibt den Elastizitätsverkleinerungsfaktor oder die negative Elastizität des elastischen Elements an.
flex-basis	Gibt die Anfangsgröße des elastischen Elements an.
none	Äquivalent zu flex: 0 0 auto.
auto	Äquivalent zu flex:1 1 auto.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird der flex-Wert des übergeordneten Elements verwendet.

Browserkompatibilität

Kompatibilität der flex-Eigenschaft der Browser, die Nummern in der folgenden Tabelle stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

Weitere Lesung

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3Mehrfachspaltenlayout.

CSS3 flex-basis Eigenschaft CSS leer-cells Eigenschaft