تعلّم Flexbox عبر 8 استخدامات عملية شائعة في CSS

مقدمة: لماذا يُعد Flexbox أساسياً في تطوير الواجهات؟

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

بدلاً من استعراض جميع خصائص Flexbox دفعة واحدة، سنركّز هنا على أكثر الاستخدامات العملية شيوعاً، بحيث تفهم متى تستخدم كل خاصية ولماذا تكون مناسبة في سياق معين. هذا الأسلوب يمنحك قدرة أفضل على توظيف Flexbox في مشاريعك الحقيقية.

التهيئة الأولية قبل التطبيق

في الأمثلة التعليمية الخاصة بـ Flexbox، ستجد عادةً حاويات تحتوي على عدة عناصر من نوع div، وغالباً ما تكون هذه العناصر بأبعاد ثابتة مثل 40px عرضاً وارتفاعاً لتوضيح السلوك البصري للخصائص بسهولة.

الفكرة الأساسية هنا أن كل الأمثلة تبدأ من حاوية رئيسية يتم تفعيل Flexbox عليها عبر الخاصية display: flex;، ثم نضيف الخصائص الأخرى حسب الهدف المطلوب.

1. محاذاة العناصر الأفقية باستخدام Flexbox

العناصر الكتلية مثل div تُعرض افتراضياً فوق بعضها عمودياً. إذا أردت ترتيبها أفقياً داخل صف واحد، يكفي تحويل الحاوية إلى حاوية مرنة:

.container {
  display: flex;
}

بمجرد تطبيق display: flex; ستنتقل العناصر إلى المحور الأفقي تلقائياً. وهذه من أكثر استخدامات Flexbox شيوعاً عند بناء القوائم، الأزرار، أو الصفوف داخل البطاقات.

2. توسيط عنصر أو عدة عناصر في منتصف الحاوية

من أكثر المهام تكراراً في تصميم الواجهات: وضع عنصر في منتصف الحاوية أفقياً وعمودياً. مع Flexbox يصبح ذلك مباشراً:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

الخاصية justify-content تتحكم في المحاذاة على المحور الرئيسي، بينما تتحكم align-items في المحور العرضي. وعند استخدام القيمة center لكلتيهما، يتم التوسيط الكامل داخل الحاوية.

فهم الخاصية justify-content

تُستخدم justify-content لترتيب العناصر على المحور الأفقي في الوضع الافتراضي row. من أشهر القيم:

• flex-start: وضع العناصر في بداية الحاوية.
• flex-end: وضع العناصر في نهاية الحاوية.
• center: توسيط العناصر داخل الحاوية.

.container {
  display: flex;
  justify-content: flex-start;
}

.container {
  display: flex;
  justify-content: flex-end;
}

.container {
  display: flex;
  justify-content: center;
}

فهم الخاصية align-items

الخاصية align-items مشابهة في الفكرة، لكنها تعمل على المحور العمودي عندما يكون flex-direction بالقيمة الافتراضية row. من أهم القيم:

• flex-start: محاذاة العناصر للأعلى.
• flex-end: محاذاة العناصر للأسفل.
• center: توسيط العناصر عمودياً.

.container {
  display: flex;
  align-items: flex-start;
}

.container {
  display: flex;
  align-items: flex-end;
}

.container {
  display: flex;
  align-items: center;
}

وعند الجمع بين justify-content وalign-items يمكنك وضع العناصر في المنتصف، أو في الزاوية العلوية اليمنى، أو السفلية، أو أي موضع آخر حسب احتياج التصميم.

3. توزيع المسافات بين العناصر بالتساوي

إذا كنت تريد توزيع العناصر داخل صف مع ترك مسافات متساوية بينها، فاستخدم القيمة space-between مع justify-content:

.container {
  display: flex;
  justify-content: space-between;
}

