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

المراجعة الحالية بتاريخ 08:39، 25 يوليو 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/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر.
 * صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.