الفصل السادس التنسيق باستخدام Flexbox في CSS

إليك كورس كامل عن التنسيق باستخدام Flexbox في CSS:

1. مقدمة عن Flexbox

• Flexbox هو نموذج تصميم مرن يُستخدم لتنظيم وتوزيع العناصر داخل الحاويات بشكل مرن وديناميكي.
• يهدف Flexbox إلى توزيع العناصر على طول المحور الأساسي (الأفقي أو العمودي) بطريقة سلسة، مما يسهل تصميم التنسيقات المرنة والمتجاوبة.

2. إعداد حاوية Flexbox (Flex Container)

• لتفعيل Flexbox في حاوية، يجب تعيين display: flex; على الحاوية.
• مثال:
  css

  Copy code

  .container {
display: flex;
}


3. الاتجاه (Direction)

• المحور الأساسي (Main Axis) هو المحور الذي يتحرك فيه العناصر (افتراضيًا يكون أفقيًا).
• باستخدام خاصية flex-direction يمكنك تغيير اتجاه توزيع العناصر، إما أفقيًا أو عموديًا.

أ. القيم المتاحة لـ flex-direction:

• row (افتراضي): توزيع العناصر أفقيًا من اليسار إلى اليمين.
• row-reverse: توزيع العناصر أفقيًا من اليمين إلى اليسار.
• column: توزيع العناصر عموديًا من الأعلى إلى الأسفل.
• column-reverse: توزيع العناصر عموديًا من الأسفل إلى الأعلى.

مثال:

4. اللف (Wrapping)

• إذا كانت العناصر أكبر من الحاوية، يمكن تحديد ما إذا كانت العناصر ستلتف إلى السطر التالي باستخدام خاصية flex-wrap.

أ. القيم المتاحة لـ flex-wrap:

• nowrap (افتراضي): العناصر لا تلتف.
• wrap: العناصر تلتف إلى السطر التالي إذا لزم الأمر.
• wrap-reverse: العناصر تلتف في الاتجاه المعاكس.

مثال:

5. محاذاة العناصر على المحور الأساسي (Main Axis Alignment)

• باستخدام justify-content يمكنك محاذاة العناصر على المحور الأساسي (أفقيًا في الوضع الافتراضي).

أ. القيم المتاحة لـ justify-content:

• flex-start: محاذاة العناصر في بداية الحاوية.
• flex-end: محاذاة العناصر في نهاية الحاوية.
• center: محاذاة العناصر في وسط الحاوية.
• space-between: توزيع العناصر بحيث يكون هناك مسافة متساوية بين كل عنصرين.
• space-around: توزيع العناصر بحيث تكون المسافات بين العناصر متساوية بما في ذلك المسافة قبل العنصر الأول وبعد العنصر الأخير.
• space-evenly: توزيع العناصر بحيث تكون المسافات بينها متساوية.

مثال:

6. محاذاة العناصر على المحور العمودي (Cross Axis Alignment)

• باستخدام align-items يمكنك محاذاة العناصر على المحور العمودي.

أ. القيم المتاحة لـ align-items:

• flex-start: محاذاة العناصر إلى بداية المحور العمودي.
• flex-end: محاذاة العناصر إلى نهاية المحور العمودي.
• center: محاذاة العناصر في وسط المحور العمودي.
• stretch (افتراضي): جعل العناصر تمتد لتشغل كامل الارتفاع.
• baseline: محاذاة العناصر بناءً على سطر الأساس.

مثال:

7. محاذاة العناصر الفردية (Aligning Individual Items)

• باستخدام align-self يمكنك تعديل المحاذاة الخاصة بكل عنصر داخل الحاوية بشكل منفصل عن الآخرين.

أ. القيم المتاحة لـ align-self:

• auto (افتراضي): يتبع العنصر إعدادات align-items في الحاوية.
• flex-start: محاذاة العنصر إلى بداية المحور العمودي.
• flex-end: محاذاة العنصر إلى نهاية المحور العمودي.
• center: محاذاة العنصر في وسط المحور العمودي.
• stretch: جعل العنصر يمتد لتشغل كامل المساحة.
• baseline: محاذاة العنصر بناءً على سطر الأساس.

مثال:

8. توزيع المساحة بين العناصر (Distribute Space Between Items)

• يمكنك التحكم في توزيع المساحة الفارغة بين العناصر باستخدام خاصية gap (أو row-gap و column-gap).

مثال:

• gap: يحدد المسافة بين جميع العناصر داخل الحاوية.
• row-gap: يحدد المسافة بين الصفوف.
• column-gap: يحدد المسافة بين الأعمدة.

9. حجم العناصر باستخدام Flexbox

• باستخدام flex-grow و flex-shrink و flex-basis يمكنك التحكم في حجم العناصر بمرونة.

أ. flex-grow

• يحدد قدرة العنصر على النمو ليشغل المساحة المتاحة.
• مثال:
  css

  Copy code

  .item {
flex-grow: 1; /* العنصر سينمو ليأخذ المساحة المتاحة */
}


ب. flex-shrink

• يحدد قدرة العنصر على الانكماش إذا كان هناك نقص في المساحة.
• مثال:
  css

  Copy code

  .item {
flex-shrink: 1; /* العنصر يمكنه الانكماش */
}


ج. flex-basis

• يحدد الحجم الأساسي للعنصر قبل أن يبدأ في النمو أو الانكماش.
• مثال:
  css

  Copy code

  .item {
flex-basis: 100px; /* العنصر سيبدأ بحجم 100px */
}


د. التنسيق باستخدام خاصية flex

• يمكن دمج الثلاث خصائص في واحدة باستخدام flex.
• مثال:
  css

  Copy code

  .item {
flex: 1 1 100px; /* flex-grow | flex-shrink | flex-basis */
}


10. أمثلة عملية على Flexbox

أ. تخطيط بسيط مع Flexbox

HTML:

CSS:

ب. تخطيط عمودي باستخدام Flexbox

HTML:

CSS:

11. أفضل الممارسات لاستخدام Flexbox

• استخدم Flexbox للتخطيطات المتجاوبة والمُحسّنة.
• حافظ على البساطة: يتيح لك Flexbox تصميم تخطيطات مرنة دون الحاجة إلى تعقيد.
• استخدم gap بدلاً من margin بين العناصر داخل الحاوية للحصول على تخطيط أفضل.

12. ملخص الدرس

• تعلمنا كيفية إعداد حاوية Flexbox باستخدام display: flex;.
• تعلمنا كيفية محاذاة العناصر باستخدام خصائص مثل justify-content و align-items.
• تعلمنا كيفية التحكم في حجم العناصر باستخدام flex-grow, flex-shrink, و flex-basis.
• قمنا بتطبيق أمثلة عملية على Flexbox لبناء تخطيطات مرنة وديناميكية.