الخاصية flex
الخاصية flex المختصرة في CSS تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات flex-grow و flex-shrink و flex-basis.
بطاقة الخاصية
| القيمة الابتدائية | لكل قيمة مختصرة:
|
|---|---|
| تُطبَّق على | عناصر flex. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | لكل قيمة مختصرة:
|
/* القيم الأساسية */
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 في التجربة الحية الآتية:
لا تتقلص عناصر 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. - صفحة الخاصية
positionالتي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مواصفة CSS Flexible Box Layout Module.