ویژگی flex-basis CSS

تعریف و استفاده

ویژگی flex-basis مقدار اولیه طول عنصر انعطاف‌پذیر را مشخص می‌کند.

نکته:اگر عنصر انعطاف‌پذیر نباشد، ویژگی flex معتبر نیست.

لطفاً به: بنگرید

آموزش CSS: جعبه انعطاف‌پذیر CSS

دستورالعمل CSS:ویژگی flex

دستورالعمل CSS:ویژگی flex-direction

دستورالعمل CSS:ویژگی flex-flow

دستورالعمل CSS:ویژگی flex-grow

دستورالعمل CSS:ویژگی flex-shrink

دستورالعمل CSS:ویژگی flex-wrap

دستورالعمل HTML DOM:ویژگی flexBasis

مثال

طول اولیه عنصر انعطاف‌پذیر دوم را به 100 پیکسل تنظیم کنید:

div:nth-of-type(2) {
  flex-basis: 100px;
}

آزمایش کنید

نوع CSS

flex-basis: number|auto|initial|inherit;

مقدار ویژگی

مقدار توضیح
number واحد طول یا درصد، طول اولیه عنصر انعطاف‌پذیر را مشخص می‌کند.
auto مقدار پیش‌فرض. طول برابر با طول عنصر انعطاف‌پذیر است. اگر طول این عنصر تعیین نشده باشد، طول بر اساس محتوای آن تعیین می‌شود.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. بنگرید initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. بنگرید inherit.

جزئیات فنی

مقدار پیش‌فرض: auto
وراثت: خیر
انیمیشن: لطفاً به: بنگریدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
نوع جاوااسکریپت: object.style.flexBasis="200px"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

اعداد شماری با -webkit- یا -moz- نشان‌دهنده نسخه اولیه استفاده از پیشوند است.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0