CSS

CSS Flex
خاصية flex في لغة CSS

سوف تتعلم في هذا الدرس خاصية Flex في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية flex box وجميع القيم الخاصة بها.

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

837

المواضيع

24
الشروحات chevron_left CSS Flex chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Flex
خاصية flex في لغة CSS

</> CSS flex
خاصية flex مع flex box في لغة CSS

تستخدم خاصية flex مع العناصر الداخلية لحاوية flex box في لغة CSS هي عبارة عن إختصار لثلاث خصائص وهم flex-grow, flex-shrink, و flex-basis, ثلاث قيم مختلفة أو قيميتين أو قيمة واحدة.


قيم خاصية flex في لغة CSS:

  • flex-grow هي قيمة تمدد العنصر بالنسبة لباقي عناصر حاوية flex box.
  • flex-shrink هي قيمة إنكماش او تقليص العنصر بالنسبة لباقي عناصر حاوية flex box.
  • flex-basis هي قيمة حجم العنصر المبدئي داخل حاوية flex box.
  • auto هي مطابقة تماماً ل 1 1 auto.
  • none هي مطابقة تماماً ل0 0 auto.
CSS flex syntax

طريقة كتابة خاصية flex في لغة CSS.

flex:flex-grow-value flex-shrink-value flex-basis-value;
CSS flex values

قيم خاصية flex في لغة CSS.

flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;

</> CSS flex one value
خاصية flex وقيمة واحدة في لغة CSS

تستخدم خاصية flex مع flex items بداخل حاوية flex box في لغة CSS والقيمة هي رقم فقط:

  • ليكون كل عناصر الحاوية نفس الحجم (الطول - العرض) بغض النظر عن محتواها.
  • ليكون عنصر ضعف العناصر الأخري مرة أو أكثر من مرة.


توضيح: تساوي خاصية flex:1 والقيمة واحدة فقط وهي 1 الثلاث قيم التالية:

  • flex-grow:1 العنصر سكيون بنفس حجم حاوية flex box.
  • flex-shrink:1 العنصر سوف يتمدد بحجم المساحة المتبقية لحاوية flex box.
  • flex-basis:0 لا يكون للعنصر قيمة أفتراضية للحجم يكون تلقائياً ويكبر ويصغر بناء علي وضعة داخل الحاوية.
flex-grow:1 ,flex-shrink :1 and flex-basis:0

flex:1 تساوي flex-grow:1 ,flex-shrink :1 and flex-basis:0 في لغة CSS.

flex-grow :1;
flex-shrink :1;
flex-basis :0;
CSS flex one value

جميع العناصر متساوية في الحجم مع خاصية flex في لغة CSS.

.item
{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  flex:1;
}
CSS flex one value double

عنصر ضعف حجم العناصر الأخري مع خاصية flex في لغة CSS.

.two
{
 flex:2;
}
CSS flex one value double two

ضعفين حجم العناصر الأخري مع خاصية flex في لغة CSS.

.two
{
 flex:3;
}

</> CSS flex two values
خاصية flex وقيمتين في لغة CSS

توضيح: تساوي خاصية flex:1 100px  والقيمة مزدوجة وهي 1 و 100px ,وهي قيميتين للخاصيتين:

  • flex-grow:1 العنصر سكيون بنفس حجم حاوية flex box.
  • flex-basis:100px ليكون حجم العنصر المبدئي هو 100px في حل حدوث مشكله أو كان حجم الحاوية صغير ولا توجد مساحة فسوف تقل حجم العناصر وهذا العنصر يكون حجمة ثابت 100px.
flex-grow:1 , and flex-basis:0

flex:1 تساوي flex-grow:1 and flex-basis:0 في لغة CSS.

flex-grow: 1;
flex-basis: 100px;
CSS flex two values

جميع العناصر متساوية في الحجم بخلاف العنصر الزي له خاصية flex مع القيمة 1 100px في لغة CSS.

.two
{
flex:1 100px;
}
هام
تمدد العنصر بعرض المساحة المتبقية لأن قيمة flex-grow هي 1 ولا يقل حجمه عن 100px عندما تصغر أو تنكمش الحاويه عند تصغير صفحة الويب قم بتصغير النافذة حتي تلاحظ ان العنصر لا يقل عن 100px.

</> CSS flex items
خاصية flex وتوزيع العناصر في لغة CSS

يمكن تقسيم العناصر اعتماداً علي عدد العناصر الداخلية للحاوية فمثلاً لو كانت حاوية بداخلها 6 عناصر يمكن أن نجعل عنصر منها يكون نصف الحاوية والثلاث عناصر الأخر يكون لهم عرض نصف الحاوية فقط وهكذا يتم توزيع مساحة الحاوية علي عدد العناصر.

flex-grow:1 , and flex-basis:0

flex:1 تساوي flex-grow:1 and flex-basis:0 في لغة CSS.

flex-grow: 1;
flex-basis: 100px;
.three
{
  background:black;
  color:white;
  flex:3;
}
CSS flex items column

تقسيم العناصر وتوزيعها طبعاً لخاصية flex فالأول هو ثلث العنصر الثالث والثاني ضعف الأول في لغة CSS.

.three
{
  background:black;
  color:white;
  flex:3;
}
هام
تمدد العنصر بعرض المساحة المتبقية لأن قيمة flex-grow هي 1 ولا يقل حجمه عن 100px عندما تصغر أو تنكمش الحاويه عند تصغير صفحة الويب قم بتصغير النافذة حتي تلاحظ ان العنصر لا يقل عن 100px.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.