شرح CSS Flexbox بالعربية: دليل عملي ومرجع سريع لخصائص Flexbox

مقدمة إلى CSS Flexbox

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

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

ما هو Flexbox ولماذا نستخدمه؟

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

تكمن قوة Flexbox في أنه يساعد على:

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

وفي التطبيقات العملية، يمكن استخدام Flexbox لبناء أقسام البطاقات، والقوائم الأفقية، وشريط التنقل، وواجهات الهبوط، وغيرها من المكونات الشائعة.

فهرس الموضوع

• بنية Flexbox
• إعداد المشروع
• خاصية flex-direction
• خاصية justify-content
• خاصية align-content
• خاصية align-items
• خاصية align-self
• خصائص flex-grow وflex-shrink وflex-wrap وflex-basis
• الاختصارات Shorthand

بنية Flexbox وكيفية توزيع العناصر

يعتمد Flexbox على مفهومين رئيسيين:

• المحور الرئيسي أو Main Axis.
• المحور المتقاطع أو Cross Axis.

يتم توزيع العناصر داخل الحاوية وفق اتجاه تحدده خاصية flex-direction. فإذا كان الاتجاه أفقياً، يصبح الصف هو المحور الرئيسي. وإذا كان عمودياً، يصبح العمود هو المحور الرئيسي.

مرجع سريع لخصائص Flexbox

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

كيفية إعداد مشروع تجريبي لتعلم Flexbox

لتطبيق الشرح بشكل عملي، يكفي أن تكون لديك معرفة أولية بـ HTML وCSS، مع استخدام محرر مثل VS Code.

1. أنشئ مجلداً جديداً باسم Project-1.
2. افتح المشروع داخل VS Code.
3. أنشئ ملفين باسم index.html وstyle.css.
4. يمكنك تشغيل المشروع عبر إضافة Live Server أو استخدام CodePen.

في نهاية هذا التطبيق، ستصبح قادراً على بناء تخطيطات دقيقة ومنظمة باستخدام Flexbox.

كود HTML الأساسي

ضع الأسطر التالية داخل وسم body:

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
</div>

تنسيق CSS المبدئي

الآن استهدف الحاوية والعناصر الداخلية، ثم امنحها شكلاً موحداً:

.container {
  height: 100vh;
}

[class^="box-"] {
  width: 140px;
  height: 140px;
  background-color: skyblue;
  border: 2px solid black;
  font-size: 65px;
}

فهم العلاقة بين العنصر الأب والعناصر الأبناء

قبل استخدام Flexbox، من المهم فهم نقطة أساسية: أغلب خصائص Flexbox تُطبَّق على العنصر الأب، وليس مباشرة على العناصر الأبناء.

في مثالنا، العنصر .container هو الأب، بينما العناصر .box-1 و.box-2 و.box-3 هي الأبناء. لذلك نبدأ بتفعيل display: flex داخل الحاوية:

.container {
  display: flex;
  height: 100vh;
  gap: 25px;
}

