الفرق بين المراجعتين لصفحة: «CSS/flex»

مراجعة 11:02، 11 يوليو 2018

الخاصية 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'> ];

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

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

@@ سطر 1: / سطر 1: @@
 <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;
@@ سطر 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>
 لا تتقلص عناصر flex افتراضيًا إلى أقل من أبعاد المحتوى الذي فيها، ويمكن تغير ذلك بضبط الخاصية <code>[[CSS/min-width|min-width]]</code> أو <code>[[CSS/min-height|min-height]]</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>: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
-|}
 == أمثلة ==
@@ سطر 85: / سطر 87: @@
 إذا حددنا قيمةً واحدةً فهي إما:
 * رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه قيمة <code><flex-grow></code>.
-* قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها قيمة <code><flex-basis></code>.
+* قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها <code><flex-basis></code>.
 * إحدى الكلمات المحجوزة <code>none</code> أو <code>auto</code> أو <code>initial</code>.
-إذا حددنا قيمتين، فأوّل قيمة هي رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه قيمة <code><flex-grow></code>، أما ثاني قيمة فهي إما:
+إذا حددنا قيمتين، فأوّل قيمة هي رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه  <code><flex-grow></code>، أما ثاني قيمة فهي إما:
-* رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه قيمة <code><flex-shrink></code>.
+* رقمٌ دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وسيُفسَّر على أنَّه  <code><flex-shrink></code>.
-* قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها قيمة <code><flex-basis></code>.
+* قيمةٌ صالحةٌ لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها <code><flex-basis></code>.
 أما إذا حددنا ثلاث قيم:
-* أوّل قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه قيمة <code><flex-grow></code>.
+* أوّل قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه <code><flex-grow></code>.
-* ثاني قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه قيمة <code><flex-shrink></code>.
+* ثاني قيمة يجب أن تكون رقمًا دون واحدة من النوع <code>[[CSS/number|<number>]]</code>، وستُفسَّر على أنَّه  <code><flex-shrink></code>.
-* ثالث قيمة يجب أن تكون قيمةً صالحةً لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها قيمة <code><flex-basis></code>.
+* ثالث قيمة يجب أن تكون  صالحةً لتُستعمَل مع الخاصية <code>[[CSS/width|width]]</code>، وستُفسَّر على أنها  <code><flex-basis></code>.
-=== القيمة <code><flex-grow></code> ===
+===  <code><flex-grow></code> ===
-تُحدِّد قيمة الخاصية <code>[[CSS/flex-grow|flex-grow]]</code>، وتكون من نوع البيانات <code>[[CSS/number|<number>]]</code>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي <code>0</code>.
+تُحدِّد  الخاصية <code>[[CSS/flex-grow|flex-grow]]</code>، وتكون من نوع البيانات <code>[[CSS/number|<number>]]</code>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي <code>0</code>.
-=== القيمة <code><flex-shrink></code> ===
+===  <code><flex-shrink></code> ===
-تُحدِّد قيمة الخاصية <code>[[CSS/flex-shrink|flex-shrink]]</code>، وتكون من نوع البيانات <code>[[CSS/number|<number>]]</code>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي <code>1</code>.
+تُحدِّد الخاصية <code>[[CSS/flex-shrink|flex-shrink]]</code>، وتكون من نوع البيانات <code>[[CSS/number|<number>]]</code>، ولا يجوز استخدام الأرقام السالبة، والقيمة الافتراضية لها (إن حُذِفَت) هي <code>1</code>.
-=== القيمة <code><flex-basis></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>[[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>none</code> ===
 ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، وهذه العناصر غير مرنة، إذ لا تتمدد ولا تتقلص في حاوية flex التابعة لها، وستُفسَّر هذه القيمة على أنها ‎<code>0 0 auto</code>.
-=== القيمة <code>auto</code> ===
+=== <code>auto</code> ===
 ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، لكن يمكن أن يتمدد ليملأ المساحة الفارغة في حاوية flex التابعة له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، وستُفسَّر هذه القيمة على أنها ‎<code>1 1 auto</code>.
-=== القيمة <code>initial</code> ===
+===  <code>initial</code> ===
 ستكون أبعاد العنصر وفقًا لخاصيتَي <code>[[CSS/width|width]]</code> و <code>[[CSS/height|height]]</code> التابعتين له، ويمكن أن يتقلص إلى الأبعاد الدنيا للمحتوى الموجود فيه، لكن لن يتمدد ليملأ المساحة الفارغة، وستُفسَّر هذه القيمة على أنها ‎<code>0 1 auto</code>.