.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}ما هو مولد Flexbox؟
يعد Flexbox Generator بمثابة ملعب مرئي لتخطيط الصندوق المرن لـ CSS. يمكنك ضبط خصائص الحاوية باستخدام الأزرار وشرائح التمرير، ومشاهدة معاينة مباشرة وإعادة ترتيب العناصر في الوقت الفعلي، ونسخ CSS الدقيق الذي تستخدمه المعاينة. فهو يزيل التخمين من تذكر الخاصية التي تفعل ماذا، حتى تتمكن من إنشاء صف أو عمود أو تخطيط مركزي أو شبكة تغليف من البطاقات دون تجربة أو خطأ في أدوات تطوير المتصفح.
Flexbox هو نموذج تخطيط أحادي البعد: يتم وضع العناصر على طول المحور الرئيسي ومحاذاتها على المحور المتقاطع. تقوم الحاوية بتشغيل كل شيء تقريبًا من خلال ست خصائص. يختار الاتجاه المرن المحور الرئيسي وما إذا كان يسير للأمام أو للخلف. يقوم المحتوى المبرر بتوزيع المساحة الحرة على طول المحور الرئيسي. تضع عناصر المحاذاة العناصر على المحور المتقاطع. يقرر التغليف المرن ما إذا كانت العناصر ستفيض على خطوط جديدة، ويقوم بمحاذاة مساحات المحتوى التي تفصل بين تلك الخطوط بمجرد تشغيل التغليف. تضيف الفجوة تباعدًا ثابتًا بين العناصر التي لا تحتوي على هوامش.
تعرض هذه الأداة كل هذه الخصائص في مكان واحد وتظهر النتيجة على الفور. نظرًا لأن المعاينة يتم عرضها بنفس الإعلانات التي تظهر في مربع الإخراج، فإن ما تراه هو بالضبط ما تحصل عليه عند لصق CSS في ورقة الأنماط الخاصة بك. تستهدف القاعدة التي تم إنشاؤها فئة .container افتراضيًا وتسرد فقط الخصائص المهمة، بما في ذلك محتوى المحاذاة فقط عند تمكين التغليف، حيث ليس لها أي تأثير على سطر واحد.
كل شيء يعمل بالكامل في متصفحك. لا يوجد تسجيل، ولا يتم تحميل أي شيء، وتستمر الأداة في العمل دون الاتصال بالإنترنت بمجرد تحميل الصفحة. إنه مفيد بنفس القدر كوسيلة تعليمية لفهم كيفية تفاعل الخصائص المرنة وكطريقة سريعة لإنتاج CSS جاهز للإنتاج. قم بتغيير عدد عناصر المعاينة، وقم بتغيير حجم الحاوية في رأسك، واقرأ الإعلان الذي ينتج المحاذاة التي تريدها، سواء كان ذلك شريط التنقل المنتشر بمسافة بين أو قسم البطل المتمركز بشكل مثالي على كلا المحورين.
كيفية استخدام مولد Flexbox؟
اختر الاتجاه واللف
اختر الاتجاه المرن وما إذا كان يجب أن تلتف العناصر على خطوط متعددة.
تعيين المحاذاة
اضبط محتوى التبرير على المحور الرئيسي ومحاذاة العناصر على المحور العرضي حتى تتطابق المعاينة مع تخطيطك.
تباعد النغمات
قم بتعيين الفجوة بين العناصر، وعند تشغيل التغليف، قم بمحتوى المحاذاة الذي يفصل بين الخطوط.
انسخ css
تحديثات القاعدة التي تم إنشاؤها مباشرة. انسخها بنقرة واحدة والصقها في ورقة الأنماط الخاصة بك.
الميزات الرئيسية
معاينة مباشرة
يتم إعادة تدفق حاوية من عناصر العينة على الفور أثناء تغيير الخصائص، بحيث ترى التخطيط قبل نسخ أي رمز
كل ملكية حاوية
شاشة التحكم، والاتجاه المرن، والالتفاف المرن، وتبرير المحتوى، ومحاذاة العناصر، ومحاذاة المحتوى، والفجوة من لوحة واحدة
ما تراه هو ما تحصل عليه
تستخدم المعاينة نفس الإعلانات المستخدمة في الإخراج، وبالتالي فإن CSS المنسوخ ينتج التخطيط الذي يظهر على الشاشة بالضبط
نظيفة، الحد الأدنى من الإخراج
تسرد القاعدة التي تم إنشاؤها الخصائص ذات المعنى فقط وتحذف محتوى المحاذاة حتى يتم تشغيل التغليف
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!