مولّد تخطيط Flexbox
اضبط flex-direction وwrap وjustify-content وalign-items والفجوة، واعرض عناصر مثال داخل حاوية.
طريقة الاستخدام
- اضبط القيم والخيارات أو جرّب المثال.
- أنشئ الكود وراجع المعاينة أو الحسابات.
- انسخ النتيجة أو نزّلها وجرّبها داخل تصميمك.
معنى البداية والنهاية يتأثر باتجاه الكتابة. الكود يحترم اتجاه الحاوية التي يوضع فيها.
فعّل JavaScript لاستعمال الأداة ومعالجة البيانات محلياً داخل متصفحك.
مثال يساعدك تبدأ
بيانات توضيحية. تتغير النتيجة عندما تتغير المدخلات أو الإعدادات.
- المدخلات
خمسة عناصر في صف ملتف بفجوة 12px.
- الإعدادات
space-between مع align-items: center.
- النتيجة المتوقعة
كود Flexbox ومعاينة توضح التوزيع والالتفاف وفق عرض الحاوية.
متى تستعملها؟
- خمسة عناصر في صف ملتف بفجوة 12px. space-between مع align-items: center.
- اضبط flex-direction وwrap وjustify-content وalign-items والفجوة، واعرض عناصر مثال داخل حاوية.
أسئلة عن الأداة
ماذا تعالج أداة مولّد تخطيط Flexbox؟
اضبط flex-direction وwrap وjustify-content وalign-items والفجوة، واعرض عناصر مثال داخل حاوية.
ما حدود النتيجة التي تنتجها؟
معنى البداية والنهاية يتأثر باتجاه الكتابة. الكود يحترم اتجاه الحاوية التي يوضع فيها.