**flex-direction:** يحدد اتجاه المحور الرئيسي: - `row` — أفقي من يسار لجمين (الافتراضي) - `row-reverse` — أفقي من يمين لشمال - `column` — عمودي من أعلى لأسفل - `column-reverse` — عمودي من أسفل لأعلى
**flex-wrap:** هل تنتقل العناصر الزائدة لسطر جديد؟ - `nowrap` — سطر واحد حتى لو فاض (الافتراضي) - `wrap` — تنتقل لسطر جديد - `wrap-reverse` — تنتقل للسطر بالترتيب المعاكس
**flex-flow:** اختصار لـ flex-direction + flex-wrap: `flex-flow: row wrap;`
**استخدامات flex-direction: column:** - شريط جانبي عمودي - بطاقة من أعلى لأسفل - تخطيط Sidebar layout
| 1 | /* تخطيط أفقي ملتف */ |
| 2 | .grid { |
| 3 | display: flex; |
| 4 | flex-flow: row wrap; |
| 5 | gap: 16px; |
| 6 | } |
| 7 | |
| 8 | /* تخطيط عمودي */ |
| 9 | .sidebar { |
| 10 | display: flex; |
| 11 | flex-direction: column; |
| 12 | gap: 8px; |
| 13 | } |
مثال 1: قائمة عمودية بـ flex-direction: column
| 1 | .sidebar-menu { |
| 2 | display: flex; |
| 3 | flex-direction: column; |
| 4 | gap: 4px; |
| 5 | width: 240px; |
| 6 | padding: 16px; |
| 7 | } |
| 8 | |
| 9 | .sidebar-menu .menu-item { |
| 10 | display: flex; |
| 11 | align-items: center; |
| 12 | gap: 12px; |
| 13 | padding: 10px 12px; |
| 14 | border-radius: 8px; |
| 15 | cursor: pointer; |
| 16 | } |
| 17 | |
| 18 | .sidebar-menu .menu-item:hover { |
| 19 | background: #f1f5f9; |
| 20 | } |