HTML وCSS / واجهات متكيفة / الدرس 7
التخطيط المرن أحادي البعد
استخدم Flexbox لصف أو عمود مع مراعاة الأحجام الداخلية والالتفاف وترتيب المصدر.
في هذه الصفحة
أهداف الدرس
- تحديد المحورين الرئيسي والمتقاطع
- بناء مجموعة أفعال ملتفة
- اختبار التوزيع مع تنوع حقيقي
تحديد المحورين الرئيسي والمتقاطع
يرتب حاوي flex أبناءه المباشرين على محور رئيسي مع محاذاة متقاطعة. يختار flex-direction صفا أو عمودا وفق الكتابة والاتجاه. توزع justify-content المساحة رئيسيا وتتحكم align-items بالمحاذاة المتقاطعة، وليستا مرادفتين دائمتين للأفقي والعمودي. يناسب flex صف أفعال أو مكون وسائط. قد يلتف إلى أسطر لكن كل سطر يوزع عناصره مستقلا ولا ينشئ مسارات Grid المشتركة.
فهم الأساس والنمو والتقلص
يتحكم الاختصار flex بالنمو والتقلص والأساس. يحدد الأساس نقطة البداية ثم توزع المساحة وفق الخوارزمية والقيود. يفيد flex: 1 لكنه لا يضمن تساوي العرض مع اختلاف المحتوى والحشو والحد الأدنى. قد يفرض نص متصل حدا تلقائيا يقاوم التقلص. افحص min-inline-size والالتفاف بدلا من زيادة flex-shrink مرارا. تقسم عوامل النمو الزيادة لا عرض الحاوية كله، فقارن بدايات متكافئة عند التوقع.
بناء مجموعة أفعال ملتفة
يستخدم المثال flex-wrap وgap للروابط فتنتقل إلى سطر آخر عند الضيق دون عرض مكتبي ثابت. يبقى المصدر قائمة وجهات مرتبة. تفصل gap العناصر دون هوامش لكل ابن. اجعل مساحة الهدف مناسبة واحفظ التركيز؛ فالمحاذاة ليست تصميم تفاعل كاملا. تجنب row-reverse أو order لإصلاح مظهر يخالف القراءة والمفاتيح، وأصلح التسلسل المقصود في المصدر أولا.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wrapping actions</title>
<style>
.actions { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; } .actions a { display: block; padding: .6rem; }
</style>
</head>
<body>
<main><h1>Topics</h1><nav aria-label="Topics"><ul class="actions"><li><a href="#html">HTML foundations</a></li><li><a href="#css">CSS layouts</a></li><li><a href="#access">Accessible design</a></li></ul></nav><h2 id="html">HTML</h2><p>Structure.</p><h2 id="css">CSS</h2><p>Presentation.</p><h2 id="access">Access</h2><p>Usable interactions.</p></main>
</body>
</html>
Navigation wraps when its items no longer fit one line.كل عنصر قائمة عنصر مرن قابل للالتفاف وتحفظ الروابط التنقل والترتيب الأصليين. النتيجة المتوقعة: يلتف التنقل عندما لا تتسع عناصره لسطر.
السماح للعنصر المناسب بالتقلص
يحوي المثال شارة ثابتة ومنطقة نص مرنة. تسمح min-inline-size: 0 بتقلص المنطقة دون حدها التلقائي حيث يلزم، وتعالج overflow-wrap تقسيم النص. يعالجان طبقتين مختلفتين: قيد العنصر وكسر الأسطر. قد لا تكفي إحداهما. تستطيع صورة أداء دور الشارة مع نسبة وبديل صحيحين. افحص سلسلة الآباء لأن عنصرا مرنا خارجيا قد يفرض حده بعد إصلاح الفقرة الداخلية.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrinkable item</title>
<style>
.record { display: flex; gap: 1rem; max-inline-size: 32rem; } .badge { flex: 0 0 3rem; } .text { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Flexible record</h1><article class="record"><span class="badge">A7</span><div class="text"><h2>Reference</h2><p>averylongsyntheticreferencewithoutspaces0123456789</p></div></article></main>
</body>
</html>
A stable badge beside shrinkable, wrapping text.لا تتقلص الشارة ويمكن لمنطقة النص التقلص والالتفاف مع تصريح الطبقتين. النتيجة المتوقعة: شارة ثابتة إلى جانب نص قابل للتقلص والالتفاف.
اختبار التوزيع مع تنوع حقيقي
اختبر الفراغ وعنصرا وعدة عناصر وترجمات طويلة وعرضا ضيقا. قد يفشل صف متوازن بثلاث كلمات إنجليزية مع العربية أو التكبير. لا تضيف المحاذاة دلالات أو أهدافا ميسرة تلقائيا. إذا احتجت أعمدة مصطفة عبر الصفوف فادرس Grid بدلا من إجبار أسطر flex. افحص المحاور والأحجام ثم المفاتيح وتحديد النص. يجب أن يوضح التصميم توزيع المساحة ومصير المحتوى إذا لم يتسع.
الأخطاء الشائعة وإصلاحها
يتجاوز عنصر مرن المساحة
- لماذا يحدث؟
- حده الأدنى التلقائي أكبر منها.
- كيف تصلحه؟
- افحص الحد المناسب وقلله عمدا.
- كيف تتجنب تكراره؟
- اختبر النص المتصل في العناصر المتداخلة.
لا تصطف أعمدة الصفوف الملتفة
- لماذا يحدث؟
- يوزع كل سطر المساحة مستقلا.
- كيف تصلحه؟
- استخدم Grid للمسارات المشتركة.
- كيف تتجنب تكراره؟
- اختر التخطيط من العلاقات.
يختلف ترتيب العرض عن Tab
- لماذا يحدث؟
- غيرت order العرض فقط.
- كيف تصلحه؟
- استعد ترتيب مصدر متماسكا.
- كيف تتجنب تكراره؟
- راجع المفاتيح بعد التخطيط.
اختبر فهمك
1. لماذا لا تضمن flex-shrink: 1 اتساع كل تسمية؟
اعرض الحل المشروح
يبقى التقلص مقيدا بالحد الأدنى والمحتوى. افحص الحد وإمكان الالتفاف، وقلل الأدنى عمدا أو لف المجموعة. لا تخف نصا ضروريا لحفظ صف واحد.
2. اختر Flexbox أو Grid لشريط أدوات وبطاقات مقارنة مصطفة.
اعرض الحل المشروح
يناسب Flexbox توزيع الشريط والتفافه، ويناسب Grid المسارات المشتركة للبطاقات. أبق البيانات الجدولية الحقيقية في table عندما تحمل العلاقات المعنى؛ فلا تنشئ Grid دلالة جدول.
أهم ما تعلمته
- فكر بالمحاور لا الاتجاهات الثابتة.
- قد تقيد الحدود الداخلية التقلص.
- يجب أن يحفظ التخطيط تسلسل المصدر.