CSS/flex

الخاصية flex المختصرة في CSS تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات flex-grow و flex-shrink و flex-basis.

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: flex-grow: 0 flex-shrink: 1 flex-basis: auto
تُطبَّق على	عناصر flex.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	لكل قيمة مختصرة: flex-grow: كما حُدِّدَت. flex-shrink: كما حُدِّدَت. flex-basis: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

/* القيم الأساسية */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* القيم العامة */
flex: inherit;
flex: initial;
flex: unset;

يضبط المطورون قيمة الخاصية flex في أغلبية الأوقات إلى إحدى القيم auto أو initial أو none أو رقم موجب دون واحدة؛ ولترى تأثير تلك القيم فجرِّب إعادة تحكم حاويات flex في التجربة الحية الآتية:

auto

auto

auto

auto

initial

initial

auto

auto

none

initial

none

none

4

2

1

لا تتقلص عناصر flex افتراضيًا إلى أقل من أبعاد المحتوى الذي فيها، ويمكن تغير ذلك بضبط الخاصية min-width أو min-height.

أمثلة

انظر التجربة الحيّة أعلاه.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	29.0	20.0	11	12.5	9.0

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية flex قيمةً واحدةً أو قيمتين أو ثلاث قيم.

إذا حددنا قيمةً واحدةً فهي إما:

• رقمٌ دون واحدة من النوع <number>، وسيُفسَّر على أنَّه قيمة <flex-grow>.
• قيمةٌ صالحةٌ لتُستعمَل مع الخاصية width، وستُفسَّر على أنها <flex-basis>.
• إحدى الكلمات المحجوزة none أو auto أو initial.

إذا حددنا قيمتين، فأوّل قيمة هي رقمٌ دون واحدة من النوع <number>، وسيُفسَّر على أنَّه <flex-grow>، أما ثاني قيمة فهي إما:

• رقمٌ دون واحدة من النوع <number>، وسيُفسَّر على أنَّه <flex-shrink>.
• قيمةٌ صالحةٌ لتُستعمَل مع الخاصية width، وستُفسَّر على أنها <flex-basis>.

أما إذا حددنا ثلاث قيم:

• أوّل قيمة يجب أن تكون رقمًا دون واحدة من النوع <number>، وستُفسَّر على أنَّه <flex-grow>.
• ثاني قيمة يجب أن تكون رقمًا دون واحدة من النوع <number>، وستُفسَّر على أنَّه <flex-shrink>.
• ثالث قيمة يجب أن تكون صالحةً لتُستعمَل مع الخاصية width، وستُفسَّر على أنها <flex-basis>.

<flex-grow>

تُحدِّد الخاصية flex-grow، وتكون من نوع البيانات <number>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي 0.

<flex-shrink>

تُحدِّد الخاصية flex-shrink، وتكون من نوع البيانات <number>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي 1.

<flex-basis>

تُحدِّد الخاصية flex-basis، ويمكن استعمال أيّة قيمة تقبلها الخاصية width أو height، وإذا أردنا ضبطها إلى 0 فيجب تحديد واحدة لتجنب تفسير هذه القيمة تفسيرًا مغلوطًا. القيمة الافتراضية لها (إن حُذِفَت) هي 0.

none

ستكون أبعاد العنصر وفقًا لخاصيتَي width و height التابعتين له، وهذه العناصر غير مرنة، إذ لا تتمدد ولا تتقلص في حاوية flex التابعة لها، وستُفسَّر هذه القيمة على أنها ‎0 0 auto.

auto

ستكون أبعاد العنصر وفقًا لخاصيتَي width و height التابعتين له، لكن يمكن أن يتمدد ليملأ المساحة الفارغة في حاوية flex التابعة له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، وستُفسَّر هذه القيمة على أنها ‎1 1 auto.

initial

ستكون أبعاد العنصر وفقًا لخاصيتَي width و height التابعتين له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، لكن لن يتمدد ليملأ المساحة الفارغة، وستُفسَّر هذه القيمة على أنها ‎0 1 auto.

البنية الرسمية

flex:  none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

انظر أيضًا

• صفحة الخاصيات الفرعية التي تضبطها الخاصية flex وهي: flex-basis، و flex-direction، و flex-flow، وflex-grow، وflex-shrink، وflex-wrap.
• صفحة كل من الخاصيات width، وheight المسؤولة عن تحديد أبعاد العنصر.
• صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

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

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