الفرق بين المراجعتين ل"CSS/flex-grow"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| سطر 89: | سطر 89: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/flex|flex]]</code> صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/flex-basis|flex-basis]]</code>، و <code>[[CSS/flex-direction|flex-direction]]</code>، و<code>[[CSS/flex-shrink|flex-shrink]]</code>، و<code>[[CSS/flex-shrink|flex-shrink]]</code>، و<code>[[CSS/flex-wrap|flex-wrap]]</code>. | ||
| + | * صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و<code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر. | ||
| + | * صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-grow CSS Flexible Box Layout Module]. | * مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-grow CSS Flexible Box Layout Module]. | ||
مراجعة 12:21، 12 يوليو 2018
الخاصية 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-shrink، وflex-shrink، وflex-wrap. - صفحة كل من الخاصيات
width، وheightالمسؤولة عن تحديد أبعاد العنصر. - صفحة الخاصية
positionالتي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مواصفة CSS Flexible Box Layout Module.