هذه القيمة تجعل أول عنصر يلتصق ببداية الحاوية وآخر عنصر بنهايتها، ثم توزّع المسافات المتبقية بالتساوي بين العناصر. وهي مناسبة جداً في أشرطة التنقل navigation والرؤوس headers.

كما توجد قيم أخرى مفيدة:

• space-evenly: تضيف مسافات متساوية بين العناصر وقبل أول عنصر وبعد آخر عنصر.
• space-around: تضيف مساحات حول كل عنصر، مع اختلاف طفيف في الأطراف مقارنةً بـ space-evenly.

4. دفع عنصر إلى نهاية الحاوية

كثيراً ما تحتاج في تصميم الواجهات إلى إبقاء بعض العناصر في البداية، ودفع عنصر معين مثل زر أو رابط إلى نهاية الصف. يمكن تنفيذ ذلك بعدة طرق عملية.

الطريقة الأولى: استخدام justify-content: space-between;

إذا كانت الحاوية تحتوي على عنصرين فقط، فهذه الطريقة مثالية:

.container {
  display: flex;
  justify-content: space-between;
}

سيبقى العنصر الأول في البداية، والثاني في النهاية.

الطريقة الثانية: عنصر فارغ مع flex-grow: 1;

إذا كان لديك أكثر من عنصرين، فيمكنك إدراج عنصر فارغ بين العناصر ثم إعطاؤه الخاصية flex-grow: 1; ليتمدد ويستهلك المساحة الفارغة:

<div class="option-2">
  <div class="container">
    <div class="item sm"></div>
    <div class="item"></div>
    <div class="space"></div>
    <div class="item"></div>
  </div>
</div>

.option-2 .space {
  flex-grow: 1;
}

بهذه الطريقة يتمدد العنصر الفارغ ويدفع العنصر الأخير إلى نهاية الحاوية.

الطريقة الثالثة: إعطاء أحد العناصر flex-grow

يمكنك أيضاً توسيع العنصر الأول نفسه حتى يدفع العنصر الأخير إلى النهاية:

.option-3 .item:first-child {
  flex-grow: 1;
}

طريقة إضافية: استخدام margin-left: auto;

من الحلول الأنيقة كذلك إعطاء العنصر الأخير هامشاً أيسر تلقائياً:

.task-4 .option-1 .container {
  display: flex;
}

.task-4 .option-1 .item:last-child {
  margin-left: auto;
}

هذه التقنية مفيدة جداً في مكونات الواجهة، خصوصاً عندما تريد فصل عنصر واحد عن بقية العناصر من دون تعديل بنية HTML.

5. إنشاء أعمدة بأحجام نسبية

إذا كنت تريد أن يشغل كل عنصر نسبة مختلفة من المساحة، يمكنك استخدام الخاصية المختصرة flex بقيم رقمية نسبية. على سبيل المثال:

.task-5 .item-1 {
  flex: 3;
}

.task-5 .item-2 {
  flex: 1;
}

.task-5 .item-3 {
  flex: 1;
}

.task-5 .item-4 {
  flex: 1;
}

في هذا المثال، سيشغل العنصر الأول ثلاثة أجزاء من المساحة، بينما يشغل كل عنصر من العناصر الثلاثة الأخرى جزءاً واحداً فقط. أي أن النسبة النهائية تصبح 3:1:1:1.

هذا الأسلوب مناسب لبناء تخطيطات الجداول، القوائم الإدارية، ولوحات التحكم التي تحتوي على أعمدة متفاوتة العرض.

6. بناء تخطيط متجاوب باستخدام Flexbox

تخطيط متجاوب بدون media query

عند تفعيل الالتفاف باستخدام flex-wrap: wrap;، تستطيع العناصر الانتقال إلى سطر جديد بدلاً من الانكماش بشكل مفرط داخل الحاوية:

.task-6 .container {
  display: flex;
  flex-wrap: wrap;
}

هذه الطريقة تمنحك استجابة تلقائية جيدة عند تغيّر عرض الشاشة، خاصةً في البطاقات وعناصر الشبكات البسيطة.

