61. خاصية عنصر Flex: flex-basis

تحدد flex-basis الحجم الأولي لعنصر flex قبل توزيع المساحة المتبقية بناءً على flex-grow و flex-shrink.

كيف يعمل Flex Basis

• تأخذ flex-basis وحدة طول (px, em, rem, %). الافتراضي هو auto (يستخدم المتصفح خاصية width أو height للعنصر، أو حجم المحتوى).
• إذا تم ضبط flex-basis ، فإنه يلغي أي تعريف صريح لـ width أو height على طول المحور الرئيسي.

مثال: تحديد نقطة البداية

إذا كنت تريد أن تبدأ أربعة عناصر بـ 200 بكسل لكل منها، ثم تتقاسم أي مساحة إضافية بالتساوي:

css .item { flex-basis: 200px; /* الحجم الأولي هو 200 بكسل / flex-grow: 1; / تقاسم المساحة المتبقية بالتساوي / flex-shrink: 1; / السماح بالانكماش إذا لزم الأمر */ }

العلاقة مع العرض (Width)

عند استخدام Flexbox ، فضل flex-basis على width لتعريف البعد الرئيسي (العرض إذا كان row ، الارتفاع إذا كان column). إذا تم تعريف كل من flex-basis و width ، فإن flex-basis له الأولوية على طول المحور الرئيسي.