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

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

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

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

معرفی ویژگی کاربردی 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

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

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

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

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

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

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

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

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

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

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

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

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