في هذا الدرس 6تصفّح المواضيع
تبدو الواجهات المقسومة جنباً إلى جنب مريحة على شاشات الحواسيب الواسعة، غير أن حشر عمودين متجاورين داخل شاشة هاتف عرضها 360px يضغط النصوص في شرائط ضيقة يصعب قراءتها. يعالج نظام Flexbox بنهج الهاتف أولاً هذه المشكلة بتبديل نظيف لاتجاه المحور:
- نبدأ القاعدة الأساسية للحاوية بالتصريحات
display: flex; flex-direction: column; gap: 16px;فتتراص اللوحات عمودياً بترتيب القراءة الطبيعي على الهواتف. - نضيف استعلام
@media (min-width: 768px)لتحويل الاتجاه إلىflex-direction: row;فور توفر مساحة أفقية كافية لاصطفاف العناصر متجاورة.
.flex-layout {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
.flex-layout {
flex-direction: row;
}
}لا تحتاج دائماً إلى كتابة استعلام @media لجعل صف البطاقات يتكيف مع مختلف الشاشات؛ فعند إقران flex-wrap: wrap و gap: 16px على الحاوية الأب مع التصريح المختصر flex: 1 1 260px على كل بطاقة، تنكسر البطاقات تلقائياً إلى سطر جديد فور ضيق المساحة عن 260px، ثم تتمدد لتملأ عرض السطر بتوازن أنيق.
.card-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.flex-card {
flex: 1 1 260px;
padding: 18px;
}لبناء معرض صور مرن يتحكم بدقة في عدد الأعمدة لكل فئة شاشات، ادمج flex-wrap: wrap و gap: 14px مع تدرج قيمة الأساس المرن عبر نقاط التوقف؛ فيبدأ العنصر بالقيمة flex: 1 1 100% لعمود واحد على الهاتف، وينتقل إلى flex: 1 1 46% عند 600px لعمودين على الجهاز اللوحي، ثم flex: 1 1 22% عند 960px لأربعة أعمدة مكتبية متناسقة.
جرّب التبديل بين أنماط التجاوب الثلاثة للصندوق المرن داخل المختبر التفاعلي التالي:
يمثل الشريط العلوي للتنقل أبرز تطبيقات Flexbox العملية في المواقع ثنائية اللغة؛ فعند ضبط display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; يتموضع شعار الموقع في بداية السطر ومجموعة الروابط في نهايته، وينعكس ترتيبهما تلقائياً بين العربية RTL والإنجليزية LTR مع التفاف أنيق على الهواتف الضيقة:
من أكثر المشكلات شيوعاً في تخطيطات Flexbox المتجاوبة امتناع بطاقة تحتوي رابطاً طويلاً متصلاً أو مسار ملف عن التقلص على الهاتف، فتدفع الصف بأكمله خارج حدود الشاشة. يرجع السبب الهندسي إلى أن المواصفة تمنح كل عنصر ابن داخل الحاوية المرنة القيمة الافتراضية min-width: auto التي تمنعه من الانكماش لأصغر من أطول كلمة متصلة بداخله.
يعالج إضافة التصريح min-width: 0; مع overflow: hidden; أو overflow-x: auto; مباشرة على صنف العنصر الابن هذه المشكلة فوراً، فيلتزم الصندوق بحدود شاشة الهاتف دون أي فيضان أفقي.
تجمع الواجهات المتجاوبة الاحترافية بين Flexbox و CSS Grid بتكامل هندسي واضح؛ فتتولى الشبكة تقسيم الهيكل العام ثنائي الأبعاد، بينما يدير الصندوق المرن المكونات الداخلية التي يتبع حجمها محتواها:
| معيار المقارنة | التجاوب عبر Flexbox | التجاوب عبر CSS Grid |
|---|---|---|
| أبعاد التخطيط | أحادي البعد في صف أو عمود مع قابلية الالتفاف | ثنائي الأبعاد يضبط الصفوف والأعمدة معاً في آن واحد |
| العناصر المنفردة بآخر سطر | تتمدد تلقائياً لملء المساحة المتبقية في السطر | تلتزم بدقة تحت خطوط المسارات المحددة للأعمدة |
| فلسفة التحجيم | تبدأ من حجم المحتوى صعوداً لتوزيع السطر | تبدأ من تقسيم الحاوية نزولاً لوضع العناصر |
| المكونات المثالية | الشريط العلوي ومجموعات الأزرار والشارات والأقسام المقسومة | الهيكل العام للصفحة ومعارض البطاقات متطابقة العرض |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تبديل flex-direction عبر نقاط التوقف بنهج الهاتف أولاً، وبناء صفوف بطاقات ملتفة تلقائياً عبر flex-wrap: wrap و flex: 1 1 260px، وتصميم شريط علوي ثنائي اللغة ينعكس تلقائياً بين العربية والإنجليزية، ومنع فيضان النصوص الطويلة بالتصريح min-width: 0. في الخطوة التالية ننتقل إلى درس خاصية text-overflow في لغة CSS للتحكم الاحترافي في قص العناوين الطويلة وإظهار نقاط الاختصار القياسية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Flex Axis Switching تبديل محور الصندوق المرن
- تحويل خاصية flex-direction من الوضع العمودي column على الهاتف إلى الأفقي row عند نقطة توقف لاصطفاف العناصر متجاورة.
- للمراجعة
- 02 Intrinsic Flex Wrapping الالتفاف الذاتي للبطاقات
- دمج خاصية flex-wrap: wrap مع قيمة أساس مرن flex-basis لتنكسر العناصر إلى سطر جديد تلقائياً دون استعلامات وسائط.
- للمراجعة
- 03 Flex Minimum Width Reset تصفير العرض الأدنى للعنصر المرن
- تعيين min-width: 0 على العنصر الابن لإلغاء القيمة الافتراضية min-width: auto والسماح للصندوق بالانكماش داخل الشاشات الضيقة.
- للمراجعة
- 04 Bilingual Flex Mirroring الانعكاس التلقائي ثنائي اللغة
- انعكاس ترتيب عناصر الصف المرن تلقائياً بين اتجاهي اليسار لليمين LTR واليمين لليسار RTL دون تعديل قواعد CSS.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RWD RWD
- Responsive Web Design
- منهجية تصميم واجهات مرنة تتكيف بسلاسة مع شاشات الهواتف والأجهزة اللوحية والحواسيب.
- للمراجعة
- 02 RTL RTL
- Right-to-Left Direction
- اتجاه الكتابة من اليمين إلى اليسار المستخدم في العربية حيث يبدأ الصف المرن من الحافة اليمنى تلقائياً.
- للمراجعة
- 03 LTR LTR
- Left-to-Right Direction
- اتجاه الكتابة من اليسار إلى اليمين المستخدم في الإنجليزية حيث يبدأ الصف المرن من الحافة اليسرى تلقائياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
نسّق الصنف .flex-layout بالتصريحات display: flex و flex-direction: column و gap: 16px ثم بدّله إلى flex-direction: row داخل @media (min-width: 768px).
-
طبّق display: flex و flex-wrap: wrap و gap: 16px على .card-row مع flex: 1 1 260px على .flex-card لتلتف البطاقات تلقائياً بلا تمرير أفقي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.