CSS3 flex-shrink-Eigenschaft Verwendung und Beispiel

flex-Die shrink CSS-Eigenschaft bestimmt die Schrumpfweise des flex-Elements im Vergleich zu anderen Elementen im flex-Container.

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

flex-shrink-Syntax

Die Syntax dieser Eigenschaft ist wie folgt：

flex-shrink:　number　|　initial　|　inherit

Der folgende Beispiel zeigt, wie man flex verwendet-shrink-Eigenschaft.

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

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Browserkompatibilität

flex-shrink-Eigenschaft die Kompatibilität 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.

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Anleitungen：CSS3Mehrspaltenlayout。

Verwandte Eigenschaften：align-content，align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-wrap，justify-content，min-height，min-width，order。