ویژگی flex-grow در css افزایش عرض عناصر Flexbox

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

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

ویژگی flex-grow در css افزایش عرض عناصر Flexbox

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

توسط خاصیت flex-grow می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container پدری صفحه آرایی شدند را افزایش دهیم.

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

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

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

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

اگر خاصیت flex-grow را برابر با مقدار number ( مقدار عددی ) قرار دهیم، یعنی می خواهیم به همان میزان عرض یک آیتم فلکس باکس را افزایش دهیم.

مقدار پیش فرض خصوصیت flex-grow معادل عدد 0 می باشد.

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

در مثال بالا مقدار عددی این خاصیت را برابر 2 قرار دادیم. این یعنی می خواهیم تگ div با شناسه item2 که داخل یک تگ container والد قرار گرفته، 2 برابر نسبت به آیتم های دیگر بزرگ تر شود.

به شکل زیر توجه کنید:

ویژگی flex-grow در css افزایش عرض عناصر Flexbox

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

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

ویژگی flex-grow در css افزایش عرض عناصر Flexbox

ویژگی flex-grow در css افزایش عرض عناصر Flexbox

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

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

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

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

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

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

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

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

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