ساحة تجربة CSS Flexbox
جديداضبط خصائص flex مع معاينة مباشرة وانسخ شيفرة CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
مولّد flexbox مرئي يكتب CSS نيابةً عنك
يحوّل هذا مولّد flexbox نموذج CSS Flexible Box Layout إلى شيء يمكنك رؤيته. بدلاً من التخمين بما ستفعله justify-content أو align-items، تقوم بتبديل كل خاصية على عنصر تحكم مسمّى وتشاهد المعاينة المباشرة تُعيد ترتيب نفسها فوراً — ثم تنسخ كوداً نظيفاً جاهزاً للإنتاج. يعمل بالكامل في متصفحك، دون تسجيل ودون رفع أي بيانات.
إنه ملعب flexbox حقيقي: حاوية flex فعلية مع عناصر أبناء قابلة للتعديل، تحكم كامل بالحاوية وبكل عنصر منفرداً، حاويات متداخلة، معاينة متجاوبة قابلة للتغيير حجمها، ورابط قابل للمشاركة. سواء كنت تتعلم flexbox أو تبني شريط تنقل أو صفاً من البطاقات أو قسماً رئيسياً مركزياً — احصل على التخطيط الدقيق والكود المناسب في ثوانٍ.
كل خاصية حاوية مع معاينة مباشرة
تحكم في الحاوية بالطريقة التي تحددها المواصفة. اضبط flex-direction (row أو row-reverse أو column أو column-reverse) لاختيار المحور الرئيسي، وjustify-content لتوزيع العناصر على طوله، وalign-items لمحاذاتها على المحور العرضي. فعّل flex-wrap لتدفق العناصر إلى أسطر جديدة، واستخدم align-content لتوزيع تلك الأسطر المُلفَّفة، واضبط قيماً مستقلة لـ gap الصف والعمود.
يُظهر دليل المحاور المدمج أي اتجاه يمثل المحور الرئيسي وأيهما المحور العرضي عند تغيير flex-direction، حتى تتضح العلاقة بين justify-content وalign-items أخيراً. إنها ورقة غش flexbox عملية تتعلمها من خلال التجربة.
تحكم بكل عنصر: grow وshrink وbasis وorder وalign-self
تتوقف معظم المولّدات عند الحاوية. هذا المولّد يتيح لك النقر على أي عنصر في المعاينة وتعديله بشكل مستقل: اضبط flex-grow وflex-shrink وflex-basis (اختصار flex)، تجاوز align-self الخاص به، وغيّر order لإعادة تحديد موضعه دون لمس HTML. أضف عناصر أو احذفها لاختبار كيفية إعادة توزيع المساحة.
هذا يجعل بناء الأنماط الحقيقية أمراً سهلاً — شريط جانبي ثابت بجانب عمود رئيسي مرن (flex: 0 0 240px بجانب flex: 1)، أو عنصر واحد مركزي، أو رابط تذييل مدفوع إلى النهاية باستخدام margin-left: auto.
Flexbox المتداخل ومعاينة متجاوبة
التخطيطات الحقيقية تتداخل. يمكن لأي عنصر أن يصبح حاوية flex متداخلة خاصة به مع اتجاهه ومحاذاته الخاصة — تماماً ما يحتاجه مولّد flexbox المتداخل للبطاقات التي تحتوي على صف رأس فوق المحتوى، أو شريط أدوات داخل شريط أدوات. يتضمن الكود المُولَّد القواعد المتداخلة أيضاً.
بما أن flexbox يتعلق بالسلوك المتجاوب، فإن المعاينة قابلة للتغيير حجمها: اسحب المقبض أو اختر إعداداً مسبقاً للعرض (موبايل / تابلت / سطح مكتب) وشاهد العناصر تُلفَّف وتُعاد محاذاتها عند كل حجم. هذه هي أسرع طريقة للتأكد من سلوك تخطيط flexbox متجاوب قبل نشره.
انسخ بصيغة CSS أو Tailwind أو Bootstrap — ومقارنة بالأدوات الأخرى
بدّل تبويب الإخراج للحصول على الصيغة التي يستخدمها مشروعك. CSS يمنحك قواعد نظيفة .container وقواعد لكل عنصر باستخدام اختصار flex. Tailwind يكتب فئات الأدوات — flex وflex-col وjustify-between وitems-center وgap-4 وflex-1 وorder-2 — على مقتطف HTML جاهز للصق. Bootstrap يُخرج فئات الأدوات المعادلة d-flex. تُصدَر فقط الخصائص التي غيّرتها فعلاً، فيظل الإخراج مختصراً وقابلاً للقراءة.
تتخطى مولّدات مرئية أخرى مثل Flexbox.help عناصر التحكم الفردية والحاويات المتداخلة. لا يُولّد ملعب Tailwind الإلكتروني CSS vanilla. هذه الأداة تدعم الصيغ الثلاث للإخراج، وتتعامل مع التداخل، وتعمل دون اتصال بعد تحميلها — بدون حساب، بدون تكلفة، ودون مغادرة أي بيانات لمتصفحك.
Frequently asked questions
ما هو Flexbox في CSS ولماذا يُستخدم؟
Flexbox (نموذج CSS Flexible Box Layout) هو نموذج تخطيط أحادي البُعد لترتيب العناصر في صف أو عمود واحد وتوزيع المساحة بينها. يُفعَّل بسطر واحد — display: flex — على العنصر الأب، وتصبح أبناؤه عناصر flex يمكن محاذاتها وتوزيعها وتغيير أحجامها دون floats أو هوامش يدوية. يُستخدم لأنه يُسهّل المهام الشائعة: التمركز، والأعمدة ذات الارتفاع المتساوي، وأشرطة التنقل، وصفوف البطاقات.
كيف تستخدم flexbox؟
أضف display: flex إلى عنصر الحاوية، ثم تحكم في الأبناء بخصائص الحاوية — flex-direction (row أو column)، وjustify-content (التوزيع على طول المحور الرئيسي)، وalign-items (المحاذاة على المحور العرضي)، وflex-wrap وgap. مثلاً، .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } يرتب شعاراً وروابط في صف، محاذاة عمودية في المنتصف.
كيف تمركز div باستخدام flexbox؟
اجعل العنصر الأب حاوية flex ومركّز على كلا المحورين: .parent { display: flex; justify-content: center; align-items: center; } — يضع هذا العنصر الابن في المنتصف تماماً أفقياً وعمودياً. أعطِ العنصر الأب ارتفاعاً (مثلاً min-height: 100vh للتمركز في ملء الشاشة). هذه أنظف طريقة لتمركز عنصر بشكل مثالي.
ما الفرق بين justify-content وalign-items؟
تُحدّد justify-content مواضع العناصر على طول المحور الرئيسي، بينما تُحدّد align-items مواضعها على المحور العرضي. مع القيمة الافتراضية flex-direction: row، تُوزّع justify-content العناصر أفقياً وتُحاذي align-items العناصر عمودياً. بالتبديل إلى flex-direction: column تتبادل الخاصيتان دوريهما. يُظهر دليل المحاور المباشر في الأداة أيهما أيهما عند تغيير الاتجاه.
ما هي flex-grow وflex-shrink وflex-basis؟
هي الخصائص الثلاث لكل عنصر على حدة التي تحدد كيفية تحديد حجم عنصر flex، وعادةً تُكتب معاً باختصار flex. flex-basis هو الحجم الابتدائي قبل توزيع المساحة الحرة. flex-grow يحدد مدى حرص العنصر على التمدد لملء المساحة المتبقية (0 = لا يتمدد، 1 = يأخذ حصة). flex-shrink يحدد مدى استعداده للانكماش عند ضيق المساحة.
كيف أجعل عناصر flex تُلفَّف إلى أسطر جديدة؟
اضبط flex-wrap: wrap على الحاوية لتنتقل العناصر التي لا تتناسب إلى سطر جديد بدلاً من الفيضان. القيمة الافتراضية flex-wrap: nowrap تجبر كل شيء على سطر واحد. مع تفعيل اللف، أعطِ العناصر flex-basis (مثل flex: 1 1 200px) لتمتلئ كل صف بشكل منتظم، واستخدم align-content لتوزيع الأسطر الناتجة.
هل هذا المولّد مجاني وخاص؟
مجاني دون الحاجة إلى تسجيل. يعمل الملعب بأكمله في متصفحك — تخطيطك والكود المُولَّد ورابط المشاركة كلها تُبنى على جهازك ولا تُرفع إلى أي خادم. يمكنك وضعه في المفضلة واستخدامه دون اتصال بعد تحميل الصفحة. لا حساب للإنشاء ولا حد لعدد التخطيطات التي تهيّؤها.
Related tools
عرض كل الأدوات
جديد خالط الألوان
امزج لونين بأي نسبة وانسخ النتيجة أو أي خطوة بينهما.
جديد منتقي ألوان الصور
اختر أي لون من صورة واستخرج لوحة ألوانها السائدة بصيغ HEX وRGB وHSL.
جديد Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
جديد Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
منتقي ومحوّل الألوان
اختر لونًا وحوّله بين HEX و RGB و HSL و OKLCH.
جديد مدقّق تباين الألوان
تحقّق من نِسب تباين WCAG من مستوى AA/AAA بين لون النص والخلفية.