مولد Flexbox في CSS

Flexbox هو نظام التخطيط في CSS لترتيب العناصر في صف أو عمود: أشرطة التنقل ومجموعات الأزرار والبطاقات والمحتوى المتوسط. خصائصه قوية لكن يسهل الخلط بينها. يتيح لك مولد Flexbox هذا تغييرها بالأزرار ورؤية النتيجة على صناديق مباشرة، ثم نسخ الكود.

طريقة بناء تخطيط flex

1. ابدأ من قالب جاهز: أفقي، أو رأسي، أو متوسط، أو space between، أو space around، أو space evenly، أو شبكة، أو ترويسة، أو شريط جانبي، أو شبكة بطاقات.
2. اضبط الحاوية: flex-direction وflex-wrap وjustify-content وalign-items وalign-content وgap.
3. أضف عناصر أو احذفها واضبط flex-grow وحجم كل منها.
4. انسخ CSS أو SCSS أو أصناف Tailwind.

مرجع سريع لـ Flexbox

الخاصية	وظيفتها
flex-direction	المحور الرئيسي: row (أفقي) أو column (رأسي)
justify-content	التوزيع على المحور الرئيسي: start وcenter وend وbetween وaround وevenly
align-items	المحاذاة على المحور العرضي: stretch وstart وcenter وend وbaseline
flex-wrap	هل تنتقل العناصر إلى سطر جديد عند نفاد المساحة
gap	المسافة بين العناصر
flex-grow	مقدار تمدد العنصر لملء المساحة الفارغة

وصفات شائعة

• توسيط أي شيء: display: flex; justify-content: center; align-items: center.
• الشعار يسارا والقائمة يمينا: justify-content: space-between على الترويسة.
• تخطيط بشريط جانبي: شريط جانبي بعرض ثابت ومنطقة رئيسية مع flex-grow: 1.
• بطاقات تنتقل لسطر جديد: flex-wrap: wrap مع gap وعرض أدنى للبطاقة.

Flexbox أم grid؟

استخدم Flexbox لاتجاه واحد في كل مرة، مثل صف من الأزرار أو عمود من الحقول. واستخدم CSS grid للتخطيطات ثنائية الأبعاد التي يجب أن تتطابق فيها الصفوف والأعمدة. كثير من الصفحات تجمع بينهما. لشبكات الصفحات راجع مولد نظام الشبكة، ولتنسيق الصناديق استخدم مولدي border-radius وbox-shadow.