تعیین اندازه اولیه (Initial Size) یک آیتم (Item) در راستای محور اصلی (Main Axis)، هنگام ساخت جعبه انعطاف پذیر (Flexbox)، با مشخصه flex-basis ، در CSS

جعبه انعطاف پذیر (Flexbox) را در آموزش زیر شرح دادیم :

تعیین اندازه اولیه (Initial Size) یک آیتم (Item) در راستای محور اصلی (Main Axis)، هنگام ساخت جعبه انعطاف پذیر (Flexbox)، با مشخصه flex-basis :

هنگام ساخت جعبه انعطاف پذیر (Flexbox)، می توانیم از مشخصه flex-basis برای تعیین اندازه اولیه (Initial Size) یک آیتم (Item) در راستای محور اصلی (Main Axis) استفاده کنیم.

در واقع مشخصه flex-basis تعیین می کند که قبل از اعمال مشخصه های flex-grow و flex-shrink ، آیتم (Item) چه مقدار فضا اشغال کند.

مشخصه flex-basis می تواند به شکل های زیر به کار رود :

تفاوت مشخصه flex-basis با مشخصه های width و height :

اگرچه مشخصه flex-basis همانند مشخصه های width و height برای تعیین اندازه به کار می رود، اما تفاوت هایی با آنها دارد :

1- مشخصه flex-basis نسبت به محور اصلی (Main Axis) عمل می کند، اما مشخصه width همیشه نسبت به محور افقی و مشخصه height همیشه نسبت به محور عمودی عمل می کند.

2- اگر مشخصه flex-basis تعیین شده باشد، مشخصه های width یا height نادیده گرفته می شوند (مگر اینکه flex-basis برابر auto تعیین شده باشد).

3- مشخصه flex-basis می تواند توسط مشخصه های flex-grow و flex-shrink تغییر کند، اما مشخصه های width و height (به جز وقتی که با واحدهای نسبی تنظیم شده باشند) معمولا ثابت می مانند.

مثال :

به مثال زیر توجه کنید :