حاوية Flex في CSS
مقدمة Flexbox حوّلت الأب إلى حاوية. هذا الدرس يبقى على الحاوية: اختر المحور الرئيسي، وزّع المساحة، حاذي على المحور المتقاطع، ولفّ الأسطر. نمو العنصر (flex-grow، flex-basis) ينتظر درس Flex Items.
مجموعة أدوات حاوية flex
📊 حاوية flex بنظرة سريعة
| الخاصية | المهمة اليومية |
|---|---|
flex-direction |
يحدّد المحور الرئيسي: row أو column أو المتغيرات العكسية |
justify-content |
يوزّع العناصر على المحور الرئيسي |
align-items |
يحاذي العناصر على المحور المتقاطع (سطر واحد) |
flex-wrap |
يسمح للعناصر بالالتفاف إلى أسطر جديدة |
align-content |
يرتّب عدة أسطر flex على المحور المتقاطع |
gap |
يباعد العناصر (والأسطر) دون صراع margin |
تذكّر: justify يسير على المحور الرئيسي؛ align يسير على المحور المتقاطع. غيّر flex-direction إلى column فتدور هذه الأدوار مع المحاور.
flex-direction — اختر المحور الرئيسي
الافتراضي row. استخدم column للتكديس العمودي مثل قوائم جانبية أو مجموعات نماذج. المتغيرات العكسية تقلب الترتيب البصري — تحقق أن ترتيب القراءة يبقى منطقيًا.
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — التوزيع على المحور الرئيسي
وزّع الفراغ الحر على المحور الرئيسي: flex-start، center، flex-end، space-between، space-around، space-evenly. الهيدرات غالبًا تريد space-between.
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — المحاذاة على المحور المتقاطع
على سطر واحد، يتحكم align-items بالارتفاع/الموضع العمودي في صف (أو الأفقي في عمود). stretch هو الافتراضي؛ center غراء واجهات يومي.
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
اللف وalign-content
مع flex-wrap: wrap، العناصر الزائدة تكوّن أسطرًا جديدة. align-content يرتّب تلك الأسطر عند وجود فراغ متقاطع حر — ولا يفعل الكثير إن كان اللف nowrap.
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
عادة حاوية هادئة
اضبط الاتجاه أولًا، ثم justify، ثم align-items، ثم اللف إن لزم. أبقِ gap للفراغات. احفظ نمو كل عنصر للدرس التالي — واترك شبكات الصفحة ثنائية الأبعاد لـ CSS Grid لاحقًا.
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
جرّب بنفسك
- ابنِ
.stackبـflex-direction: columnوثلاث كتل. - قارن
justify-content: space-betweenمعcenterعلى شريط عريض. - ارفع
min-heightوجرّبalign-items: stretchمقابلcenter. - لفّ رقائق واطّلع على
align-content: flex-start. - اكتب جملة: أي خصائص تنتقل للعناصر لاحقًا، لا للحاوية؟
أخطاء شائعة
- خلط justify وalign ذهنيًا بعد تغيير الاتجاه
- استخدام
row-reverseدون التحقق من ترتيب لوحة المفاتيح/القراءة - توقع أن يهمّ
align-contentمعnowrap - وضع
flex-growعلى الحاوية بدل العنصر - طلب تخطيطات Grid ثنائية الأبعاد كاملة من خصائص حاوية Flexbox
ملخص
- خصائص الحاوية توجّه الاتجاه والتوزيع والمحاذاة واللف
flex-directionيعرّف المحور الرئيسيjustify-contentمقابلalign-itemsيتبعان الرئيسي مقابل المتقاطع- اللف يفعّل حزم متعددة الأسطر؛
align-contentيرتّب تلك الأسطر - نمو مستوى العنصر ينتظر درس Flex Items
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى