CSS Flex
خاصية flex في لغة CSS
سوف تتعلم في هذا الدرس خاصية Flex في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية flex box وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
هام
</>
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;
}
هام
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
