CSS Referenzhandbuch

CSS @Regeln (RULES)

Vollständiges Verzeichnis der CSS-Attribute

CSS3 flex-shrink Eigenschaft CSS3 flex-flow Eigenschaft

CSS3 flex-Verwendung und Beispiel für die Eigenschaft grow

flex-Die CSS-Eigenschaft grow bestimmt die Art und Weise, wie Flex-Elemente im Vergleich zu anderen Elementen im Flex-Container wachsen.

Die nachstehende Tabelle enthält die Anwendungsbeschreibungen und Versionshistorie dieser Eigenschaft sowie die Verwendungssyntax in JavaScript-Skripten.

Standardwert:	0
Geeignet für:	Elastische Artikel
Vererbung:	Nein
Animierbar:	Ja.Bitte beziehen Sie sich auf: Animationseigenschaften.
Version:	CSS3neue Funktion
JavaScript-Syntax:	object.style.flexGrow="1"

flex-Syntax für die Verwendung von grow

Die Syntax dieser Eigenschaft ist wie folgt:

flex-grow:　number　|　initial　|　inherit

Die folgenden Beispiele zeigen, wie flex-grow-Eigenschaft.

Beispiel

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-grow:　1;　/*　Safari　6.1+　*/
　　　　flex-grow:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-grow:　3;　/*　Safari　6.1+　*/
　　　　flex-grow:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-grow:　5;　/*　Safari　6.1+　*/
　　　　flex-grow:　5;
}

Testen Sie heraus‹/›

Eigenschaftswert

Die nachstehende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
number	Eine positive Zahl, die die Elastizität des Elastizitätsprojekts bestimmtElastische ZunahmeKoeffizient. Der Standardwert ist 0. Negative Werte sind ungültig.
initial	Diese Eigenschaft auf ihren Standardwert setzen.
inherit	Wenn angegeben, wird das verknüpfte Element die Eigenschaft flex des Elternelements verwenden-Werte der Eigenschaft grow.

Browserkompatibilität

flex-Kompatibilität der Browser für das grow-Eigenschaft, die Zahlen in der nachstehenden Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3Mehrspalten-Layout.

Zusammenhängende Eigenschaften:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-shrink Eigenschaft CSS3 flex-flow Eigenschaft