CSS: حاوية Flexbox CSS
Flexbox هو طريقة تخطيط أحادية البُعد قوية تجعل من السهل محاذاة وتوزيع وترتيب العناصر داخل حاوية.
1. خصائص حاوية Flex
(1) مرجع سريع
| الخاصية | القيم | الغرض |
|---|---|---|
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 |
مسافة بين العناصر |
2. 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>
3. 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: مسافة متساوية بين وحول
4. 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>
5. 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>
6. 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للتوزيع المتساوي، آخر سطر محاذي لليسار.
