جاري التحميل...

عناصر Flex في CSS

درس Flex Container يوجّه الأب. عناصر flex تجيب عن سؤال آخر: كيف ينمو كل ابن ويتقلص ويبدأ بالحجم داخل ذلك الصف أو العمود؟ أتقن basis وgrow وshrink قبل أن تطارد أنماط flex المتجاوبة.

صندوق أدوات عناصر flex

📊 عناصر flex في لمحة

الخاصية	الدور اليومي
`flex-basis`	الحجم الرئيسي الابتدائي قبل توزيع المساحة الحرة
`flex-grow`	كم من المساحة المتبقية يطالب بها هذا العنصر (معامل بلا وحدة)
`flex-shrink`	مدى استعداد العنصر للتقلص عندما تضيق المساحة
`flex`	اختصار لـ grow وshrink وbasis
`align-self`	يتجاوز `align-items` الخاص بالحاوية لعنصر واحد
`order`	يغيّر الترتيب البصري (استخدمه بحذر — أبقِ DOM وإمكانية الوصول سليمة)

فكّر في basis كطول البداية المفضّل للعنصر على المحور الرئيسي. ثم يتفاوض grow وshrink على ما تبقى من مساحة حرة أو ناقصة.

flex-grow — خذ المساحة المتبقية

معامل 1 يسمح للعنصر بالتمدد في المساحة الحرة. معاملات الأشقاء تتنافس: عنصران بـ flex-grow: 1 يقتسمان المتبقي بالتساوي.

Growing main column

css

.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — ابدأ من حجم

flex-basis يضبط الحجم الرئيسي الابتدائي قبل حساب grow/shrink. فضّل basis لخوارزمية flex؛ ما زال width/height مهمّين، لكن نقطة البداية الأصلية لـ flex هي basis.

Sidebar with basis

css

.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — أعد المساحة

عندما يضيق الصف، تقرّر معاملات shrink من ينضغط. flex-shrink: 0 يحمي الأيقونات أو القضبان الثابتة من السحق.

Protect from squash

css

.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

اختصار flex

flex: grow shrink basis يجمع الثلاثة. إعدادات هادئة شائعة: flex: 1 (نمو، السماح بالتقلص، basis تلقائي) لابن يملأ المساحة؛ flex: 0 0 auto لشريحة صلبة.

Flex shorthand

css

.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — عنصر واحد، محاذاة عرضية مختلفة

تجاوز align-items الخاص بالحاوية لابن واحد. مفيد عندما يجب أن تلتصق شارة واحدة بالبداية بينما يبقى الأشقاء في المنتصف.

Align-self override

css

.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

عادة هادئة لعنصر flex

basis أولاً للحجم المقصود، ثم معاملات grow/shrink، ثم الاختصار للترتيب. استخدم align-self باعتدال. تجنّب حيل order التي تخلط تدفق لوحة المفاتيح وقارئ الشاشة — واترك أنماط flex مع استعلامات الوسائط لدرس Flex Responsive.

Named item roles

css

.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

جرّب بنفسك

اصنع صفاً رئيسيًا + جانبيًا؛ أعطِ الرئيسي flex-grow: 1.
اضبط الجانبي بـ flex-basis: 14rem وflex-shrink: 0.
احمِ أيقونة بـ flex-shrink: 0.
أعد كتابة grow/shrink/basis باختصار flex.
تجاوز محاذاة عرضية لابن واحد بـ align-self.

أخطاء شائعة

وضع flex-grow على الحاوية بدل العنصر
الخلط بين width وflex-basis ثم التساؤل لماذا يختلف حساب flex
إعادة الترتيب بـ order وكسر ترتيب التبويب/المصدر
ترك الشعارات تُسحق لأن shrink بقي على الافتراضي
معاملة هذا الدرس كوحدة Flex Responsive

ملخص

عناصر flex تتحكم في النمو والتقلص وbasis الابتدائي
flex-grow يشارك المساحة الحرة؛ flex-shrink يشارك الضغط
flex-basis هو حجم البداية على المحور الرئيسي
اختصار flex وalign-self يصقلان الأبناء فرديًا
أنماط flex المتجاوبة تأتي لاحقًا؛ استخدم order بحذر

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة