محاذاة العناصر في Flexbox تتم عبر أربع خصائص رئيسية:
**justify-content** — محاذاة على المحور الرئيسي (أفقي في row): - `flex-start` — البداية (الافتراضي) - `flex-end` — النهاية - `center` — توسيط - `space-between` — مسافات بين العناصر (أول وآخر على الحواف) - `space-around` — مسافات حول كل عنصر - `space-evenly` — مسافات متساوية تماماً بين وحول العناصر
**align-items** — محاذاة على المحور الثانوي (عمودي في row): - `stretch` — يمتد لملء الحاوية (الافتراضي) - `flex-start / flex-end / center` - `baseline` — المحاذاة على خط القاعدة للنصوص
**align-content** — محاذاة الصفوف المتعددة (يؤثر فقط عند flex-wrap: wrap): نفس قيم justify-content.
**align-self** — يتجاوز align-items لعنصر واحد بعينه.
| 1 | /* توسيط تام */ |
| 2 | .centered { |
| 3 | display: flex; |
| 4 | justify-content: center; |
| 5 | align-items: center; |
| 6 | } |
| 7 | |
| 8 | /* توزيع متساوٍ */ |
| 9 | .toolbar { |
| 10 | display: flex; |
| 11 | justify-content: space-between; |
| 12 | align-items: center; |
| 13 | } |
مثال 1: جميع قيم justify-content
| 1 | /* شريط تنقل: شعار + قائمة + زر */ |
| 2 | .navbar { |
| 3 | display: flex; |
| 4 | justify-content: space-between; |
| 5 | align-items: center; |
| 6 | padding: 0 32px; |
| 7 | height: 72px; |
| 8 | } |
| 9 | |
| 10 | /* أزرار في المنتصف */ |
| 11 | .button-group { |
| 12 | display: flex; |
| 13 | justify-content: center; |
| 14 | gap: 12px; |
| 15 | } |
| 16 | |
| 17 | /* بطاقة: أيقونة على نفس مستوى النص */ |
| 18 | .card-header { |
| 19 | display: flex; |
| 20 | align-items: center; |
| 21 | gap: 12px; |
| 22 | } |
| 23 | |
| 24 | /* عنصر واحد مختلف */ |
| 25 | .card-actions { |
| 26 | display: flex; |
| 27 | align-items: center; |
| 28 | } |
| 29 | .card-actions .delete-btn { |
| 30 | align-self: flex-end; /* يختلف عن الباقين */ |
| 31 | } |