انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 83
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,490
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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.

HTML 
flex:flex-grow-value flex-shrink-value flex-basis-value;

CSS flex values

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

HTML 
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.

HTML 
flex-grow :1;
flex-shrink :1;
flex-basis :0;
جرّب بنفسك

CSS flex one value

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

HTML 
.item
{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  flex:1;
}
جرّب بنفسك
جرّب بنفسك

CSS flex one value double

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

HTML 
.two
{
 flex:2;
}
جرّب بنفسك
جرّب بنفسك

CSS flex one value double two

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

HTML 
.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.

HTML 
flex-grow: 1;
flex-basis: 100px;
جرّب بنفسك

CSS flex two values

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

HTML 
.two
{
flex:1 100px;
}
جرّب بنفسك

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

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

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

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

HTML 
flex-grow: 1;
flex-basis: 100px;
جرّب بنفسك
HTML 
.three
{
  background:black;
  color:white;
  flex:3;
}
جرّب بنفسك
جرّب بنفسك

CSS flex items column

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

HTML 
.three
{
  background:black;
  color:white;
  flex:3;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…