الفرق بين المراجعتين لصفحة: «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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>flex-grow</code>}}</noinclude>
-الخاصية <code>flex-grow</code> في CSS تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.<syntaxhighlight lang="css">
+الخاصية <code>flex-grow</code> في CSS تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.
-/* <number> قيم عددية */
-flex-grow: 3;
-flex-grow: 0.6;
-/* قيم عامة */
-flex-grow: inherit;
-flex-grow: initial;
-flex-grow: unset;
-</syntaxhighlight>
+== بطاقة الخاصية ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 29: / سطر 20: @@
 |كما حُدِّدَت.
-|}
+|}<syntaxhighlight lang="css">
+/* <number> قيم عددية */
+flex-grow: 3;
+flex-grow: 0.6;
+/* قيم عامة */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 80: / سطر 81: @@
 تقبل الخاصية <code>flex-grow</code> قيمةً واحدةً ألا وهي رقمٌ دون واحدة.
-=== القيمة <code>[[CSS/number|<number>]]</code> ===
+===  <code>[[CSS/number|<number>]]</code> ===
 عدد صحيح موجب يحدد كيف يكون تمدد أحد عناصر flex نسبةً إلى بقية عناصر flex، القيمة الافتراضية هي <code>0</code>.
@@ سطر 88: / سطر 89: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <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> التي تصف كيف يجب أن يتموضع العنصر في المستند.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-grow CSS Flexible Box Layout Module].