في هذا الدرس 5تصفّح المواضيع
عندما تكون الحاوية المرنة ذات السطر الواحد flex-wrap: nowrap أضيق من مجموع الأحجام الأساسية flex-basis لأبنائها، ينشأ عجز في المساحة على المحور الرئيسي. وبدلاً من السماح للعناصر بالفيضان خارج إطار الحاوية فوراً، يمنح نظام Flexbox كل عنصر قيمة افتراضية هي flex-shrink: 1.
بفضل القيمة الافتراضية flex-shrink: 1 تتعاون العناصر وتنكمش تلقائياً إلى أقل من حجمها الأساسي لتبقى مصفوفة داخل حدود الحاوية طالما يسمح محتواها النصي بذلك.
يتحول الانكماش التلقائي إلى خلل بصري واضح عندما تجاور فقرة إشعار طويلة صورة رمزية دائرية بعرض 48px أو شارة أيقونة أو زر إجراء؛ إذ يضغط النص الطويل على الأيقونة فيحول الدائرة إلى شكل بيضاوي مشوه. يحل التصريح الحاسم flex-shrink: 0 هذه المشكلة فوراً بتثبيت بُعد الأيقونة أو الزر وإجبار كتلة النص وحدها على الانكماش والالتفاف.
.alert-row {
display: flex;
gap: 12px;
}
.icon-badge {
width: 48px;
height: 48px;
flex-shrink: 0;
}يؤدي إسناد معامل أكبر مثل flex-shrink: 2 أو flex-shrink: 3 إلى جعل العنصر يتحمل حصة أكبر من عجز المساحة مقارنةً بقرينه الذي يحمل flex-shrink: 1، فينكمش بسرعة أكبر كلما ضاقت الحاوية.
وخلافاً لخاصية التمدد، تضرب معادلة W3C معامل flex-shrink في وزن الحجم الأساسي flex-basis لكل عنصر؛ وبذلك يتنازل اللوح العريض ذو 300px عن بكسلات أكثر من الشارة الصغيرة ذات 80px حمايةً للعناصر الصغيرة من الاختفاء المبكر.
.tight-row {
display: flex;
width: 340px;
}
.box-slow {
flex-basis: 220px;
flex-shrink: 1;
}
.box-fast {
flex-basis: 220px;
flex-shrink: 3;
}مختبر تفاعلي — التحكم في التقلص بـ flex-shrink
حتى عند إسناد معامل تقلص كبير مثل flex-shrink: 5 لن ينكمش العنصر المرن إلى أقل من عرض أطول كلمة متصلة أو صورة ثابتة بداخله؛ ويعود الفضل في هذه الحماية التلقائية إلى القيمة الافتراضية min-width: auto في الصفوف أو min-height: auto في الأعمدة، والتي تمنع تداخل السطور النصية وتشابكها.
يمكنك رفع هذه الأرضية عمداً بتحديد min-width: 140px، أو خفضها عبر min-width: 0 عند قص النصوص الطويلة مع overflow: hidden. وكما هو الحال في التمدد، تُعد الأرقام السالبة مثل flex-shrink: -1 غير صالحة ويتجاهلها المتصفح تماماً.
لتشخيص سبب انضغاط أيقونة أو فيضان سطر مرن، افحص العنصر في أدوات المطور DevTools عبر لوحتي Layout وComputed لمراجعة قيم flex-shrink وflex-basis وmin-width الفعلية. يلخص الجدول الآتي حالات استخدام flex-shrink ومقارنتها.
| التصريح | سلوك التقلص عند ضيق الحاوية | الاستخدام العملي الشائع |
|---|---|---|
flex-shrink: 1 | انكماش نسبي تلقائي افتراضي | الفقرات النصية والبطاقات المرنة المعتادة |
flex-shrink: 0 | منع الانكماش تحت الحجم الأساسي نهائياً | الأيقونات والصور الرمزية والأزرار الثابتة |
flex-shrink: 2 فأكثر | التنازل عن حصة أكبر من عجز المساحة | الألواح الثانوية التي تفسح المجال أولاً |
min-width: auto | إيقاف الانكماش عند عرض أطول كلمة | حماية تلقائية للنصوص من التداخل |
flex-shrink: -1 | صيغة غير صالحة يتجاهلها المتصفح | مرفوضة دائماً لأن المعاملات غير سالبة فقط |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس تعرّفت على دور القيمة الافتراضية flex-shrink: 1 في منع الفيضان، وكيفية حماية الأيقونات والأزرار من التشوه عبر flex-shrink: 0، وتفاعل معاملات التقلص المرجحة مع أرضية المحتوى min-width: auto. وفي الخطوة التالية ننتقل إلى درس خاصية align-self مع Flexbox في لغة CSS لتخصيص محاذاة عنصر مرن منفرد على المحور المتعامد.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Space Deficit عجز المساحة السالب
- المقدار الذي يتجاوز به مجموع الأحجام الأساسية والفجوات البُعد الداخلي للحاوية المرنة.
- للمراجعة
- 02 Shrink Lock (flex-shrink 0) قفل الانكماش بقيمة الصفر
- ضبط flex-shrink على 0 لتحتفظ الأيقونات والشارات والأزرار بأبعادها الكاملة داخل الحاويات الضيقة.
- للمراجعة
- 03 Basis-Weighted Shrinkage التقلص المرجح بالحجم الأساسي
- حساب يضرب معامل التقلص في الحجم الأساسي ليتنازل العنصر الأكبر عن مساحة أوسع من العنصر الصغير.
- للمراجعة
- 04 Minimum Content Floor أرضية المحتوى الأدنى
- حد الحماية الافتراضي min-width auto الذي يوقف انكماش العنصر المرن عند عرض أطول كلمة مفردة بداخله.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة الأنماط المسؤولة عن ضبط الانكماش المرن وحماية العناصر من الفيضان أو التشوه.
- للمراجعة
- 02 W3C W3C
- World Wide Web Consortium
- المنظمة العالمية التي وضعت خوارزمية التقلص المرجح في مواصفة الصندوق المرن.
- للمراجعة
- 03 UI UI
- User Interface
- عناصر واجهة المستخدم كالصور الرمزية والأزرار التي تُحمى من الانضغاط عبر قيمة الصفر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
طبّق العرض 48px والارتفاع 48px وتدوير الحواف 50% مع flex-shrink بقيمة 0 على شارة داخل صف مرن ضيق.
-
امنح عنصرين بحجم أساسي 220px معاملي التقلص 1 و 3 داخل حاوية بعرض 340px وافحص عرضيهما النهائيين.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.