أمثلة نموذجية لاستخدام Flexbox في CSS3

تُعد خاصية Flexbox في CSS3 من أكثر الأدوات فاعلية وحداثة في تنظيم وتخطيط العناصر داخل صفحات الويب، حيث توفر طريقة مرنة وقوية لترتيب المحتوى في الحاويات بشكل ديناميكي، مع إمكانيات متقدمة تتيح التكيف مع مختلف أحجام الشاشات وأجهزة العرض. ظهرت Flexbox كحل متقدم لمشاكل تنسيق وتصميم الصفحات التي كانت تواجه المصممين مع تقنيات CSS التقليدية، مثل float وinline-block وposition. في هذا المقال الموسع، سيتم شرح العديد من الأمثلة النموذجية والعملية لكيفية استخدام Flexbox مع تحليل تفصيلي لكيفية عمل خصائصها المختلفة.

مقدمة عن Flexbox

يُقصد بـ Flexbox (Flexible Box Layout) نظام تصميم قائم على محاور (محور رئيسي ومحور عرضي) يتيح توزيع المساحات بين العناصر وتوسيطها بسهولة داخل الحاوية. يمكن للمرونة أن تكون إما أفقية أو رأسية بحسب اتجاه المحور الرئيسي، مما يوفر تحكماً دقيقاً في شكل وتصميم الصفحات بدون الحاجة إلى تعقيدات عديدة.

المفاهيم الأساسية في Flexbox

قبل التعمق في الأمثلة، من الضروري فهم المفاهيم الأساسية التي تعتمد عليها flexbox، ومنها:

• الحاوية المرنة (Flex Container): العنصر الأب الذي يحتوي على العناصر المرنة.

• العناصر المرنة (Flex Items): العناصر الداخلية داخل الحاوية المرنة.

• المحور الرئيسي (Main Axis): هو المحور الذي تتحرك عليه العناصر ضمن الحاوية، يمكن أن يكون أفقياً أو رأسياً.

• المحور العرضي (Cross Axis): المحور العمودي على المحور الرئيسي.

هذه المفاهيم تتيح التحكم في طريقة توزيع وترتيب العناصر بشكل مرن.

الخصائص الأساسية لـ Flexbox

1. خصائص الحاوية المرنة (Flex Container Properties)

• display: flex;
  
  تُحوّل العنصر إلى حاوية مرنة، ويصبح جميع أبنائه عناصر مرنة تلقائياً.

• flex-direction:
  
  تحدد اتجاه المحور الرئيسي، وقيمها:

  • row (الافتراضي): العناصر تتراصف أفقياً من اليسار إلى اليمين.

  • row-reverse: نفس السابق لكن بالعكس.

  • column: العناصر تتراصف رأسياً من الأعلى للأسفل.

  • column-reverse: نفس السابق لكن بالعكس.

• justify-content:
  
  تتحكم في توزيع العناصر على المحور الرئيسي، بقيم مثل:

  • flex-start (الافتراضي): تبدأ العناصر من بداية الحاوية.

  • flex-end: تبدأ العناصر من نهاية الحاوية.

  • center: تمركز العناصر في وسط الحاوية.

  • space-between: توزيع متساوٍ مع مساحات بين العناصر فقط.

  • space-around: توزيع متساوٍ مع مساحات حول كل عنصر.

• align-items:
  
  تحدد كيفية محاذاة العناصر على المحور العرضي، بقيم مثل:

  • stretch (الافتراضي): تمدد العناصر لملء الحاوية.

  • flex-start: تبدأ العناصر من أعلى المحور العرضي.

  • flex-end: تبدأ العناصر من أسفل المحور العرضي.

  • center: تمركز العناصر على المحور العرضي.

  • baseline: محاذاة العناصر حسب الخط الأساسي للنص.

• flex-wrap:
  
  تحدد إذا كانت العناصر ستنتقل إلى سطر جديد عند نفاد المساحة، بقيم:

  • nowrap (الافتراضي): كل العناصر في سطر واحد.

  • wrap: يسمح للعناصر بالانتقال إلى الأسطر التالية.

  • wrap-reverse: نفس السابق لكن الأسطر تُرتب بالعكس.

2. خصائص العناصر المرنة (Flex Items Properties)

• flex-grow:
  
  تحدد قدرة العنصر على النمو لملء المساحة المتاحة. القيمة الافتراضية 0 (لا ينمو).

• flex-shrink:
  
  تحدد قدرة العنصر على الانكماش عندما تقل المساحة.

• flex-basis:
  
  تحدد الحجم الأساسي للعنصر قبل توزيع المساحات المتبقية.

• flex:
  
  اختصار يجمع بين flex-grow وflex-shrink وflex-basis، مثال: flex: 1 0 auto;

• align-self:
  
  تسمح للعنصر الواحد بتجاوز خاصية align-items للحاوية، بقيم مماثلة لها.

أمثلة نموذجية لاستخدام Flexbox

المثال الأول: إنشاء شريط تنقل (Navbar) أفقي مرن

يُعد شريط التنقل من أكثر مكونات صفحات الويب استخداماً، ويحتاج إلى توزيع العناصر بشكل مرتب وأنيق مع التكيف مع أحجام الشاشات المختلفة.

css
CopyEdit
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #34495e;
  padding: 10px 20px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 8px 15px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.navbar a:hover {
  background-color: #2c3e50;
  border-radius: 4px;
}

في هذا المثال، display: flex يحول .navbar إلى حاوية مرنة، وjustify-content: space-between يوزع الروابط بشكل متساوٍ بين الطرفين مع مساحات بين العناصر. align-items: center يجعل كل الروابط على خط واحد وسطياً رأسياً.

المثال الثاني: شبكة صور مرنة مع الانتقال إلى الصف التالي عند الضرورة

عند عرض مجموعة صور بحجم متغير أو عندما نرغب في استجابة تصميم الصفحة، نستخدم flex-wrap لاحتواء الصور بطريقة سلسة.

css
CopyEdit
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.gallery img {
  flex: 1 1 200px;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

في هذا المثال:

• flex-wrap: wrap يسمح للصور بالانتقال لصف جديد عند نفاد المساحة الأفقية.

• flex: 1 1 200px تعني أن كل صورة تبدأ بحجم 200px لكن يمكنها النمو أو الانكماش حسب المساحة المتاحة.

• gap: 15px يضيف مسافة ثابتة بين الصور.

المثال الثالث: تصميم عمودين مع ارتفاع متساوٍ

عادةً ما نواجه مشكلة عند استخدام CSS التقليدي لضبط ارتفاع عمودين بحيث يكونا متساويين، لكن Flexbox يحل هذه المشكلة بسهولة.

css
CopyEdit
.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.sidebar {
  flex: 1;
  background-color: #f0f0f0;
  padding: 20px;