آموزش جامع و کامل Flexible Box - آموزش Justify-content

آموزش جامع و کامل Flexible Box – آموزش Flex-grow

سلام عرض میکنم خدمت شما دوستان ، امروز در خدمت شما هستیم با آموزش جامع و کامل Flexible Box – آموزش Flex-grow که یکی از ویژگی های آیتم های یک باکس با خاصیت فلکس باکس می باشد .

 

قسمت قبلی آموزش ویژگی آیتم های یک فلکس باکس :

 

ویژگی Flex-grow :

این ویژگی برای مقیاس پذیری آیتم ها میباشد ، یا به صورت ساده تر شما وقتی ۳ آیتم دارید در یک فلکس باکس ، ( مقدار بصورت پیشفرض صفر می باشد ) و میخواهید یکی از ۱ از این آیتم ۸ برابر آن ۲ تای دیگر باشد ، برای این کار شما باید بطور درون خطی [inline] مقدار flex-grow را برای آیتم های مورد نظر مشخص می کنید .

وقتی شما برای ۲ آیتم اول مقدار ۱ را مشخص میکنید و برای آیتم نهایی ۸ را ، به مرورگر میگویید که آیتم نهایی ۸ برابر دو آیتم اولی نسبت به عنصر نگهدارنده فلکس باکس باشد .

نکته : برای اینکه نتایج بهتری در این ویژگی بگیرید ، بهتر است مقدار طول width را بر روی مقدار اولیه [width: initial;] تنظیم کنید 

مثال :


flex-contaeiner {
display:flex:
}

flex-grow: 1
flex-grow: 1
flex-grow: 8

 

امیدوارم از این آموزش آیم سئو لذت برده باشید

تاریخ انتشار : ۰۵ بهمن