الخاصية flex-grow
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية flex-grow
في CSS تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.
بطاقة الخاصية
القيمة الابتدائية | 0
|
---|---|
تُطبَّق على | عناصر flex. |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | كما حُدِّدَت. |
/* <number> قيم عددية */
flex-grow: 3;
flex-grow: 0.6;
/* قيم عامة */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
أمثلة
في المثال الآتي، حددنا تمدد العناصر A و B و C و F باستخدام القاعدة flex-grow: 1
، بينما كان تمدد العناصر D و E مساويًا إلى 2
:
<div id="content">
<div class="box" style="background-color: salmon;">A</div>
<div class="box" style="background-color: lightblue;">B</div>
<div class="box" style="background-color: gold;">C</div>
<div class="box1" style="background-color: crimson;">D</div>
<div class="box1" style="background-color: lightgreen;">E</div>
<div class="box" style="background-color: cadetblue;">F</div>
</div>
شيفرة CSS:
#content {
display: flex;
}
div {
padding: 0.25em;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 29.0 | 20.0 | 11 | 12.5 | 9.0 |
الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit-
أو -ms-
).
البنية العامة
تقبل الخاصية flex-grow
قيمةً واحدةً ألا وهي رقمٌ دون واحدة.
<number>
عدد صحيح موجب يحدد كيف يكون تمدد أحد عناصر flex نسبةً إلى بقية عناصر flex، القيمة الافتراضية هي 0
.
البنية الرسمية
flex-grow: <number>;
انظر أيضًا
- صفحة الخاصية
flex
صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي:flex-basis
، وflex-direction
، وflex-flow
، وflex-shrink
، وflex-wrap
. - صفحة كل من الخاصيات
width
، وheight
المسؤولة عن تحديد أبعاد العنصر. - صفحة الخاصية
position
التي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مواصفة CSS Flexible Box Layout Module.