**Flexbox** (Flexible Box Layout) هو نظام تخطيط أحادي البُعد يُتيح توزيع المساحة ومحاذاة العناصر بسهولة، سواءً أفقياً أو عمودياً.
**لتفعيل Flexbox:** أضف `display: flex` أو `display: inline-flex` على العنصر الأب (Flex Container). سيتحول أبناؤه المباشرون إلى **Flex Items**.
**مفهومان أساسيان:** 1. **المحور الرئيسي (Main Axis):** الاتجاه الذي تتدفق فيه العناصر (أفقي بالافتراضي). 2. **المحور الثانوي (Cross Axis):** عمودي على المحور الرئيسي.
**الفرق بين flex وinline-flex:** - `flex`: الحاوية تأخذ كامل عرض السطر (block-level). - `inline-flex`: الحاوية تتناسب مع محتواها (inline-level).
**خصائص الـ Flex Container:** flex-direction، flex-wrap، flex-flow، justify-content، align-items، align-content، gap.
**خصائص الـ Flex Item:** order، flex-grow، flex-shrink، flex-basis، flex، align-self.
| 1 | /* تفعيل Flexbox */ |
| 2 | .container { display: flex; } |
| 3 | |
| 4 | /* توسيط عنصر أفقياً وعمودياً */ |
| 5 | .centered { |
| 6 | display: flex; |
| 7 | justify-content: center; |
| 8 | align-items: center; |
| 9 | min-height: 100vh; |
| 10 | } |
مثال 1: توسيط بـ Flexbox (الأسهل في CSS)
| 1 | /* توسيط كامل */ |
| 2 | .full-center { |
| 3 | display: flex; |
| 4 | justify-content: center; /* أفقي */ |
| 5 | align-items: center; /* عمودي */ |
| 6 | } |
| 7 | |
| 8 | /* شريط تنقل */ |
| 9 | .navbar { |
| 10 | display: flex; |
| 11 | justify-content: space-between; |
| 12 | align-items: center; |
| 13 | padding: 0 24px; |
| 14 | height: 64px; |
| 15 | } |
| 16 | |
| 17 | /* بطاقات جنباً لجنب */ |
| 18 | .cards { |
| 19 | display: flex; |
| 20 | gap: 16px; |
| 21 | flex-wrap: wrap; |
| 22 | } |