طريقة الاستخدام وامثلة على استخدام خصائص flex-grow في CSS3

خصائص flex-grow في CSS3 تحدد كيفية نمو العنصر الخاص بك مقارنة بالعناصر الأخرى في وحدة التدفق المرن.

الجدول أدناه يوضح وصف الاستخدام وتاريخ الإصدارات لهذا الخصائص، بالإضافة إلى استخدام الخصائص في لغة الجافاسكربت.

استخدام синтكس flex-grow

قواعد اللغة الخاصة بهذه الخاصية كالتالي:}}

flex-grow:　number　|　initial　|　inherit

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

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

قيمة الخاصية

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

توافق المتصفح

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

قراءة المزيد

يرجى الرجوع إلى التعليمات التالية:تخطيط الأعمدة المتعددة في CSS3。

الخصائص ذات الصلة: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。