ساحة اختبار Flexbox

جميع الأدوات

جرّب خصائص CSS Flexbox على عناصر حية وانسخ كود CSS للتخطيط المُولّد.

معاينة انقر على عنصر لتحريره
CSS المُولّد
—

كل شيء يعمل في متصفحك — لا يُرفع أي شيء.

الحاوية
12px
العناصر
0
العنصر المحدد

حول ساحة اختبار Flexbox

ملعب Flexbox هو صندوق رمل عملي لـ CSS flexbox. اضبط خصائص الحاوية — flex-direction وflex-wrap وjustify-content وalign-items وalign-content وgap — وشاهد حتى 12 عنصراً حياً يُعيد التدفق في المعاينة مع كل تغيير. إنها أسرع طريقة لاستيعاب ما تفعله كل خاصية فعلياً.

العناصر قابلة للتحرير فردياً: انقر أحدها لتحديده واضبط flex-grow وflex-shrink وflex-basis وalign-self وorder الخاصة به. رؤية عنصر واحد ينمو ليبتلع المساحة الحرة بينما تحافظ العناصر المجاورة على عرضها يعلّمك نموذج تحجيم flex أسرع من أي مخطط.

يولّد الملعب CSS نظيفاً للحاوية وأي عناصر بإعدادات غير افتراضية — انسخه مباشرة إلى ورقة أنماطك. كل شيء يعمل في متصفحك دون رفع، وزر إعادة الضبط يعيدك إلى بداية نظيفة.

كيفية استخدام ساحة اختبار Flexbox

  1. اضبط flex-direction وwrap وjustify-content وalign-items وalign-content وgap الخاصة بالحاوية.
  2. أضف أو أزل عناصر — بين 2 و12 — لعكس مكوّنك الفعلي.
  3. انقر عنصراً واضبط grow وshrink وbasis وalign-self وorder الخاصة به.
  4. راقب المعاينة الحية تتحدث مع كل تغيير.
  5. انسخ CSS المُولَّد والصقه في مشروعك.

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

يوزّع flex-grow المساحة المتبقية: عنصر بقيمة grow 2 يحصل على ضعف المساحة الإضافية مقارنة بعنصر بقيمة grow 1. يعمل flex-shrink بالعكس عندما تكون المساحة ضيقة. كلاهما نسب بين العناصر المتجاورة، وليس أحجاماً مطلقة.

يضع align-items العناصر على طول المحور المتقاطع ضمن سطرها. يوزّع align-content عدة أسطر ملتفّة داخل الحاوية — له تأثير مرئي فقط عندما ينتج flex-wrap أكثر من سطر واحد.

يفترض كل عنصر flex القيمة order 0 افتراضياً؛ تُرتَّب العناصر من الأدنى order إلى الأعلى. تغيير order عنصر يحرّكه بصرياً دون لمس HTML — تسلسل DOM، وبالتالي ترتيب قارئ الشاشة، يبقى كما هو.

نعم. يغطي CSS المُولَّد قواعد الحاوية بالإضافة إلى محدِّد لكل عنصر تختلف قيم grow أو shrink أو basis أو align-self أو order الخاصة به عن الافتراضي، بحيث يمكنك لصق تخطيط كامل يعمل.

نعم — مجاني، بدون تسجيل، ويعمل بالكامل من جانب العميل. تجاربك لا تغادر تبويب المتصفح أبداً.
شارك هذا
أدوات ذات صلة
منشئ توقيع البريد الإلكتروني صمّم توقيع بريد إلكتروني HTML احترافيًا من 30 قالبًا، وخصّصه واحفظه. مجاني
تحويل أيقونة إلى PNG حوّل Bootstrap Icons وFont Awesome وغيرها إلى صور PNG مخصصة — مجاناً في متصفحك. مجاني
مولّد أيقونات التطبيقات ولّد مجموعة أيقونات تطبيق كاملة وجاهزة للمتجر لأجل App Store وGoogle Play — خلفيات تدرّج وmesh وأنماط فاخرة، مبنية من شعارك. مجاني
مولّد Favicon أنشئ حزمة favicon كاملة من شعار أو أيقونة خطية أو حروف مختصرة — favicon.ico وصور PNG حديثة وأيقونة Apple touch وأيقونات PWA وبيان ويب ومقتطف HTML. مجاني
منشئ CSS Box Shadow صمّم ظلال CSS متعددة الطبقات بمتزلقات مباشرة للإزاحة والتمويه والانتشار واللون والعتامة والإدراج — مع معاينة على عنصر حقيقي ونسخ CSS جاهز للصق فورًا. مجاني
مولّد CSS Border Radius صمّم خاصية border-radius في CSS بصريًا مع معاينة حية وانسخ كودًا جاهزًا للإنتاج. مجاني
عمليات البحث الشائعة
ساحة اختبار flexbox مولّد css flexbox مولّد حاوية flex أداة justify-content align-items مولّد تخطيط css flex أداة تصوّر flexbox مولّد كود flexbox
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.