Flexbox في CSS: ترتيب العناصر في صف أو عمود

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

الفكرة: حاوية وعناصر

Flexbox يعمل على مستويين:

• الحاوية (Flex Container): العنصر الأب الذي تكتب له display: flex.
• العناصر (Flex Items): أبناؤه المباشرون، الذين يترتبون تلقائياً بداخله.

<div class="row">
  <div>أ</div>
  <div>ب</div>
  <div>ج</div>
</div>

.row {
  display: flex;
}

بهذا السطر الواحد تصطف العناصر الثلاثة في صف واحد بدلاً من أن يكون كل منها في سطر مستقل.

تخيّل الحاوية مثل رف في مكتبة، والعناصر مثل الكتب. Flexbox يمنحك أوامر لترتيب الكتب: صفّها من اليمين، أو وزّعها على طول الرف، أو اجمعها في المنتصف.

الاتجاه: flex-direction

.row    { flex-direction: row; }    /* صف أفقي (الافتراضي) */
.column { flex-direction: column; } /* عمود رأسي */

الاتجاه يحدد المحور الرئيسي (Main Axis): في row المحور الرئيسي أفقي، وفي column يصبح رأسياً. والمحور الآخر العمودي عليه يسمى المحور المتقاطع (Cross Axis). هذه الفكرة مهمة لفهم الخاصيتين التاليتين.

Flexbox يفهم العربية

في صفحة اتجاهها rtl، يبدأ الصف row من اليمين تلقائياً. لذلك لا تحتاج أي تعديل لتصميم عربي، وهذا من أجمل مزايا Flexbox.

التوزيع على المحور الرئيسي: justify-content

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

القيمة	النتيجة في صف
flex-start	العناصر مجمّعة في البداية (اليمين في العربية)
flex-end	مجمّعة في النهاية
center	مجمّعة في المنتصف
space-between	الأول في البداية، والأخير في النهاية، والمسافات متساوية بينها
space-around	مسافة متساوية حول كل عنصر
space-evenly	كل المسافات متساوية تماماً، حتى عند الأطراف

space-between هي سر أغلب أشرطة التنقل: الشعار في جهة، والقائمة في الجهة الأخرى.

المحاذاة على المحور المتقاطع: align-items

إذا كانت الحاوية أطول من العناصر، تحدد align-items مكانها رأسياً في الصف:

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

القيم: stretch (الافتراضي: تمتد العناصر لتملأ الارتفاع)، و flex-start (أعلى)، و center (منتصف)، و flex-end (أسفل).

التوسيط الكامل، أشهر مشكلة في CSS تاريخياً، أصبح ثلاثة أسطر:

.center-box {
  display: flex;
  justify-content: center; /* أفقياً */
  align-items: center;     /* رأسياً */
  height: 200px;
}

المسافة بين العناصر: gap

.row {
  display: flex;
  gap: 16px;
}

gap تضع مسافة بين العناصر فقط، وليس على الأطراف. وهي أنظف بكثير من وضع margin لكل عنصر.

الالتفاف: flex-wrap

افتراضياً، يحاول Flexbox حشر كل العناصر في سطر واحد حتى لو ضاقت الشاشة. لجعلها تنتقل لسطر جديد عند الحاجة:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

هذا مهم جداً للموبايل: البطاقات تظهر ثلاثاً بجانب بعضها على الكمبيوتر، ثم تلتف تلقائياً على الشاشة الصغيرة.

خصائص العناصر نفسها: flex-grow

حتى الآن كتبنا خصائص للحاوية. أشهر خاصية تُكتب للعنصر هي flex-grow، وتحدد كيف يأخذ العنصر المساحة الفارغة:

.search-input {
  flex-grow: 1; /* خذ كل المساحة المتبقية */
}

مثال عملي: شريط بحث فيه حقل وزر. الزر بحجمه الطبيعي، والحقل يتمدد ليملأ الباقي. ويمكنك أيضاً استخدام الاختصار flex: 1 لنفس الغرض تقريباً.

جرّب بنفسك

هذا شريط تنقل وشريط بحث وبطاقات. غيّر justify-content في الشريط إلى center ثم space-evenly، وغيّر flex-direction للبطاقات إلى column:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; } .navbar { display: flex; justify-content: space-between; align-items: center; background: #141826; color: white; padding: 10px 14px; border-radius: 10px; } .links { display: flex; gap: 12px; } .search { display: flex; gap: 8px; margin: 14px 0; } .search input { flex-grow: 1; padding: 8px; } .cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; } .card { flex: 1; min-width: 100px; padding: 20px; background: #ececff; border-radius: 12px; text-align: center; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• كتابة display: flex على العناصر بدل الحاوية: الخاصية تُكتب للأب، فيرتب أبناءه المباشرين.
• الخلط بين justify-content و align-items: الأولى على المحور الرئيسي (أفقي في الصف)، والثانية على المحور المتقاطع. وعند تغيير الاتجاه إلى column تتبادلان الدور.
• نسيان flex-wrap: فتنضغط العناصر وتخرج عن الشاشة على الموبايل.

اختبر نفسك

سؤال

أي خاصية توزع العناصر على المحور الرئيسي، مثل وضع الشعار في جهة والقائمة في الجهة الأخرى؟

flex-wrapjustify-contentalign-items

سؤال

في صفحة عربية dir='rtl' ومعها display: flex، من أين يبدأ العنصر الأول؟

من المنتصفمن اليسار دائماًمن اليمين

الخلاصة

• display: flex على الحاوية يرتب أبناءها المباشرين في صف.
• flex-direction يحدد الاتجاه: row أو column.
• justify-content للتوزيع على المحور الرئيسي، و align-items للمحاذاة على المحور المتقاطع.
• gap للمسافات بين العناصر، و flex-wrap: wrap للالتفاف على الشاشات الصغيرة.
• flex-grow: 1 يجعل العنصر يأخذ المساحة المتبقية.