CSS/flex

الخاصية flex المختصرة في CSS تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية 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.

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

أمثلة

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

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

الميزة	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'> ];

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

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