حول هذه الأداة
ساحة اختبار CSS Flexbox محرّر تفاعلي لخصائص التخطيط الرئيسية لحاوية مرنة. اختر قيماً لـ flex-direction، وjustify-content، وalign-items، وflex-wrap من أربع قوائم منسدلة، فتتعاد ترتيب معاينة من خمسة صناديق مرقّمة فوراً، لترى كيف تُشكّل كل خاصية التخطيط قبل كتابة أي شيفرة.
أسفل المعاينة تُولَّد قاعدة .container المطابقة أثناء عملك: display: flex متبوعاً بالتصريحات الأربعة التي اخترتها. زر واحد ينسخ الكتلة كاملةً إلى حافظتك، جاهزةً للصق في ورقة أنماط. لا تُعرَض سوى خصائص مستوى الحاوية هذه؛ أما إعدادات العناصر الفردية مثل flex-grow أو order أو align-self فغير مشمولة.
كل شيء يعمل في متصفحك. لا يُرفَع شيء، ولا حسابات ولا تتبّع، ويعمل دون اتصال. إنها طريقة سريعة لبناء حدس flexbox أو لإنتاج قاعدة بدائية تصقلها لاحقاً يدوياً.
الأسئلة الشائعة
ماذا تُظهر المعاينة؟
حاوية مرنة تضمّ خمسة صناديق مرقّمة تُعاد ترتيبها مباشرةً كلما غيّرت flex-direction أو justify-content أو align-items أو flex-wrap.
هل CSS المولَّد جاهز للاستخدام؟
نعم. انسخ قاعدة .container المولَّدة مباشرةً إلى ورقة أنماطك؛ فهي تحوي display: flex إضافةً إلى الخصائص الأربع التي اخترتها.
ما خصائص flexbox التي يمكنني تعديلها؟
تتحكم أربع قوائم منسدلة في flex-direction (row، row-reverse، column، column-reverse)، وjustify-content (flex-start، flex-end، center، space-between، space-around، space-evenly)، وalign-items (stretch، flex-start، flex-end، center، baseline)، وflex-wrap (nowrap، wrap، wrap-reverse).
هل تتضمن المخرجات gap أو إعدادات flex للعناصر الفردية؟
لا. تحتوي القاعدة المنسوخة على display: flex والخصائص الأربع للحاوية فقط. وفجوة 8px في المعاينة مجرد تباعد، أما خصائص مستوى العنصر مثل flex-grow أو order أو align-self فغير مضمَّنة.