مولد CSS Flexbox

CSS Flexbox هو طريقة تخطيط أحادية البعد لترتيب العناصر في صفوف أو أعمدة.

اضبط خصائص حاوية وعناصر flex باستخدام عناصر التحكم. تتحدث المعاينة في الوقت الفعلي.

نعم, استخدم الأزرار لتغيير عدد العناصر في المعاينة.

انقر على زر "نسخ CSS" لنسخ الكود إلى الحافظة.

حاوية flex هي العنصر الأب الذي تم تطبيق display: flex عليه. عناصر flex هي الأبناء المباشرين للحاوية. تتحكم خصائص الحاوية في التخطيط العام, بينما تتحكم خصائص العنصر في السلوك الفردي.

يقوم justify-content بمحاذاة عناصر flex على طول المحور الرئيسي (أفقي افتراضيًا). تشمل القيم flex-start وflex-end وcenter وspace-between وspace-around وspace-evenly.

يقوم align-items بمحاذاة عناصر flex على طول المحور المتقاطع (عمودي افتراضيًا). تشمل القيم flex-start وflex-end وcenter وstretch وbaseline.

يتحكم flex-wrap في ما إذا كانت عناصر flex تلتف إلى أسطر متعددة. القيم هي nowrap (افتراضي) وwrap وwrap-reverse.

يحدد flex-direction اتجاه المحور الرئيسي. القيم هي row (افتراضي) وrow-reverse وcolumn وcolumn-reverse.

نعم, Flexbox ممتاز للتخطيطات المتجاوبة. يمكنك دمج خصائص flex مع استعلامات الوسائط لإنشاء تخطيطات تتكيف مع أحجام الشاشات المختلفة.

نعم, مولد CSS Flexbox هذا مجاني تمامًا. لا توجد رسوم مخفية, ولا يلزم التسجيل, ويمكنك استخدامه عدد غير محدود من المرات.

نعم, المولد متجاوب بالكامل ويعمل على جميع الأجهزة بما في ذلك الهواتف الذكية والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة والمكتبية.

Flexbox مدعوم من جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge وOpera. لديه أكثر من 98% من دعم المتصفحات عالميًا.

يمكن نسخ كود CSS المولد وحفظه في ملفاتك الخاصة. على الرغم من أن الأداة لا تحتوي على ميزة حفظ مدمجة, يمكنك وضع إشارة مرجعية على الصفحة بإعداداتك الحالية.