صفحات واکنش گرا با Flex Box و خاصیت FlexItem
باادامه ی آموزش های ساخت صفحات واکنش گرا(ریسپانسیو,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 باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک میشوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر ۲ قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک میشود.
| ۱
۲ ۳ ۴ ۵ ۶ |
.container{
flex-wrap: nowrap; } .container .item2{ flex-shrink: 2; } |
flex-basis
این خاصیت مقدار پایه ی عرض یا ارتفاع آیتم را تعیین میکند. یعنی عرض یا ارتفاع(به ستونی یا ردیفی بودن آیتم ها بستگی دارد) از این مقدار پایه نمیتواند کمتر شود. این خاصیت مانند min-height و min-width عمل میکند. مقدار پیشفرض این خاصیت auto می باشد، یعنی فلکس آیتم ها میتوانند تا جایی کوچک شوند که عرض یا اتفاع آنها به صفر برسد.
| ۱
۲ ۳ ۴ ۵ ۶ |
.item{
flex-grow: 1; } .item2{ flex-basis: 200px; } |
flex
این خاصیت یک مختصر نویسی برای خاصیت های flex-grow ، flex-shrink و flex-basis میباشد.
| ۱
۲ ۳ |
.item{
flex: none | [<flex-grow> <flex-shrink> <flex-basis>]; } |
مقادیر دوم و سوم (flex-shrink و flex-basis) اختیاری هستند.
order
این مقدار میتواند مکان قرار گیری فلکس آیتم در کنار دیگر فلکس ایتم ها را مشخص کند. مقدار پیشفرض ۰ است. اگر تنها مقدار order یکی از فلکس آیتم هارا تعیین کنید، آن آیتم بعد از تمامی آیتم ها قرار میگیرد، ولی اگر این خاصیت را برای همه ی فلکس ایتم ها تعریف کنید، میتوانید جایگاه قرار گیری فلکس آیتم هارا مشخص کنید. این خاصیت یکی از کاربردی ترین خاصیت ها هنگام طراحی واکنش‌گرا(responsive) هست.
| ۱
۲ ۳ ۴ ۵ ۶ ۷ |
.item{
flex: 1 100px; /* flex-grow: 1; flex-basis: 100px; */ } .item1{order: 2;} .item2{order: 4;} .item3{order: 1;} .item4{order: 3;} |
align-self
مقدار پیشفرض این خاصیت مقدار تعیین شده برای خاصیت align-items خاصیت مربوط به (flex container) میباشد. با استفاده از این خاصیت میتوان نحوه ی قرار گرفتن عمودی(در محور عرضی یا cross axis) قلکس آیتم هارا فردی کرد. مقادیر این خاصیت مانند مقادیر خاصیت align-items است.
| ۱
۲ ۳ |
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch; } |
| ۱
۲ ۳ ۴ ۵ ۶ |
.container{
align-items: flex-start; } .container .item2{ align-self: flex-end; } |