📐 مولد Flexbox CSS — أداة بصرية
أداة Flexbox البصرية: اضبط direction، justify-content، align-items، wrap، gap وانسخ كود CSS فوراً مع معاينة لـ 4 عناصر.
📚 عن هذه الأداة
Flexbox نظام تخطيط مرن في CSS لتوزيع العناصر في صف أو عمود. الخصائص الرئيسية: flex-direction (الاتجاه)، justify-content (المحاذاة على المحور الرئيسي)، align-items (المحاذاة على المحور المعاكس)، flex-wrap (الالتفاف)، gap (المسافة بين العناصر).
❓ أسئلة شائعة
Flex أم Grid؟
Flexbox للتخطيط أحادي البعد (صف واحد أو عمود واحد). Grid للتخطيط ثنائي الأبعاد (صفوف وأعمدة معاً).
ما الفرق بين justify-content و align-items؟
justify-content يحاذي على المحور الرئيسي (أفقي في row). align-items يحاذي على المحور المعاكس (رأسي في row).
كيف أجعل عنصراً يتمدد ليملأ المساحة؟
استخدم flex: 1 أو flex-grow: 1 على العنصر.
هل Flexbox يعمل في كل المتصفحات؟
نعم، دعم 99%+ منذ 2017 — آمن للاستخدام في الإنتاج.