مولّد Flexbox وGrid

كيفية الاستخدام مولّد Flexbox وGrid

1. اختر Flexbox أو Grid وحدّد عدد العناصر.
2. اضبط المحاذاة والمسافات وتعريف الأعمدة — المعاينة تتبع فورًا.
3. انسخ الشيفرة، ويمكنك اختيار إخراج الخصائص المنطقية.

الخصائص المنطقية تُغني عن ملف RTL منفصل

هذه أهم نقطة عملية لأي مطوّر يبني واجهة عربية.

التخطيط المبني على left وright وmargin-left يحتاج ملف أنماط ثانيًا معكوسًا عند التحويل إلى العربية. وهذا الملف الثاني يتأخّر عن الأول باستمرار، وينتهي بأن يصبح مصدر أخطاء دائم.

والخصائص المنطقية تحلّ المسألة من أصلها، لأنها تصف الموضع بالنسبة إلى اتجاه الكتابة لا إلى الشاشة.

ومع dir="rtl" على العنصر الجذر، ينعكس التخطيط المبني بالخصائص المنطقية بالكامل دون سطر واحد إضافي — بما في ذلك ترتيب عناصر Flexbox واتجاه أعمدة Grid.

والاستثناءات قليلة وتستحق الانتباه: الأيقونات الاتجاهية كالأسهم لا تنعكس تلقائيًا وتحتاج قلبًا يدويًا، والشعارات لا تُقلب، والرسوم البيانية ذات المحاور الزمنية عادةً لا تُعكس.

Flexbox أم Grid؟

الجواب المختصر: صفّ أو عمود واحد بـFlexbox، وشبكة حقيقية بـGrid.

فFlexbox يعمل على محور واحد، وهو المناسب لشريط تنقّل أو صفّ أزرار أو بطاقة فيها أيقونة ونص متجاوران — حيث تُشتقّ الأحجام من المحتوى.

وGrid يعمل في بُعدين، وهو المناسب لتخطيط الصفحة وشبكات البطاقات والنماذج ذات التسمية والحقل في عمودين — حيث يجب أن تتوافق المحاذاة عبر الصفوف.

وفي أي واجهة حقيقية يوجد الاثنان: Grid لبنية الصفحة، وFlexbox داخل المكوّنات.

شبكة متجاوبة بلا استعلامات وسائط

نمط واحد يحلّ أكثر حالات التخطيط شيوعًا دون أي نقطة توقّف:

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

أي: أكبر عدد من الأعمدة يتّسع، كل عمود 240 بكسل على الأقل، والباقي يُوزَّع بالتساوي. فيعطي عمودًا واحدًا على الهاتف وعمودين أو ثلاثة على اللوح وخمسة على شاشة كبيرة.

والفرق بين auto-fit وauto-fill: الأول يجعل العناصر الموجودة تملأ المساحة، والثاني يُبقي أعمدة فارغة. فثلاث بطاقات في نافذة عريضة تتمدّد مع auto-fit وتبقى ضيّقة على جانب واحد مع auto-fill.

وفي RTL يبدأ الملء من اليمين تلقائيًا — دون أي تعديل، لأن Grid يتبع اتجاه الكتابة.

الأسئلة الشائعة