**order:** يتحكم في ترتيب عرض عناصر Flex دون تغيير HTML. القيمة الافتراضية 0. العناصر ذات القيمة الأصغر تظهر أولاً.
**flex-basis:** الحجم الأساسي للعنصر قبل توزيع المساحة الإضافية. مثل width في row، وheight في column. - `auto` — يعتمد على المحتوى (الافتراضي) - `0` — يبدأ من الصفر ويعتمد على flex-grow
**flex-grow:** نسبة نمو العنصر لملء المساحة المتبقية. القيمة 0 = لا ينمو.
**flex-shrink:** نسبة تقلص العنصر إذا ضاقت المساحة. القيمة 0 = لا يتقلص.
**flex (الاختصار):** `flex: grow shrink basis;` - `flex: 1` = `flex: 1 1 0` — ينمو ويتقلص بالتساوي - `flex: auto` = `flex: 1 1 auto` - `flex: none` = `flex: 0 0 auto` — حجم ثابت
| 1 | /* عمود ينمو لملء المساحة */ |
| 2 | .main-content { flex: 1; } |
| 3 | .sidebar { flex: 0 0 280px; } /* عرض ثابت */ |
| 4 | |
| 5 | /* توزيع متساوٍ */ |
| 6 | .tab { flex: 1; text-align: center; } |
مثال 1: تخطيط Sidebar + Content
| 1 | .app-layout { |
| 2 | display: flex; |
| 3 | min-height: 100vh; |
| 4 | } |
| 5 | |
| 6 | .sidebar { |
| 7 | flex: 0 0 260px; /* ثابت 260px، لا ينمو ولا يتقلص */ |
| 8 | background: #1e293b; |
| 9 | padding: 24px 0; |
| 10 | } |
| 11 | |
| 12 | .main-content { |
| 13 | flex: 1; /* يأخذ كل المساحة المتبقية */ |
| 14 | padding: 32px; |
| 15 | overflow-y: auto; |
| 16 | } |
| 17 | |
| 18 | /* في الموبايل */ |
| 19 | @media (max-width: 768px) { |
| 20 | .app-layout { flex-direction: column; } |
| 21 | .sidebar { flex: 0 0 auto; } |
| 22 | } |