[class^="box-"] {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

شرح خاصية flex-direction

تحدد خاصية flex-direction اتجاه توزيع العناصر داخل الحاوية، سواء كان الترتيب في صف أو عمود.

جرّب القيم المختلفة داخل .container:

.container {
  flex-direction: row;
}

أشهر القيم المتاحة

• row: ترتيب أفقي من اليسار إلى اليمين وفق اتجاه اللغة.
• row-reverse: ترتيب أفقي معكوس.
• column: ترتيب عمودي.
• column-reverse: ترتيب عمودي معكوس.

شرح خاصية justify-content

تتحكم خاصية justify-content في توزيع العناصر على Main Axis داخل الحاوية.

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

قيم شائعة ومتى تستخدمها

• flex-start: بدء العناصر من أول المحور الرئيسي.
• flex-end: دفع العناصر إلى نهاية المحور.
• center: توسيط العناصر.
• space-between: توزيع العناصر مع ترك مسافة بين كل عنصرين.
• space-around: مسافات متساوية تقريباً حول العناصر.
• space-evenly: توزيع متساوٍ تماماً للمسافات.

شرح خاصية align-content

تستخدم خاصية align-content لترتيب الصفوف أو الأعمدة على Cross Axis عندما يكون هناك أكثر من سطر داخل الحاوية.

هذه الخاصية لن تعمل ما لم تُفعّل خاصية flex-wrap أولاً:

.container {
  align-content: center;
  flex-wrap: wrap;
}

وهنا تظهر فائدة align-content عند امتلاء الصف الأول وانتقال العناصر إلى صفوف جديدة.

شرح خاصية align-items

تتحكم خاصية align-items في محاذاة جميع العناصر على Cross Axis.

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

أبرز القيم

• stretch: تمدد العناصر تلقائياً لملء الحيز المتاح.
• flex-start: محاذاة نحو البداية.
• flex-end: محاذاة نحو النهاية.
• center: توسيط العناصر.
• baseline: محاذاة حسب خط الأساس للنص.

شرح خاصية align-self

على عكس أغلب الخصائص السابقة، تعمل align-self على العنصر الابن نفسه، وتسمح لك بتخصيص محاذاته منفرداً على Cross Axis.

يمكنك تطبيقها مثلاً على العنصر .box-2:

.box-2 {
  align-self: center;
}

ومن أشهر قيمها: flex-start وflex-end وcenter وbaseline وstretch وauto.

خصائص flex-grow وflex-shrink وflex-wrap وflex-basis

الخصائص التالية تظهر أهميتها بوضوح عندما يتغير حجم الشاشة أو عرض الحاوية.

خاصية flex-grow

تحدد flex-grow مقدار تمدد العنصر ليشغل مساحة إضافية متاحة داخل الحاوية. كلما زادت القيمة، زادت أولوية العنصر في الحصول على المساحة.

خاصية flex-shrink

تحدد flex-shrink مقدار تقلص العنصر عندما لا تكفي المساحة المتاحة. وهي تعمل بشكل عكسي تقريباً مع flex-grow.

مثال على استخدام flex-grow:

.box-1 {
  flex-grow: 1;
}

.box-2 {
  flex-grow: 5;
}

.box-3 {
  flex-grow: 1;
}

عند تغيير عرض النافذة، ستلاحظ أن العنصر .box-2 يحصل على مساحة أكبر من العنصرين الآخرين.

مثال على flex-shrink، مع ملاحظة ضرورة إزالة flex-wrap إذا أردت رؤية التأثير بوضوح:

.box-1 {
  flex-shrink: 1;
}

.box-2 {
  flex-shrink: 5;
}

.box-3 {
  flex-shrink: 1;
}

خاصية flex-wrap

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

.container {
  flex-wrap: wrap;
}

القيم الأشهر هي nowrap وwrap وwrap-reverse.

خاصية flex-basis

تعمل flex-basis كحجم ابتدائي للعنصر المرن قبل توزيع المساحة المتبقية. وهي أكثر مرونة من width لأنها تتكامل مع flex-grow وflex-shrink.

مثال:

.box-2 {
  flex-basis: 10em;
}

هذا يعني أن الحجم الابتدائي للعنصر سيكون 10em، ثم يُعاد حساب حجمه النهائي حسب المساحة المتاحة داخل الحاوية.

الاختصارات Shorthand في Flexbox

اختصار flex

الخاصية flex هي اختصار يجمع بين flex-grow وflex-shrink وflex-basis.

.box-2 {
  flex: 2 1 30em;
}

هذا السطر يعني:

• flex-grow: 2
• flex-shrink: 1
• flex-basis: 30em

اختصار flex-flow

تجمع خاصية flex-flow بين flex-direction وflex-wrap.

.container {
  flex-flow: row wrap;
}

اختصار place-content

تُستخدم place-content كاختصار يجمع بين align-content وjustify-content في كثير من السيناريوهات العملية.

.container {
  place-content: center flex-end;
}

هذا الاختصار مفيد عندما تريد كتابة كود أقل مع الحفاظ على وضوح النتيجة.

متى تستخدم Flexbox ومتى تبحث عن بديل؟

رغم أن Flexbox ممتاز لترتيب العناصر في بعد واحد، سواء أفقياً أو عمودياً، إلا أنه ليس الحل المثالي لكل حالة.

• استخدم Flexbox عندما تريد محاذاة عناصر داخل صف أو عمود.
• استخدمه للقوائم، والأزرار، والبطاقات، وشريط التنقل، والعناصر المتوسطة الحجم.
• أما إذا كنت تبني تخطيطاً كاملاً مع صفوف وأعمدة معقدة، فقد يكون CSS Grid خياراً أفضل.

مصادر إضافية لتطوير مهاراتك

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

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

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