مولد Flexbox CSS — أداة تخطيط بصرية

Flexbox غيّر تخطيط CSS جذرياً. يمكنك الآن تحقيق محاذاة معقدة وتخطيطات متجاوبة بسطور قليلة من الكود.

خصائص Flexbox الأساسية — الحاوية

• display: flex: تفعيل حاوية Flex
• flex-direction: row, column, row-reverse, column-reverse
• justify-content: محاذاة المحور الرئيسي (flex-start، center، space-between...)
• align-items: محاذاة المحور العرضي
• flex-wrap: السماح بالتفاف العناصر
• gap: المسافة بين العناصر

خصائص Flexbox — العناصر

• flex-grow: نسبة التوسع في المساحة المتبقية
• flex-shrink: نسبة التقلص عند نقص المساحة
• flex-basis: الحجم الأساسي
• align-self: محاذاة عنصر بشكل فردي

أنماط Flexbox الشائعة

• شريط تنقل (شعار لليسار، قائمة لليمين)
• شبكة بطاقات
• توسيط رأسي
• صف أيقونات متساوي المسافات