0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

آرشیو برچسب ها

صفحات واکنش گرا با flexbox

باادامه ی آموزش های ساخت صفحات واکنش گرا(ریسپانسیو,Responsive (با استفاده از فلکس باکسFlexBox و خاصیت های  flex container در جلسه ی قبل و در ادامه با مباحث Flex items صفحات واکنش گرا با Flex Box و خاصیت FlexItem در خدمت شما هستیم. Flex items   flex-grow این خاصیت توانایی بزرگ شدن یک آیتم را تعیین میکند. این خاصیت یک مقدار عددی بدون واحد میپذیرد. مقدار پیشفرض آن ۰ است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که flex container فضای خالی داشته باشد و به یک آیتم flex-grow: 1; بدهید، آن آیتم تا جایی بزرگ میشود که فضای خالی درون container از بین برود. دقت داشته باشید که هنگامی که خاصیت flex-direction فلکس container برابر row باشد، flex-grow بر عرض(width) آیتم اعمال میشود و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع(height) اعمال میشود. ۱ ۲ ۳ .item2{ flex-grow: 1; } اگر به همه ی فلکس آیتم ها flex-grow: 1; بدهید، همه ی آنها به یک اندازه بزرگ میشوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا ۲ قرار دهید، آن آیتم ۲ برابر دیگر آیتم خواهد شد. flex-shrink این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین میکند. مقدار پیشفرض آن ۱ است، یعنی آیتم ها میتوانند کوچک شوند. اگر خاصیتflex-wrap فلکس container برابرnowrap باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک میشوند. حال اگر در این صورت […]