51. مقدمة في Flexbox (تخطيط الصندوق المرن)
Flexbox هو نظام تخطيط أحادي البعد مصمم لتوزيع المساحة بين العناصر في صف واحد أو عمود واحد. لقد حل تقريباً جميع صداعات المحاذاة والتوسيط في طرق CSS القديمة.
نموذج Flexbox
يتضمن Flexbox مكونين رئيسيين:
- حاوية Flex (Flex Container): العنصر الأب حيث يتم تطبيق
display: flex;. - عناصر Flex (Flex Items): الأطفال المباشرون لحاوية Flex.
عندما تضبط display: flex; على حاوية، يتم إنشاء محورين:
- المحور الرئيسي (Main Axis): الاتجاه الأساسي الذي يتم ترتيب العناصر فيه (الافتراضي أفقي).
- المحور المتقاطع (Cross Axis): المحور المتعامد على المحور الرئيسي (الافتراضي عمودي).
البداية
لتفعيل Flexbox ، ببساطة قم بتطبيق خاصية display على العنصر الأب:
html
1
2
3
css .flex-container { display: flex; /* التخطيط الافتراضي: العناصر تذهب أفقياً (المحور الرئيسي) */ }
.item { padding: 20px; border: 1px solid black; } /* النتيجة: جميع العناصر تجلس جنباً إلى جنب في سطر واحد */
فائدة رئيسية: يدير Flexbox تلقائياً حجم وموضع العناصر لملء المساحة المتاحة، مما يجعل المحاذاة (خاصة التوسيط الرأسي) سهلة للغاية.