2.8 KiB
title | localeTitle |
---|---|
Flex Basis Property | خصائص Flex Basis |
فليكس أساس
تحدد خاصية flex-basis
حجم flex-item
طول المحور الرئيسي للحاوية المرنة. يكون المحور الرئيسي أفقيًا إذا تم ضبط flex-direction
على row
وسوف يكون عموديًا إذا تم تعيين خاصية flex-direction
على column
.
بناء الجملة
flex-basis: auto | content | <width> | <height>;
أساس المرن: السيارات
flex-basis: auto
بالبحث عن الحجم الرئيسي للعنصر ويحدد الحجم. على سبيل المثال ، في حاوية مرنة أفقية ، سوف تبحث auto
عن width
height
إذا كان محور الحاوية رأسياً.
إذا لم يتم تحديد أي حجم ، فسيتم الرجوع auto
إلى content
.
أساس المرن: المحتوى
flex-basis: content
يحل flex-basis: content
الحجم استنادًا إلى محتوى العنصر ، ما لم يتم ضبط width
أو height
خلال box-sizing
العادي.
في كلتا الحالتين حيث يكون flex-basis
إما auto
أو content
، إذا تم تحديد الحجم الرئيسي ، فإن هذا الحجم سيأخذ الأولوية.
المرن أساس:
هذا هو مجرد تحديد width
أو height
، ولكن فقط أكثر مرونة. flex-basis: 20em;
سيحدد الحجم الأولي للعنصر إلى 20em
. وسيستند حجمه النهائي إلى المساحة المتاحة ، flex-grow
متعدد flex-shrink
، flex-shrink
متعدد الأشكال.
توحي المواصفات استخدام خاصية الاختزال flex
. هذا يساعد على كتابة flex-basis
جنبا إلى جنب مع خصائص flex-grow
flex-shrink
.
أمثلة
توجد هنا صفوف من حاويات مرنة فردية وعناصر مرنة فردية توضح كيف أن flex-basis
يؤثر على box-sizing
.
عندما يكون flex-direction
هو column
، فإن نفس flex-basis
تتحكم في خاصية height
. مثال أدناه ،
معلومات اكثر:
مراجع إضافية على الصفحات التالية: