حاوية Flexbox CSS

Flexbox هو طريقة تخطيط أحادية البُعد قوية تجعل من السهل محاذاة وتوزيع وترتيب العناصر داخل حاوية.

خصائص حاوية Flex

مرجع سريع

الخاصية	القيم	الغرض
`display: flex`	—	إنشاء حاوية فليكس
`flex-direction`	`row`، `row-reverse`، `column`، `column-reverse`	اتجاه المحور الرئيسي
`flex-wrap`	`nowrap`، `wrap`، `wrap-reverse`	هل العناصر تلتف
`justify-content`	`flex-start`، `flex-end`، `center`، `space-between`، `space-around`، `space-evenly`	محاذاة المحور الرئيسي
`align-items`	`flex-start`، `flex-end`، `center`، `stretch`، `baseline`	محاذاة المحور المتقاطع
`align-content`	`flex-start`، `flex-end`، `center`، `space-between`، `space-around`، `stretch`	محور متقاطع متعدد الأسطر
`gap`	`10px`، `10px 20px`	مسافة بين العناصر

flex-direction

يتحكم في اتجاه المحور الرئيسي:

مثال

HTML

<style>
.container {
  display: flex;
  flex-direction: row; /* افتراضي: أفقي */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
</div>

▶ جرّب الكود

justify-content

يُحاذ العناصر على طول المحور الرئيسي:

مثال

HTML

<style>
.container {
  display: flex;
  justify-content: space-between;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">بداية</div>
  <div class="item">وسط</div>
  <div class="item">نهاية</div>
</div>

▶ جرّب الكود

قيم شائعة:

flex-start: العناصر في البداية (افتراضي)
flex-end: العناصر في النهاية
center: العناصر مُوَسَّطة
space-between: مسافة متساوية بين العناصر
space-around: مسافة متساوية حول العناصر
space-evenly: مسافة متساوية بين وحول

align-items

يُحاذ العناصر على طول المحور المتقاطع:

مثال

HTML

<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #2ecc71;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">قصير</div>
  <div class="item">عنصر طويل بمحتوى أكثر</div>
  <div class="item">متوسط</div>
</div>

▶ جرّب الكود

flex-wrap

يتحكم في لف العناصر لأسطر جديدة:

مثال

HTML

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
  width: 300px;
}
.item {
  background: #9b59b6;
  color: white;
  padding: 10px;
  width: 120px;
}
</style>
<div class="container">
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
  <div class="item">عنصر 4</div>
</div>

▶ جرّب الكود

gap

يُعيّن مسافة بين عناصر flex:

مثال

HTML

<style>
.container {
  display: flex;
  gap: 20px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #f39c12;
  color: white;
  padding: 10px;
  flex: 1;
}
</style>
<div class="container">
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
</div>

▶ جرّب الكود

❓ أسئلة شائعة

س هل يتغير اتجاه justify-content عندما يكون flex-direction هو column؟

ج نعم. `justify-content` يعمل دائماً على طول المحور الرئيسي. عندما يكون `flex-direction: row`، المحور الرئيسي أفقي؛ عندما يكون `column`، المحور الرئيسي يصبح عمودياً. تذكر: `justify-content` يتحكم في المحور الرئيسي، `align-items` يتحكم في المحور المتقاطع.

س متى أستخدم flex-wrap؟

ج عندما لا تناسب العناصر في سطر واحد. الافتراضي (`nowrap`) يضغط العناصر؛ `wrap` يتيح لها التدفق إلى السطر التالي. ضروري للتخطيطات المتجاوبة حيث يجب تكدس العناصر على شاشات أصغر.

س ما الفرق بين align-items وalign-content؟

ج `align-items` يتحكم في محاذاة عناصر سطر واحد (داخل كل سطر). `align-content` يتحكم في توزيع مسافة الأسطر المتعددة (يعمل فقط مع أسطر متعددة). سطر واحد: `align-content` يُتجاهل.

📖 ملخص

خصائص حاوية Flexbox تتحكم في السلوك "العام" — كيفية ترتيب العناصر ولفها ومحاذاها
تذكر: justify-content يتحكم في المحور الرئيسي، align-items يتحكم في المحور المتقاطع
إذا تغير flex-direction، هذان يتبادلان اتجاهاتهما الفعالة

📝 تمارين

أساسي

أنشئ حاوية flex بـ 5 عناصر. جرب جميع قيم flex-direction الأربع لمراقبة تغييرات الاتجاه.
وضح جميع قيم justify-content الست بلقطات شاشة للمقارنة.

متوسط

اضبط flex-wrap: wrap وراقب محاذاة الأسطر المتعددة بقيم align-content مختلفة.
قارن خاصية margin مع gap للمسافات — ا Appreciate راحة gap.

تحدٍ

أنشئ شريط تنقل متجاوب: سطح المكتب يحتوي على شعار يساراً وقائمة يميناً؛ المحمول يحتوي على شعار يساراً وهامبرغر يميناً والقائمة مخفية.
أنشئ قائمة بطاقات بـ justify-content: space-between للتوزيع المتساوي، آخر سطر محاذي لليسار.