الفرق بين المراجعتين لصفحة: «CSS/flex-grow»

مراجعة 12:26، 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-flow، وflex-shrink، وflex-wrap.
صفحة كل من الخاصيات width، وheight المسؤولة عن تحديد أبعاد العنصر.
صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

مصادر ومواصفات

مواصفة CSS Flexible Box Layout Module.

@@ سطر 90: / سطر 90: @@
 </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/flex|flex]]</code> صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/flex-basis|flex-basis]]</code>، و <code>[[CSS/flex-direction|flex-direction]]</code>، و<code>[[CSS/flex-flow|flex-flow]]</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> التي تصف كيف يجب أن يتموضع العنصر في المستند.