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

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

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

 

 

ویزگی Flex-wrap :

این واقعا یک ویژگی بسیار محبوب Flex Box می باشد ، واقعا طراحان وب برای این کار زحمت فراوانی می کشیدند و واقعا ساعت ها طول میکشید تا یک طراحی تمیز و جالب با این قالب به مشتری تحویل بدهند . این ویژگی نحوه ی شکستن خط و جدا شدن آیتم ها را بیان میکند ، در اصل شما در این ویژگی ۳ مقدار دارید به نام های :

  • wrap
  • nowrap
  • warp-reverse

وقتی شما بطور مثال ۸ عدد آیتم داشته باشید ، متوانید مشخص کنید که بعد از کم شدن مکان ، آیتم ها به خط بعدی منتقل بشن یا نه ؟ این خیلی جالب میتونه باشه مخصوصا وقتی بخواهید یک منوی تب دار طراحی کنید ♥ !

 

مقدار Wrap :

مقدار Wrap یکی از مقادیر این ویژگی است و به معنی این است که آیتم ها این امکان را دارند در چندین خط قرار بگیرند .

مثال :


flex-contaeiner {
display:flex:
flex-wrap:wrap;
}

۱
۲
۳
۴
۵
۶
۷
۸

 

مقدار nowrap :

مقدار پیشفرض ویزگی flex-wrap مقدار nowrap میباشد ، این مقدار به مرورگر مشخص میکند تا آیتم ها حق رفتن به خط بعدی را ندارند ، اگر در یک جا قرار نگرفتن آیتم به زیر پدر می رود و مخفی می شود .

 

مثال :


flex-contaeiner {
display:flex:
flex-wrap:nowrap;
}

۱
۲
۳
۴
۵
۶
۷
۸

 

مقدار wrap-reverse :

این مقدار به مرورگر میگوید مشکلی ندارد آیتم ها به خط بعدی بروند ولی از انتها شروع کن به چیدن این آیتم ها .

مثال :

 


flex-contaeiner {
display:flex:
flex-wrap:wrap-reverse;
}

۱
۲
۳
۴
۵
۶
۷
۸

در جلسات بعدی این مقاله را در آیم سئو ادامه خواهیم داد

تاریخ انتشار : ۳۰ دی