الخاصية flex-grow

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية 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 التي تصف كيف يجب أن يتموضع العنصر في المستند.

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