ویژگی flex-basis در css

ویژگی flex-basis در css ارتفاع اولیه فلکس باکس

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت flex-basis در زبان سی اس اس توضیحاتی را ارائه نماییم.

ویژگی flex-basis در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

معرفی ویژگی کاربردی flex-basis در زبان طراحی css

توسط خاصیت flex-basis می توانیم ارتفاع اولیه تگ های html که به صورت فلکس باکس صفحه آرایی می شوند، را تعیین کنیم.

نکته مهم

در صورتی که عناصر html به صورت فلکس باکس صفحه آرایی نشده باشند، خصوصیت flex-basis جهت تعیین ارتفاع اولیه تاثیری نخواهد داشت.

مقادیر صفت کاربردی flex-basis در زبان طراحی سی اس اس

صفت کاربردی flex-basis که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

1. مقدار number
2. مقدار auto
3. مقدار initial

مقدار number درون خاصیت flex-basis در زبان سی اس اس

اگر خاصیت flex-basis را برابر با مقدار number قرار دهیم، در حقیقت می خواهیم یک مقدار طولی پیکسلی یا em و یا درصدی برای ارتفاع اولیه تگ های html که صورت فلکس باکس صفحه آرایی شدند، تعیین کنیم.

مثال براساس مقدار number برای خاصیت flex-basis

[html] div {flex-basis: 300px;} [/html]

مقدار auto درون خاصیت flex-basis در زبان سی اس اس

اگر خاصیت flex-basis را برابر با مقدار auto قرار دهیم، یعنی می خواهیم ارتفاع اولیه تگ های html فلکس باکس را برابر با ارتفاع همان عناصر html در نظر بگیریم.

در صورتی که برای عناصر html با صفحه آرایی فلکس باکس ارتفاعی تعیین نشده باشد، ارتفاع اولیه آنها را براساس طول محتوای آنها تنظیم می کنیم.

مقدار auto به عنوان مقدار پیش فرض خصوصیت flex-basis می باشد.

مثال براساس مقدار auto برای خاصیت flex-basis

[html] div {flex-basis: auto;} [/html]

مقدار initial درون خاصیت flex-basis در زبان سی اس اس

اگر خاصیت flex-basis را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

بررسی خاصیت flex-basis از نظر نسخه زبان طراحی سی اس اس

خصوصیت flex-basis در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

بررسی ساختاری خصوصیت flex-basis

پشتیبانی مرورگرهای اینترنتی از خاصیت flex-basis در زبان طراحی سی اس اس

خاصیت css
flex-basis	29.0	11.0	28.0	9.0	17.0

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی flex-basis در css ارتفاع اولیه فلکس باکس

ویژگی flex-basis در css ارتفاع اولیه فلکس باکس – اختصاصی سایت آموزی