مولّد CSS Flexbox
أنشئ تخطيط CSS flexbox بصرياً: flex-direction و justify-content و align-items و flex-wrap و gap على الحاوية، بالإضافة إلى flex-grow و flex-shrink و flex-basis لكل عنصر فرعي، مع معاينة حية و CSS قابل للنسخ.
🔒 تتم معالجتها بالكامل في متصفحك — ولا يتم تحميل أي شيء تدخله هنا على الإطلاق.
النتيجة
تخطيط flexbox له كتيبا قواعد منفصلان — خصائص على الحاوية (flex-direction, justify-content, align-items, flex-wrap, gap) وخصائص على كل عنصر فرعي (flex-grow, flex-shrink, flex-basis) — والخلط بينهما هو أشيع مصدر لأخطاء 'لماذا لا يتوسّط / ينمو / يلتف بالشكل الذي أتوقعه'. يضع هذا المولّد كتيبي القواعد على الشاشة معاً: غيّر أي عنصر تحكم في الحاوية أو أي حقول خاصة بعنصر فرعي وستتحدّث ثلاثة مربعات مرقّمة ومُلوّنة فوراً، ليبقى السبب والنتيجة مرئيين.
جانب الحاوية يغطي كل محور تخطيط: اختر اتجاهاً، اختر كيفية توزيع العناصر الفرعية على طول المحور الرئيسي باستخدام justify-content، قم بمحاذاتها على المحور المتقاطع، قرر ما إذا كانت ستلتف على أسطر جديدة، واضبط gap بدلاً من حيل الهوامش بينها. جانب العنصر الفرعي واقعي بالقدر نفسه: أضف مربعات تصل إلى ثمانية أو احذف لتبقى اثنتين، وامنح أياً منها قيمه الخاصة من flex-grow و flex-shrink و flex-basis — يطبع المولّد قاعدة CSS خاصة بعنصر فرعي فقط عندما تختلف إحدى هذه القيم على الأقل عن القيمة الافتراضية للمتصفح، وبذلك لا يمتلئ الكود المنسوخ أبداً بـ flex-grow: 0 على مربعات لا تحتاجها.
صفحات الإعدادات المسبقة تنتقل مباشرة إلى التخطيطات التي يبحث عنها الناس فعلاً بالاسم: كيفية توسيط div (أكثر سؤال تخطيط CSS يُطرح، حُّل بـ justify-content و align-items كلاهما مضبوط على center)، وشريط تنقل بشعار على اليسار وروابط على اليمين، وأعمدة مرنة متساوية العرض عبر flex-grow، ومقارنة جنباً إلى جنب بين space-between وقريناتها القريبات space-around و space-evenly.
مثل كل أداة في هذا الموقع، المولّد مجاني ويعمل بالكامل داخل متصفحك: لا رفع ولا حساب، ويستمر بالعمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.