ما هو CSS Flexbox؟
CSS Flexbox (تخطيط الصندوق المرن) هو نموذج تخطيط أحادي البعد لتوزيع المساحة ومحاذاة العناصر في صف أو عمود. تُعرَّف حاوية flex بـ display: flex، وتصبح أبناؤها المباشرون عناصر flex. الخصائص الرئيسية للحاوية: flex-direction (صف أو عمود)، flex-wrap (سطر واحد مقابل متعدد الأسطر)، justify-content (محاذاة المحور الرئيسي)، align-items (محاذاة المحور العرضي لكل سطر)، وalign-content (محاذاة المحور العرضي لأسطر متعددة). الخصائص الرئيسية للعنصر: flex-grow (مقدار نمو العنصر)، flex-shrink (مقدار تقلصه)، flex-basis (الحجم الأولي)، وalign-self (يتجاوز align-items للحاوية لعنصر محدد). Flexbox مثالي لأشرطة التنقل وصفوف البطاقات والتخطيطات المتمركزة وأي ترتيب أحادي البعد.
كيفية استخدام مولّد CSS Flexbox
-
اضبط خصائص الحاوية (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) باستخدام القوائم المنسدلة وحقل الإدخال.
-
انقر على أي عنصر في المعاينة لتحديده (يتحول إلى اللون البرتقالي).
-
اضبط flex-grow وflex-shrink وflex-basis وalign-self للعنصر المحدد في لوحة العنصر.
-
انقر على '+ إضافة عنصر' لإضافة المزيد من العناصر؛ انقر على 'حذف' لحذف العنصر المحدد.
-
قم بالتبديل بين تبويبي CSS وHTML لرؤية الكود المُنشأ، ثم انقر على نسخ.
-
انقر على 'إعادة تعيين الكل' للبدء من جديد بتخطيط 3 عناصر الافتراضي.