CSS3 flex-shrink 属性使用方法及示例

flex-shrink CSS属性指定flex项目相对于flex容器内其他项目的收缩方式。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

flex-shrink的使用语法

此属性的语法如下：

flex-shrink: number | initial | inherit

المثال التالي يوضح كيفية استخدام خاصية flex-shrink.

.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;
}

قيمة الخاصية

جدول يصف قيم هذه الخاصية.

تطابق المتصفحات

تطابق متصفحات الـ flex-shrink، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

قراءة المزيد

يرجى الرجوع إلى التعليمات التالية:تصميم الصفحات المتعددة باستخدام CSS3。

خصائص مرتبطة: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。