HTML & CSS
Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026
📅 2026-10-28⏱ 8 دقائق قراءة
في المقال السابق، تعلمت الألوان و Box Model. الآن سنتعلم **Flexbox** و **CSS Grid** — وهما أداتان **حديثتان** لبناء أي تخطيط تريده.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم Flexbox و Grid، مع تمارين وحلول.
## لماذا التخطيط الحديث؟
**قبل Flexbox و Grid:**
- نستخدم `float` و `table` (طرق قديمة).
- صعوبة التوسيط.
- كود معقد.
**مع Flexbox و Grid:**
- ✅ بسيط وسهل.
- ✅ مرن.
- ✅ يعمل على كل الأجهزة.
## الفرق بين Flexbox و Grid
<table>
<thead>
<tr>
<th>المعيار</th>
<th>Flexbox</th>
<th>Grid</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>الاتجاه</strong></td>
<td>بُعد واحد (صف أو عمود)</td>
<td>بُعدان (صفوف وأعمدة)</td>
</tr>
<tr>
<td><strong>الاستخدام</strong></td>
<td>شريط تنقل، بطاقات</td>
<td>تخطيط صفحة كامل</td>
</tr>
<tr>
<td><strong>المرونة</strong></td>
<td>مرن جداً</td>
<td>مرن ومحدد</td>
</tr>
<tr>
<td><strong>التعلم</strong></td>
<td>أسهل</td>
<td>أصعب قليلاً</td>
</tr>
</tbody>
</table>
**القاعدة:**
- **Flexbox:** للتخطيط **الخطي** (صف أو عمود).
- **Grid:** للتخطيط **الشبكي** (صفوف وأعمدة).
## Flexbox
**Flexbox** هو نظام تخطيط **أحادي البعد**.
### الإعداد
```css
.container {
display: flex;
}
```
**هذا كل شيء!** الآن الأطفال داخل `.container` سيصطفون **أفقياً**.
### الاتجاه (flex-direction)
```css
.container {
display: flex;
flex-direction: row; /* أفقي (افتراضي) */
flex-direction: column; /* عمودي */
flex-direction: row-reverse; /* أفقي معكوس */
flex-direction: column-reverse; /* عمودي معكوس */
}
```
### المحاذاة الأفقية (justify-content)
```css
.container {
display: flex;
justify-content: flex-start; /* البداية (افتراضي) */
justify-content: flex-end; /* النهاية */
justify-content: center; /* المنتصف */
justify-content: space-between; /* توزيع متساوٍ */
justify-content: space-around; /* حول العناصر */
justify-content: space-evenly; /* متساوٍ تماماً */
}
```
### المحاذاة العمودية (align-items)
```css
.container {
display: flex;
align-items: stretch; /* تمدد (افتراضي) */
align-items: flex-start; /* البداية */
align-items: flex-end; /* النهاية */
align-items: center; /* المنتصف */
align-items: baseline; /* خط الأساس */
}
```
### الالتفاف (flex-wrap)
```css
.container {
display: flex;
flex-wrap: nowrap; /* بدون التفاف (افتراضي) */
flex-wrap: wrap; /* التفاف */
flex-wrap: wrap-reverse; /* التفاف معكوس */
}
```
### المسافة بين العناصر (gap)
```css
.container {
display: flex;
gap: 20px; /* مسافة موحدة */
gap: 20px 40px; /* عمودي أفقي */
}
```
### توسيط عنصر تماماً
```css
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
```
**هذا الكود** يُوسّط أي عنصر **أفقياً وعمودياً** — الطريقة الأسهل!
### التحكم في العناصر
```css
.item {
flex-grow: 1; /* النمو */
flex-shrink: 1; /* الانكماش */
flex-basis: 200px; /* الحجم الأساسي */
/* اختصار: */
flex: 1; /* grow=1, shrink=1, basis=0 */
flex: 0 1 auto; /* افتراضي */
flex: 1 1 200px; /* grow=1, shrink=1, basis=200px */
}
```
## أمثلة Flexbox
### 1. شريط تنقل
```css
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #3b82f6;
color: white;
}
```
### 2. بطاقات
```css
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
flex: 1 1 300px;
background: white;
padding: 20px;
border-radius: 12px;
}
```
### 3. توسيط
```css
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
}
```
## CSS Grid
**CSS Grid** هو نظام تخطيط **ثنائي البعد**.
### الإعداد
```css
.container {
display: grid;
}
```
### تعريف الأعمدة (grid-template-columns)
```css
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 أعمدة */
grid-template-columns: 1fr 1fr 1fr; /* 3 أعمدة متساوية */
grid-template-columns: repeat(3, 1fr); /* نفس السابق */
grid-template-columns: 1fr 2fr 1fr; /* نسب مختلفة */
}
```
**الوحدة `fr`:** جزء من المساحة المتبقية.
### تعريف الصفوف (grid-template-rows)
```css
.container {
display: grid;
grid-template-rows: 100px 200px 100px;
grid-template-rows: repeat(3, 1fr);
}
```
### المسافات (gap)
```css
.container {
display: grid;
gap: 20px;
gap: 20px 40px; /* عمودي أفقي */
}
```
### التخطيط بالمناطق (grid-template-areas)
```css
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
```
**النتيجة:** تخطيط صفحة كامل بسهولة!
### التوسيط في Grid
```css
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
```
**`place-items: center`** = `align-items` + `justify-items`.
### auto-fit و minmax
```css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
```
**الفائدة:** شبكة **تلقائية** تتكيف مع حجم الشاشة!
## جدول خصائص Flexbox
<table>
<thead>
<tr>
<th>الخاصية</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>display: flex</code></td>
<td>تفعيل Flexbox</td>
</tr>
<tr>
<td><code>flex-direction</code></td>
<td>الاتجاه</td>
</tr>
<tr>
<td><code>justify-content</code></td>
<td>محاذاة أفقية</td>
</tr>
<tr>
<td><code>align-items</code></td>
<td>محاذاة عمودية</td>
</tr>
<tr>
<td><code>flex-wrap</code></td>
<td>الالتفاف</td>
</tr>
<tr>
<td><code>gap</code></td>
<td>المسافة</td>
</tr>
<tr>
<td><code>flex</code></td>
<td>حجم العنصر</td>
</tr>
</tbody>
</table>
## جدول خصائص Grid
<table>
<thead>
<tr>
<th>الخاصية</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>display: grid</code></td>
<td>تفعيل Grid</td>
</tr>
<tr>
<td><code>grid-template-columns</code></td>
<td>الأعمدة</td>
</tr>
<tr>
<td><code>grid-template-rows</code></td>
<td>الصفوف</td>
</tr>
<tr>
<td><code>gap</code></td>
<td>المسافة</td>
</tr>
<tr>
<td><code>grid-template-areas</code></td>
<td>المناطق</td>
</tr>
<tr>
<td><code>place-items</code></td>
<td>محاذاة</td>
</tr>
<tr>
<td><code>auto-fit</code></td>
<td>تكيف تلقائي</td>
</tr>
<tr>
<td><code>minmax()</code></td>
<td>حد أدنى وأقصى</td>
</tr>
</tbody>
</table>
## أمثلة عملية
### 1. شريط تنقل (Flexbox)
```html
<nav class="navbar">
<div class="logo">شعاري</div>
<ul class="links">
<li><a href="/">الرئيسية</a></li>
<li><a href="/about">من نحن</a></li>
<li><a href="/contact">اتصل</a></li>
</ul>
<button>تسجيل الدخول</button>
</nav>
```
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: #1e293b;
color: white;
}
.links {
display: flex;
gap: 30px;
list-style: none;
}
.links a {
color: white;
text-decoration: none;
}
```
### 2. شبكة منتجات (Grid)
```html
<div class="products">
<div class="product">منتج 1</div>
<div class="product">منتج 2</div>
<div class="product">منتج 3</div>
<div class="product">منتج 4</div>
<div class="product">منتج 5</div>
<div class="product">منتج 6</div>
</div>
```
```css
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 40px;
}
.product {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```
### 3. تخطيط صفحة كامل (Grid)
```html
<div class="layout">
<header>الرأس</header>
<aside>الشريط الجانبي</aside>
<main>المحتوى الرئيسي</main>
<footer>التذييل</footer>
</div>
```
```css
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 80px 1fr 60px;
min-height: 100vh;
gap: 20px;
padding: 20px;
}
header { grid-area: header; background: #3b82f6; }
aside { grid-area: sidebar; background: #f3f4f6; }
main { grid-area: main; background: white; }
footer { grid-area: footer; background: #1e293b; color: white; }
```
### 4. توسيط عنصر
**Flexbox:**
```css
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
```
**Grid:**
```css
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
```
## تمارين عملية
### تمرين 1: صف أفقي
أنشئ 3 عناصر في صف أفقي.
**الحل:**
```css
.container {
display: flex;
gap: 20px;
}
.item {
flex: 1;
padding: 20px;
background: #3b82f6;
color: white;
}
```
### تمرين 2: توسيط
وسّط عنصراً في منتصف الشاشة.
**الحل:**
```css
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
```
### تمرين 3: شريط تنقل
أنشئ شريط تنقل: شعار يسار، روابط يمين.
**الحل:**
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #3b82f6;
color: white;
}
.links {
display: flex;
gap: 20px;
list-style: none;
}
```
### تمرين 4: شبكة 3 أعمدة
أنشئ شبكة من 3 أعمدة متساوية.
**الحل:**
```css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
```
### تمرين 5: شبكة تلقائية
أنشئ شبكة تتكيف مع حجم الشاشة.
**الحل:**
```css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
```
### تمرين 6: بطاقة مع صورة ونص
أنشئ بطاقة: صورة يسار، نص يمين (أو العكس).
**الحل:**
```css
.card {
display: flex;
gap: 16px;
align-items: center;
padding: 16px;
background: white;
border-radius: 12px;
}
.card img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
```
### تمرين 7: تخطيط صفحة
أنشئ تخطيط: header، sidebar، main، footer.
**الحل:**
```css
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 1fr 60px;
min-height: 100vh;
gap: 20px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
```
### تمرين 8: معرض صور
أنشئ معرضاً بشبكة تلقائية.
**الحل:**
```css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px;
}
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: العناصر لا تصطف
**السبب:** لم تُفعّل Flexbox.
**الحل:**
```css
.container {
display: flex; /* ← ضروري */
}
```
### 🔴 المشكلة 2: `gap` لا يعمل
**السبب:** `gap` لا يعمل مع `display: inline`.
**الحل:** تأكد من `display: flex` أو `display: grid`.
### 🔴 المشكلة 3: الشبكة لا تتكيف
**السبب:** استخدام قيم ثابتة بدلاً من `fr`.
**الحل:**
```css
/* ❌ */
grid-template-columns: 300px 300px 300px;
/* ✅ */
grid-template-columns: repeat(3, 1fr);
```
### 🔴 المشكلة 4: Overflow في Flexbox
**السبب:** المحتوى أكبر من الحاوية.
**الحل:**
```css
.container {
display: flex;
flex-wrap: wrap;
}
```
## جدول مقارنة سريعة
<table>
<thead>
<tr>
<th>الحالة</th>
<th>استخدم</th>
</tr>
</thead>
<tbody>
<tr>
<td>شريط تنقل</td>
<td>Flexbox</td>
</tr>
<tr>
<td>بطاقات في صف</td>
<td>Flexbox</td>
</tr>
<tr>
<td>توسيط عنصر</td>
<td>Flexbox</td>
</tr>
<tr>
<td>تخطيط صفحة</td>
<td>Grid</td>
</tr>
<tr>
<td>معرض صور</td>
<td>Grid</td>
</tr>
<tr>
<td>شبكة منتجات</td>
<td>Grid</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>فهم Flexbox</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام justify-content و align-items</td>
<td>⬜</td>
</tr>
<tr>
<td>توسيط عنصر بـ Flexbox</td>
<td>⬜</td>
</tr>
<tr>
<td>فهم CSS Grid</td>
<td>⬜</td>
</tr>
<tr>
<td>grid-template-columns و areas</td>
<td>⬜</td>
</tr>
<tr>
<td>auto-fit و minmax</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الثمانية</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت Flexbox و Grid، أنت جاهز للمقال الأخير:
1. **مشروع متكامل** — موقع شخصي كامل.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ Flexbox للتخطيط الخطي.
- ✅ `justify-content` و `align-items`.
- ✅ CSS Grid للتخطيط الشبكي.
- ✅ `grid-template-columns` و `grid-template-areas`.
- ✅ `auto-fit` و `minmax`.
- ✅ توسيط عنصر (Flexbox و Grid).
- ✅ حل 8 تمارين عملية.
**تذكر:** Flexbox و Grid هما **أداتان قويتان**. أتقنهما، وستتمكن من بناء أي تخطيط.