مولد CSS Flexbox
أنشئ تخطيط CSS flexbox بشكل مرئي: الاتجاه المرن، وضبط المحتوى، ومحاذاة العناصر، والالتفاف المرن والفجوة في الحاوية، بالإضافة إلى النمو المرن لكل طفل، والتقليص المرن، والأساس المرن، كل ذلك مع معاينة مباشرة وCSS قابل للنسخ.
النتيجة
يحتوي تخطيط flexbox على كتابي قواعد منفصلين - خصائص على الحاوية (الاتجاه المرن، وضبط المحتوى، ومحاذاة العناصر، والالتفاف المرن، والفجوة) وخصائص كل طفل (النمو المرن، والانكماش المرن، والأساس المرن) - وخلطها هو المصدر الأكثر شيوعًا للأخطاء "لماذا لا يتم التمركز/النمو/الالتفاف بالطريقة التي أتوقعها". يضع هذا المولد كتابي القواعد على الشاشة في وقت واحد: قم بتغيير أي عنصر تحكم في الحاوية أو الحقول الخاصة بأي طفل ويتم تحديث ثلاثة مربعات مرقمة ومرمزة بالألوان على الفور، بحيث يظل السبب والنتيجة مرئيين.
يغطي جانب الحاوية كل محور تخطيط: اختر الاتجاه، واختر كيفية توزيع الأطفال على طول المحور الرئيسي باستخدام محتوى الضبط، وقم بمحاذاتهم على المحور المتقاطع، وقرر ما إذا كانوا سيلتفون على خطوط جديدة، وقم بتعيين فجوة بدلاً من اختراق الهامش بينهم. الجانب الفرعي حقيقي تمامًا: قم بإضافة مربعات تصل إلى ثمانية، وقم بإزالتها إلى اثنين، ومنح أي منها أساس النمو المرن والتقليص المرن والأساس المرن الخاص بها - يطبع المولد قاعدة CSS لكل طفل فقط عندما يختلف واحد منها على الأقل عن الإعداد الافتراضي للمتصفح، وبالتالي فإن الكود المنسوخ لا يدمج نفسه مع flex-grow: 0 على المربعات التي لا تحتاج إليها.
تنتقل الصفحات المعدة مسبقًا مباشرةً إلى التخطيطات التي يبحث عنها الأشخاص فعليًا بالاسم: كيفية توسيط div (السؤال الوحيد الأكثر شيوعًا حول تخطيط CSS، والذي تم حله من خلال ضبط المحتوى وعناصر المحاذاة كلاهما في المنتصف)، وشريط تنقل للروابط اليسرى للشعار، وأعمدة مرنة متساوية العرض عبر flex-grow، ومقارنة جنبًا إلى جنب بين المسافة بين وأقاربها المقربين من مسافة حولها ومسافة متساوية.
مثل كل أداة على هذا الموقع، المولد مجاني ويعمل بالكامل في متصفحك: لا يوجد تحميل، ولا يوجد حساب، ويستمر في العمل دون اتصال بمجرد تحميل الصفحة.