فليكس بوكس (Flexbox)
نظام Flexbox هو أقوى أداة في CSS لترتيب العناصر وتوزيع المساحات بمرونة عالية دون الحاجة لاستخدام Float.
1. تفعيل الفليكس وتحديد الاتجاه (Flex-Direction)
لتفعيل النظام يجب إعطاء الحاوية (الأب) خاصية display: flex، ثم يمكن تغيير اتجاه رص العناصر.
المعاينة
طبيعي (row) - الافتراضي:
1
2
3
عامودي (column):
1
2
3
شرح الكود:
- بمجرد إعطاء الأب
display: flex;ستترتب جميع الأبناء جانباً إلى جنب (كصف) بشكل تلقائي. flex-direction: column;يرتب الأبناء فوق بعضهم.- يمكن أيضاً استخدام
row-reverseأوcolumn-reverseلعكس الترتيب!
2. التوزيع والمحاذاة الأفقية (Justify-Content)
للتحكم في أماكن العناصر والمسافات بينها على طول المحور الرئيسي (الذي هو أفقي في حالة الـ row).
المعاينة
Center (للمنتصف):
1
2
3
Space-Between (توزيع الفراغ بينها):
1
2
3
Space-Around (مسافة حول كل عنصر):
1
2
3
شرح الكود:
هذا المثال يوضح التطبيق العملي للخصائص المذكورة أعلاه في CSS.
3. المحاذاة العمودية (Align-Items)
للمحاذاة على المحور المعاكس (عامودي).
المعاينة
توسيط تام (أفقي وعامودي معاً):
Center!
شرح الكود:
- لجعل عنصر يتوسط الشاشة أو الحاوية الخاصة به من كل الجهات، هذا هو الكود السحري:
display: flex; justify-content: center; align-items: center;
4. التفاف العناصر (Flex-Wrap)
ماذا يحدث عندما لا تتسع المساحة لجميع العناصر؟
المعاينة
السماح بالنزول لسطر جديد (wrap):
عنصر 1
عنصر 2
عنصر 3
عنصر 4
عنصر 5
شرح الكود:
- بشكل افتراضي يحاول Flexbox ضغط جميع العناصر في سطر واحد مهما كان عددها.
flex-wrap: wrap;تجبر العناصر على النزول إلى السطر التالي إذا انتهت مساحة الأب، مما يساعد في التجاوب (Responsive Design).