يتحدد نصيب الانكماش بعامل flex-shrink مضروبًا في الحجم الأساسي؛ تساوي العاملين وحده لا يعني اقتطاع عرضين متساويين. [1]
الخلاصة السريعة
- في A نقص العنصر الأول 60 بكسلًا والثاني 40.
- في B صار مجموع الوزنين 700، مع بقاء العجز 100.
- في C بقي الأول 300، وفي D بلغ امتداد المحتوى 500.
- قراءتا B المقاسوَتان تقاربان الكسرين الحسابيين ولا تطابقانهما تمامًا.
ثبت أحجام البداية
بنينا صفًا محليًا عرضه 400 بكسل، ووضعنا فيه صندوقين فارغين أساساهما 300 و200 وارتفاع كل منهما 24 بكسلًا. لا توجد فجوة أو حشوة أو حدود أو هوامش للصندوقين، والنمو صفر والحد الأدنى للعرض صفر. نجري أربع حالات جديدة في Edge 155.0.4283.45، ولا نضع نصًا قد يغير حدود التجربة.
مجموع الأساسين 500، ولذلك تفصل بينه وبين عرض صفنا مئة بكسل. سمينا الصندوق ذي الأساس 300 «الأول» دائمًا، حتى عندما تغيرت نسبة العرضين النهائية. الحروف A وB وC وD تسمي نسخ التجربة، وليست قيمًا للخاصية.
احسب الحالة A قبل القياس
في A جعلنا العاملين 1 و1. الوزنان هما 300 و200؛ نعطي الأول ثلاثة أخماس النقص والثاني خُمسَيه: 60 و40. تصبح النتيجة الحسابية 240 و160. تحقق أن مجموعهما 400 وأن مجموع الاقتطاعين 100. [2]
قسمة المئة بالتساوي كانت ستنتج 250 و150. يظل مجموع هذين الرقمين 400 أيضًا؛ لذا فإن مطابقة المجموع وحدها لا تكشف اختيار التوزيع الخطأ في هذه الحالة. احتفظنا بحصتي الاقتطاع بجانب العرضين، بدل الاكتفاء بخانة جمع أخيرة.
شغل نسخة A كاملة
احفظ المثال صفحة HTML مستقلة وافتحها؛ تعرض وحدة التحكم القياسات. غيّر العاملين فقط لبقية الحالات. [1] [2]
أعطت الصفحة 240 و160 بالفعل. قرأنا العرض الهندسي لكل صندوق، وسجلنا أيضًا scrollWidth للصف في الشيفرة وفي أداة القياس المنفصلة. لم نستنتج الكسور العشرية من صورة الشاشة؛ أخذنا القيم الرقمية كما أعادها المتصفح.
<style>
#row { display: flex; width: 400px; gap: 0; }
#row > div { flex-grow: 0; min-width: 0; height: 24px; }
#first { flex-basis: 300px; flex-shrink: 1; }
#second { flex-basis: 200px; flex-shrink: 1; }
</style>
<div id="row"><div id="first"></div><div id="second"></div></div>
<script>
console.log(
[...document.querySelectorAll("#row > div")]
.map(item => item.getBoundingClientRect().width)
);
console.log(document.querySelector("#row").scrollWidth);
</script>ضاعف عامل الثاني في B
أبقينا الأول عند 1 وجعلنا الثاني 2. صار الوزنان 300 و400؛ نصيباهما من المئة هما 300/7 و400/7. طرحهما من 300 و200 يعطي 1800/7 و1000/7، أي نحو 257.142857 و142.857143. [2]
سجل المتصفح 257.140625 و142.859375. الفرق المطلق عن الحساب الكسري نحو 0.002232 بكسل لكل صندوق، باتجاهين متعاكسين. بقي المجموع المقاس 400. نسجل الكسر وقراءة المتصفح كلًا على حدة كي لا نخفي فرق التقريب بست خانات منتقاة.
في B خسر الأول نحو 42.857 بدل 60؛ غيرنا الوزن الآخر فقط. العامل 2 لم يجعل عرض الثاني ضعف الأول. [2]
اختبر الصفر مرتين
في C جعلنا الزوج 0 و1. بقي الأول 300، وسجل الثاني 100؛ استوعب الثاني مئة النقص كلها. وفي D جعلنا الزوج 0 و0، فبقيا 300 و200. سجلنا للصف نفسه scrollWidth يساوي 500، رغم أن عرضه المعلن بقي 400.
هاتان القراءتان تمنعان وصف كل صف عندنا بأنه انتهى إلى مجموع 400. نحتفظ بحد الحاوية مرسومًا في المقارنة الثانية، ويظهر آخر شريط في D متجاوزًا إياه بمئة. هذا رسم للقيم المقاسة، لا صورة لحركة انكماش زمنية.
| الحالة | عامل الأول/الثاني | عرض الأول | عرض الثاني | امتداد الصف |
|---|---|---|---|---|
| A | 1 / 1 | 240 | 160 | 400 |
| B | 1 / 2 | 257.140625 | 142.859375 | 400 |
| C | 0 / 1 | 300 | 100 | 400 |
| D | 0 / 0 | 300 | 200 | 500 |
افصل المثال عن صفحة أخرى
نتائجنا تخص الصناديق الفارغة والقيود المعلنة. لم نختبر نصًا طويلًا أو عناصر ذات حشوة أو حد أدنى آخر. لا تنقل أرقام الجدول إلى تلك الحالات؛ سجّل إعدادها وقياساتها من جديد. [1]
عند مراجعة نسختك، اكتب أربعة أشياء في كل سطر: الأساسين، وزوج العاملين، والعرضين المقاسين، وامتداد المحتوى. إذا بقي مجموع العرضين صحيحًا بينما اختلف توزيع النقص، فارجع إلى سطر A الحسابي وقارن الحصتين. وإذا كانت الأرقام كسرية، احتفظ بدقتها قبل تقريب العرض للقارئ.
المراجع
- MDN — flex-shrink
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-shrink - MDN — Controlling flex item ratios
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios
أُعدّ هذا المقال بمساعدة الذكاء الاصطناعي وراجعته أدوات ذكاء اصطناعي. لا يُنسب إلى مراجع بشري أو خبير مستقل. منهجية المحتوى.