الفرق بين المراجعتين لصفحة: «CSS/flex»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>flex</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>flex</code>}}</noinclude> | ||
الخاصية <code>flex</code> المختصرة في CSS تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات <code>[[CSS/flex-grow|flex-grow]]</code> و <code>[[CSS/flex-shrink|flex-shrink]]</code> و <code>[[CSS/flex-basis|flex-basis]]</code>.<syntaxhighlight lang="css"> | الخاصية <code>flex</code> المختصرة في CSS تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات <code>[[CSS/flex-grow|flex-grow]]</code> و <code>[[CSS/flex-shrink|flex-shrink]]</code> و <code>[[CSS/flex-basis|flex-basis]]</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | |||
|- | |||
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | |||
|لكل قيمة مختصرة: | |||
* <code>[[CSS/flex-grow|flex-grow]]</code>: <code>0</code> | |||
* <code>[[CSS/flex-shrink|flex-shrink]]</code>: <code>1</code> | |||
* <code>[[CSS/flex-basis|flex-basis]]</code>: <code>auto</code> | |||
|- | |||
! scope="row" |تُطبَّق على | |||
|عناصر flex. | |||
|- | |||
! scope="row" |قابلة للوراثة | |||
|لا | |||
|- | |||
!قابلة للتحريك | |||
|نعم | |||
|- | |||
! scope="row" |القيمة المحسوبة | |||
|لكل قيمة مختصرة: | |||
* <code>[[CSS/flex-grow|flex-grow]]</code>: كما حُدِّدَت. | |||
* <code>[[CSS/flex-shrink|flex-shrink]]</code>: كما حُدِّدَت. | |||
* <code>[[CSS/flex-basis|flex-basis]]</code>: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. | |||
|}<syntaxhighlight lang="css"> | |||
/* القيم الأساسية */ | /* القيم الأساسية */ | ||
flex: auto; | flex: auto; | ||
| سطر 35: | سطر 61: | ||
<div style="background-color: #F4F7F8; resize: horizontal; max-width: 100%; overflow: hidden; display: flex; margin: 1em; box-sizing: border-box;"><div style="margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; box-sizing: border-box; flex: 4;">4</div><div style="margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; box-sizing: border-box; flex: 2;">2</div><div style="margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; box-sizing: border-box; flex: 1;">1</div></div></div> | <div style="background-color: #F4F7F8; resize: horizontal; max-width: 100%; overflow: hidden; display: flex; margin: 1em; box-sizing: border-box;"><div style="margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; box-sizing: border-box; flex: 4;">4</div><div style="margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; box-sizing: border-box; flex: 2;">2</div><div style="margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; box-sizing: border-box; flex: 1;">1</div></div></div> | ||
لا تتقلص عناصر flex افتراضيًا إلى أقل من أبعاد المحتوى الذي فيها، ويمكن تغير ذلك بضبط الخاصية <code>[[CSS/min-width|min-width]]</code> أو <code>[[CSS/min-height|min-height]]</code>. | لا تتقلص عناصر flex افتراضيًا إلى أقل من أبعاد المحتوى الذي فيها، ويمكن تغير ذلك بضبط الخاصية <code>[[CSS/min-width|min-width]]</code> أو <code>[[CSS/min-height|min-height]]</code>. | ||
== أمثلة == | == أمثلة == | ||
| سطر 85: | سطر 87: | ||
إذا حددنا قيمةً واحدةً فهي إما: | إذا حددنا قيمةً واحدةً فهي إما: | ||
* رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه قيمة <code><flex-grow></code>. | * رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه قيمة <code><flex-grow></code>. | ||
* قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها | * قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها <code><flex-basis></code>. | ||
* إحدى الكلمات المحجوزة <code>none</code> أو <code>auto</code> أو <code>initial</code>. | * إحدى الكلمات المحجوزة <code>none</code> أو <code>auto</code> أو <code>initial</code>. | ||
إذا حددنا قيمتين، فأوّل قيمة هي رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه | إذا حددنا قيمتين، فأوّل قيمة هي رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه <code><flex-grow></code>، أما ثاني قيمة فهي إما: | ||
* رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه | * رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه <code><flex-shrink></code>. | ||
* قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها | * قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها <code><flex-basis></code>. | ||
أما إذا حددنا ثلاث قيم: | أما إذا حددنا ثلاث قيم: | ||
* أوّل قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه | * أوّل قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه <code><flex-grow></code>. | ||
* ثاني قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه | * ثاني قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه <code><flex-shrink></code>. | ||
* ثالث قيمة يجب أن تكون | * ثالث قيمة يجب أن تكون صالحةً لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها <code><flex-basis></code>. | ||
=== | === <code><flex-grow></code> === | ||
تُحدِّد | تُحدِّد الخاصية <code>[[CSS/flex-grow|flex-grow]]</code>، وتكون من نوع البيانات <code>[[CSS/number|<number>]]</code>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي <code>0</code>. | ||
=== | === <code><flex-shrink></code> === | ||
تُحدِّد | تُحدِّد الخاصية <code>[[CSS/flex-shrink|flex-shrink]]</code>، وتكون من نوع البيانات <code>[[CSS/number|<number>]]</code>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي <code>1</code>. | ||
=== | === <code><flex-basis></code> === | ||
تُحدِّد | تُحدِّد الخاصية <code>[[CSS/flex-basis|flex-basis]]</code>، ويمكن استعمال أيّة قيمة تقبلها الخاصية <code>[[CSS/width|width]]</code> أو <code>[[CSS/height|height]]</code>، وإذا أردنا ضبطها إلى <code>0</code> فيجب تحديد واحدة لتجنب تفسير هذه القيمة تفسيرًا مغلوطًا. القيمة الافتراضية لها (إن حُذِفَت) هي <code>0</code>. | ||
=== | === <code>none</code> === | ||
ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، وهذه العناصر غير مرنة، إذ لا تتمدد ولا تتقلص في حاوية flex التابعة لها، وستُفسَّر هذه القيمة على أنها <code>0 0 auto</code>. | ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، وهذه العناصر غير مرنة، إذ لا تتمدد ولا تتقلص في حاوية flex التابعة لها، وستُفسَّر هذه القيمة على أنها <code>0 0 auto</code>. | ||
=== | === <code>auto</code> === | ||
ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، لكن يمكن أن يتمدد ليملأ المساحة الفارغة في حاوية flex التابعة له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، وستُفسَّر هذه القيمة على أنها <code>1 1 auto</code>. | ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، لكن يمكن أن يتمدد ليملأ المساحة الفارغة في حاوية flex التابعة له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، وستُفسَّر هذه القيمة على أنها <code>1 1 auto</code>. | ||
=== | === <code>initial</code> === | ||
ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، لكن لن يتمدد ليملأ المساحة الفارغة، وستُفسَّر هذه القيمة على أنها <code>0 1 auto</code>. | ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، لكن لن يتمدد ليملأ المساحة الفارغة، وستُفسَّر هذه القيمة على أنها <code>0 1 auto</code>. | ||
| سطر 117: | سطر 119: | ||
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; | flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصيات الفرعية التي تضبطها الخاصية flex وهي: <code>[[CSS/flex-basis|flex-basis]]</code>، و <code>[[CSS/flex-direction|flex-direction]]</code>، و <code>[[CSS/flex-flow|flex-flow]]</code>، و <code>[[CSS/flex-grow|flex-grow]]</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-property CSS Flexible Box Layout Module]. | * مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-property CSS Flexible Box Layout Module]. | ||
المراجعة الحالية بتاريخ 08:33، 25 يوليو 2018
الخاصية 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. - صفحة كل من الخاصيات
width، وheightالمسؤولة عن تحديد أبعاد العنصر. - صفحة الخاصية
positionالتي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مواصفة CSS Flexible Box Layout Module.