تخطيط متجاوب باستخدام media query

إذا احتجت إلى تحكم أكبر، يمكنك تحديد عرض كل عنصر بواسطة flex-basis. مثلاً لإنشاء عمودين:

.task-6 .container {
  display: flex;
  flex-wrap: wrap;
}

.task-6 .item {
  flex-basis: 50%;
}

بهذا يشغل كل عنصر نصف عرض الحاوية، فينتج تخطيط من عمودين.

ولإنشاء أربعة أعمدة عندما يزيد عرض الشاشة على 375px، يمكن استخدام استعلام وسائط:

@media (min-width: 375px) {
  .task-6 .item {
    display: flex;
    flex-basis: 25%;
  }
}

7. تغيير ترتيب العناصر داخل Flexbox

يوفّر Flexbox إمكانية إعادة ترتيب العناصر بصرياً عبر الخاصية order. على سبيل المثال، إذا أردت نقل العنصر الأول إلى نهاية الصف:

.task-7 .item-1 {
  order: 1;
}

القيمة الافتراضية للخاصية order هي 0، ويمكن استخدام قيم سالبة أيضاً. ومع ذلك، يُفضّل استعمال هذه التقنية بحذر لأن تغيير الترتيب البصري قد لا يطابق الترتيب المنطقي في HTML، ما قد يؤثر على سهولة الوصول Accessibility وتجربة المستخدم.

8. تغيير موضع عنصر واحد داخل الحاوية

أحياناً تحتاج إلى تعديل موضع عنصر واحد فقط دون التأثير على بقية العناصر. هنا تأتي فائدة الخاصية align-self، التي تسمح للعنصر بأن يتجاوز إعداد align-items الخاص بالحاوية.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

على سبيل المثال، إذا أردت وضع العنصر الثالث في أسفل الحاوية عمودياً:

.task-8 .container {
  display: flex;
}

.task-8 .item-3 {
  align-self: flex-end;
}

فهم flex-direction وتأثيره على المحاور

الخاصية flex-direction تحدد اتجاه ترتيب العناصر داخل الحاوية. القيمة الافتراضية هي row، ما يعني أن العناصر تُرتب أفقياً. أما إذا استخدمت flex-direction: column; فسيصبح الترتيب عمودياً.

.task-3 .container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

عند تغيير الاتجاه إلى column، ستظل خصائص مثل justify-content وalign-items تعمل، لكن المحاور ستتبدّل. لذلك من المهم فهم أن معنى المحور الرئيسي يتغير بحسب قيمة flex-direction.

أفضل ممارسات عند استخدام Flexbox

• استخدم Flexbox عندما يكون الهدف ترتيب العناصر في بعد واحد: صف أو عمود.
• اعتمد على CSS Grid عندما تحتاج إلى تخطيطات ثنائية الأبعاد أكثر تعقيداً.
• تجنّب الإفراط في استخدام الخاصية order إذا كان الترتيب المنطقي للمحتوى مهماً.
• اختبر التخطيطات على الشاشات الصغيرة لضمان عدم تداخل العناصر.
• حافظ على وضوح البنية البرمجية، ولا تُكثِر من العناصر الفارغة إلا عند وجود حاجة حقيقية.

الخلاصة التقنية

Flexbox ليس مجرد أداة لمحاذاة العناصر، بل نظام عملي متكامل يسهّل بناء واجهات مرنة وسريعة الاستجابة بأقل قدر من الشيفرة. أهم ما يميّزه هو بساطة الاستخدام في السيناريوهات اليومية مثل التوسيط، توزيع المسافات، إنشاء الأعمدة النسبية، وضبط سلوك العناصر داخل الحاوية. ومن الناحية التقنية، كلما فهمت العلاقة بين justify-content وalign-items وflex-grow وflex-basis وflex-direction، أصبحت قادراً على تصميم واجهات أكثر احترافية وقابلية للصيانة.