{"id":"l-css-2-1","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"توقّع كيف يحدّد flexbox أحجام العناصر من flex-basis والنموّ والتقلّص، وعالج فخّ الفيضان الناتج عن min-width: auto، وابنِ صفوفًا تلتفّ دون media queries.","html":"

صف الجلسة في جدول Waypoint ثلاثة أشياء على خط واحد: الوقت والعنوان وزر الحفظ. يبدو جيدًا إلى أن يجدول فريق المحتوى جلسة بعنوان «Shipping Accessible Design Systems Across Twelve Product Teams Without Losing Your Mind»، فينزلق زر الحفظ خارج حافة البطاقة. لا شيء في الـ CSS يذكر أيّ عرض، فمن أين جاء الفيضان؟

\n

جاء من flexbox وهو يفعل بالضبط ما تقوله خوارزميته. وحين تعرف الخوارزمية، يستغرق إصلاح هذا الخطأ ثلاثين ثانية.

\n

كيف يقرّر flexbox الأحجام

\n

يحدّد flexbox أحجام العناصر على امتداد المحور الرئيسي على مرحلتين:

\n
    \n
  1. الحجم المبدئي (hypothetical size). يبدأ كل عنصر من flex-basis الخاصة به. ومع القيمة الافتراضية auto يكون هذا هو width إن كان مضبوطًا، وإلا فعرض محتواه.
    2. \n
  2. توزيع الفرق. تقارن الحاوية مجموع الأسس (مع الفجوات) بحجمها هي. إن بقيت مساحة، تتقاسمها العناصر التي لها flex-grow بنسبة معاملات نموّها. وإن لم تكفِ المساحة، تتنازل العناصر التي لها flex-shrink عن جزء منها، بوزن هو معامل التقلّص مضروبًا في الأساس، فتتقلّص العناصر الكبيرة أكثر.
    3. \n
\n
\n الصف العلوي: ثلاثة عناصر عند قيمة flex-basis الخاصة بها مع مساحة حرّة متبقية في حاوية عرضها 600 بكسل. الصف السفلي: المساحة الحرّة ذهبت إلى العنوان الذي له flex-grow بقيمة 1، بينما يحتفظ الوقت والزر بأساسهما.\n 1. البداية من flex-basis\n \n \n time\n \n title\n \n save\n \n مساحة حرّة\n 2. للعنوان flex-grow: 1، فيأخذ المساحة الحرّة\n \n \n time\n \n title\n \n save\n
تبدأ عناصر flex من أساسها، وتُقسَّم المساحة المتبقية بحسب معامل النموّ
\n

الاختصار flex يضبط القيم الثلاث معًا، وكلماته المفتاحية تستحق الحفظ لأن سلوكها مختلف جدًا:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
الاختصاريتوسّع إلىاستخدمه لـ
flex: 11 1 0%أعمدة متساوية أيًّا كان المحتوى
flex: auto1 1 autoالحفاظ على حجم المحتوى وتقاسم الفائض فقط
flex: none0 0 autoعدم النموّ أو التقلّص أبدًا (الأيقونات والأزرار)
flex: 0 0 5remأساس ثابتعمود بعرض محدّد بدقّة

فخّ min-width: auto

\n

لنعد إلى العنوان الهارب. له white-space: nowrap، فعرض محتواه هو الجملة كاملة، ربما 700px. والصف عرضه 400px. التقلّص يُفترض أن يحلّ المشكلة، فلماذا لا يحلّها؟

\n

لأن عناصر flex تأتي افتراضيًا بـ min-width: auto، وهي تعني في عنصر flex «لا أصغر من حجم محتواي الأدنى (min-content)». والتقلّص يتوقّف عند هذا الحدّ. العنوان غير القابل للكسر لا يستطيع التقلّص تحت عرضه الكامل، فيفيض ويجرّ الزر معه.

\n
session-row.css
.session-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.session-row .time  { flex: 0 0 5rem; }\n.session-row .title {\n  flex: 1;\n  min-width: 0;            /* allow shrinking below content size */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.session-row .save  { flex: none; }
\n

min-width: 0 تزيل الحدّ الأدنى، وخصائص الفيضان الثلاث تحوّل النص المقصوص إلى علامة حذف (…) مرتّبة. والفخّ نفسه يظهر مع الروابط الطويلة وكتل الكود وحاويات flex أو grid المتداخلة، لذا هذا إصلاح ستكتبه مرات كثيرة.

\n\n

الدفع بالـ margins التلقائية

\n

رأس صفحة Waypoint يحمل الشعار ومبدّل الأيام ورابط «Get tickets» الذي مكانه الطرف البعيد. justify-content: space-between ستباعد بين الثلاثة كلها. أما الـ margin التلقائية فأدقّ:

\n
CSS
.site-header { display: flex; align-items: center; gap: 1rem; }\n.site-header .tickets { margin-inline-start: auto; }
\n

الـ margins التلقائية على عناصر flex تبتلع كل المساحة الحرّة في جانبها، فينتقل الرابط إلى النهاية ويبقى كل ما قبله متراصًّا. إنها في flexbox بمثابة نابض يدفع ما بعده إلى الطرف.

\n

الالتفاف دون media queries

\n

شريط الفلاتر يحمل أربعة فلاتر للمسارات. على شاشة عريضة تتّسع في سطر واحد؛ وعلى الهاتف لا ينبغي أن تنضغط إلى شرائح نحيلة لا تُقرأ. الالتفاف مع أساس محدّد يعطيك ذلك دون أيّ breakpoint (نقطة تحوّل):

\n
CSS
.filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.filters > * {\n  flex: 1 1 10rem;\n}
\n

كل فلتر يريد 10rem. يضع المتصفّح في السطر أكبر عدد ممكن من العناصر بعرض 10rem، ويلفّ الباقي، ثم يترك عناصر كل سطر تنمو لتملأه. عند عرض 25rem تحصل على اثنين في كل سطر؛ وعند 45rem على الأربعة. نقطة التحوّل يفرضها المحتوى ضمنيًا.

\n\n

دورك الآن

\n

يعطيك التمرين صف جلسة عرضه 400px بعنوان طويل جدًا. اجعل الوقت عمودًا ثابتًا بعرض 5rem، ودع العنوان يملأ المساحة المتبقية ويُقتطع بعلامة حذف، وأبقِ زر الحفظ في النهاية. وحين تحتاج صفوف البطاقات إلى الاصطفاف في بُعدين، ينتهي الطريق أمام flexbox؛ وهناك يتسلّم grid المهمة في الدرس التالي.

\n","toc":[{"id":"sec-1","text":"كيف يقرّر flexbox الأحجام","level":2},{"id":"sec-2","text":"فخّ min-width: auto","level":2},{"id":"sec-3","text":"الدفع بالـ margins التلقائية","level":2},{"id":"sec-4","text":"الالتفاف دون media queries","level":2},{"id":"sec-5","text":"دورك الآن","level":2}],"takeaways":["يحدّد flexbox أحجام العناصر على مرحلتين: يبدأ كل عنصر من flex-basis الخاصة به، ثم تتقاسم العناصر المساحة المتبقية بحسب flex-grow، أو تستردّ flex-shrink النقص منها.","flex: 1 تعني 1 1 0%، فتحصل العناصر على حصص متساوية مهما كان محتواها؛ وflex: auto تعني 1 1 auto، فيُحفظ حجم المحتوى ولا يُقسَّم إلا الفائض.","عناصر flex تأتي افتراضيًا بـ min-width: auto، ما يمنعها من التقلّص إلى أقل من محتواها؛ اضبط min-width: 0 ليُقتطع النص بدل أن يفيض.","الـ margin التلقائية (auto) على عنصر flex تبتلع كل المساحة الحرّة في ذلك الجانب، وهي أنظف طريقة لدفع عنصر واحد إلى الطرف البعيد."],"further":[{"title":"Controlling ratios of flex items along the main axis (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios"},{"title":"flex (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex"},{"title":"Flexbox (web.dev Learn CSS)","url":"https://web.dev/learn/css/flexbox"}],"quiz":[{"q":"

ثلاثة عناصر بنصوص مختلفة الطول داخل حاوية flex عرضها 600px. تريد ثلاثة أعمدة متساوية عرض كل منها 200px. أيّ تصريح على العناصر يحقّق ذلك؟

","options":[{"text":"flex: auto","why":"auto تعني أساسًا قيمته auto (حجم المحتوى)، فيبدأ النص الأطول أعرض ويبقى أعرض بعد تقاسم المساحة الإضافية."},{"text":"flex-grow: 1","why":"هذا يُبقي القيمة الافتراضية flex-basis: auto، فتظل العناصر تبدأ من عرض محتواها؛ ولا تُقسَّم بالتساوي إلا المساحة المتبقية."},{"text":"flex: 1","why":"صحيح. flex: 1 تضبط الأساس على 0%، فتصبح الـ 600px كلها مساحة حرّة تتقاسمها ثلاثة عناصر نموّها 1 بالتساوي."}],"answer":2},{"q":"

عنوان جلسة في صف flex عبارة عن سلسلة طويلة متصلة مع white-space: nowrap. إنه يدفع زر الحفظ خارج البطاقة رغم أن للعنوان flex: 1. ما الإصلاح؟

","options":[{"text":"أضف min-width: 0 (مع overflow: hidden) إلى العنوان.","why":"صحيح. عناصر flex تأتي افتراضيًا بـ min-width: auto، وهي تعني «لا أصغر من محتواي أبدًا». الصفر يزيل هذا الحدّ الأدنى، فيستطيع العنوان أن يتقلّص ويُقتطع."},{"text":"أضف flex-shrink: 10 إلى العنوان.","why":"معاملات التقلّص لا تستطيع النزول بالعنصر تحت حجمه الأدنى، وmin-width: auto تضع هذا الحدّ الأدنى عند عرض المحتوى."},{"text":"أضف flex-wrap: wrap إلى الصف.","why":"الالتفاف ينقل العناصر إلى أسطر جديدة، لكن العنوان وحده ما زال أعرض من الصف، فسيظل يفيض."}],"answer":0},{"q":"

في رأس صفحة هو صف flex، كيف تدفع رابط «Get tickets» إلى أقصى الطرف بينما يبقى الشعار والتنقّل في البداية؟

","options":[{"text":"justify-content: space-between على رأس الصفحة.","why":"هذا يباعد بين كل العناصر، فيطفو التنقّل إلى المنتصف بدل أن يبقى بجوار الشعار."},{"text":"margin-inline-start: auto على الرابط.","why":"صحيح. الـ margin التلقائية تبتلع كل المساحة الحرّة في ذلك الجانب، فينتقل الرابط إلى النهاية وتبقى العناصر الأخرى متراصّة في البداية."},{"text":"float: right على الرابط.","why":"الـ floats لا أثر لها على عناصر flex؛ حاوية flex تتجاهل float."},{"text":"justify-self: end على الرابط.","why":"justify-self لا تفعل شيئًا في flexbox، لأن المحور الرئيسي مشترك بين كل العناصر ولا ينقسم إلى خلايا."}],"answer":1},{"q":"

.filters > * { flex: 1 1 10rem; } في حاوية flex تلتفّ عرضها 25rem وفيها أربعة فلاتر. ماذا يحدث؟

","options":[{"text":"تنضغط الأربعة في سطر واحد بعرض 6.25rem لكل منها.","why":"الالتفاف يحدث قبل التقلّص. أربعة أسس بعرض 10rem لا تتّسع في 25rem، فينكسر السطر بدلًا من ذلك."},{"text":"كل فلتر عرضه 10rem بالضبط، مع فراغ في نهاية كل سطر.","why":"مع نموّ قيمته 1 تتقاسم العناصر المساحة المتبقية في سطرها، فتتمدّد لتملأه."},{"text":"اثنان في كل سطر، يكبر كلٌّ منهما ليملأ نصف سطره.","why":"صحيح. أساسان بعرض 10rem يتّسعان وثلاثة لا تتّسع، فيحمل كل سطر عنصرين ينموان بعدها لتقاسم المساحة المتبقية."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n 09:30\n Shipping Accessible Design Systems Across Twelve Product Teams Without Losing Your Mind\n \n
","css":"/* The row is fixed at 400px for this exercise */\n.session-row {\n width: 400px;\n display: flex;\n align-items: center;\n gap: 12px;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n}\n.time {\n width: 5rem;\n font-variant-numeric: tabular-nums;\n color: #6b7280;\n}\n.title {\n white-space: nowrap;\n font-weight: 600;\n}\n.save {\n padding: 0.3em 0.8em;\n}\n"},"solution":{"html":"
\n 09:30\n Shipping Accessible Design Systems Across Twelve Product Teams Without Losing Your Mind\n \n
","css":"/* The row is fixed at 400px for this exercise */\n.session-row {\n width: 400px;\n display: flex;\n align-items: center;\n gap: 12px;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n}\n.time {\n flex: 0 0 5rem;\n font-variant-numeric: tabular-nums;\n color: #6b7280;\n}\n.title {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 600;\n}\n.save {\n flex: none;\n padding: 0.3em 0.8em;\n}\n"},"checks":[{"id":"time-fixed","test":"const box = (s) => $(s).getBoundingClientRect(); return Math.abs(box('.time').width - 80) < 1;"},{"id":"no-overflow","test":"const row = $('.session-row'); return row.scrollWidth <= row.clientWidth + 1;"},{"id":"save-at-end","test":"const box = (s) => $(s).getBoundingClientRect(); const row = $('.session-row'); const inner = box('.session-row').right - parseFloat(style(row, 'border-right-width')) - parseFloat(style(row, 'padding-right')); return Math.abs(box('.save').right - inner) < 1.5;"},{"id":"title-fills","test":"const box = (s) => $(s).getBoundingClientRect(); const gap = parseFloat(style('.session-row', 'column-gap')) || 0; return Math.abs(box('.title').right + gap - box('.save').left) < 1.5;"},{"id":"ellipsis","test":"return style('.title', 'text-overflow') === 'ellipsis' && style('.title', 'overflow-x') === 'hidden';"},{"id":"short-title-still-fills","test":"const box = (s) => $(s).getBoundingClientRect(); const t = $('.title'); const old = t.textContent; t.textContent = 'Keynote'; await tick(16); const row = $('.session-row'); const inner = box('.session-row').right - parseFloat(style(row, 'border-right-width')) - parseFloat(style(row, 'padding-right')); const ok = Math.abs(box('.save').right - inner) < 1.5 && Math.abs(box('.time').width - 80) < 1; t.textContent = old; return ok;"}],"title":"روّض عنوان الجلسة الهارب","prompt":"

عرض الصف 400px، والعنوان الطويل يدفع زر Save خارجه. باستخدام خصائص flexbox على العناصر:

\n\n

يجب ألّا يفيض الصف، وأن يصمد التخطيط حين يكون العنوان قصيرًا.

\n","hints":["شيءٌ ما يمنع العنوان من التقلّص تحت عرض نصّه. أيّ خاصية تضع هذا الحدّ الأدنى على عناصر flex؟","flex: 0 0 5rem تعطي عمودًا ثابتًا. وflex: 1 مع min-width: 0 تتيح للعنوان أن يملأ ويتقلّص.","على .title: flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;. وعلى .save: flex: none;."],"explanation":"

عناصر flex لها min-width: auto، ما يُبقيها بعرض محتواها على الأقل؛ ومع white-space: nowrap يكون ذلك الجملة كلها. min-width: 0 تزيل الحدّ الأدنى فيستطيع العنوان أن يتقلّص، وoverflow: hidden مع text-overflow: ellipsis تحوّلان النص المقصوص إلى …. وflex: 0 0 5rem تثبّت عمود الوقت (أما width: 5rem وحدها فستتقلّص رغم ذلك)، وflex: 1 تجعل العنوان يمتصّ المساحة المتبقية حتى حين يكون قصيرًا، وflex: none تمنع الزر من الانضغاط.

\n","checkLabels":{"time-fixed":"عرض عمود الوقت 5rem بالضبط","no-overflow":"لا شيء يفيض خارج الصف","save-at-end":"زر Save يقع في نهاية الصف","title-fills":"العنوان يملأ المساحة حتى الزر","ellipsis":"العنوان يُقتطع بعلامة حذف","short-title-still-fills":"مع عنوان قصير يصمد التخطيط"}},"words":601,"readMinutes":4}