آموزش Flexbox - قسمت سوم
اگر هنوز قسمت اول و قسمت دوم آموزش Flexbox را نخوانده‌اید ، قبل از خواندن ادامه متن این ۲ پست را مطالعه کنید.
در جلسه قبلی خصوصیات مربوط به Flex containerها را بررسی کردیم اما در این جلسه یک قدم به جلوتر خواهیم رفت و خصوصیاتی که مربوط به Flex itemها می‌باشند را مورد بررسی قرار خواهیم داد.
در پایان این مطلب خصوصیات مربوط به Flexbox ها به اتمام می‌رسد و در قسمت بعدی به سراغ توضیحاتی در مورد پشتیبانی مرورگرها از این قابلیت می‌رویم.
order
به کمک خاصیت order شما می‌توانید ترتیب چینش Flex itemها را مشخص کنید. مقادیر این خاصیت اعداد می‌باشند و هرچه عدد کوچکتر باشد اولویت آیتم بالاتر خواهد بود.
مقدار پیشفرض این خاصیت 1 می‌باشد که اگر به آیتمی order ندهید اولویت آن ۱ محسوب میشود. شما می‌توانید از اعداد منفی هم استفاده کنید.
این خاصیت یکی از کاربردی ترین خاصیت‌ها برای طراحی ریسپانسیو می‌باشد.
در تصویر زیر نحوه اولویت بندی آیتم ها نشان داده شده است:
.item1{order: -3;}
.item2{order: 1;}
.item3{order: 4;}
.item4{order: 2;}
See the Pen Order by Ali Haddadkar (@ali_haddadkar) on CodePen.
flex-grow
با استفاده از این خاصیت می‌توانید توانایی بزرگ شدن یک آیتم را تعیین کنید. مقادیر این خاصیت اعداد هستند که مقدار پیشفرض آن 0 است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که Flex container فضای خالی داشته باشد و به یک آیتم flex-grow: 1 بدهید آن آیتم تا جایی بزرگ میشود که فضای خالی درون Flex container از بین برود.
اگر به همه آیتم‌ها flex-grow: 1 بدهید، همه ی آنها به یک اندازه بزرگ می‌شوند. اگر در همین حالت مقدار flex-grow یکی از آیتم‌ها را 2 قرار دهید، آن آیتم ۲ برابر بقیه آیتم‌ها بزرگ خواهد شد.
توجه داشته باشید وقتی flex-direction : row باشد، flex-grow در عرض (width) آیتم اعمال میشود و اگر flex-direction : column باشد، flex-grow در ارتفاع(height) اعمال میشود.
.item2{
flex-grow: 1;
}
See the Pen flex-grow by Ali Haddadkar (@ali_haddadkar) on CodePen.
flex-shrink
به کمک این خاصیت می توانید توانایی کوچک شدن یک آیتم را تعیین کنید. مقدار پیشفرض flex-shrink برابر 1 است، یعنی آیتم ها می‌توانند کوچک شوند. اگر flex-wrap:nowrap باشد، آیتم ها تا زمانی که عرضشان به 0 برسد کوچک می‌شوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر 2 قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک میشود.
توجه داشته باشید که این خاصیت در حالت ریسپانسیو فعال میشود. در دمو ۲حالت Full-width و Responsive نمایش داده شده است. در حالت Full-width به دلیل اینکه Container فضای خالی دارد آیتم ها به سایز کاملشان نمایش داده می‌شوند. اما زمانی که به حالت Responsive برویم به دلیل اینکه Container کوچک میشود و فضای کافی برای نمایش همه آیتم ها وجود ندارد آیتم ها کوچک می‌شوند.
کارایی flex-shrink در اینجا مشخص میشود که به دلیل اینکه آیتم دوم مقدار flex-shrink : 2 را گرفته است ۲ برابر سایر آیتم‌ها کوچک می‌شوند.
.item2{
flex-shrink: 2;
}
See the Pen flex-shrink by Ali Haddadkar (@ali_haddadkar) on CodePen.
flex-basis
این خاصیت مقدار عرض یا ارتفاع flex-item را تعیین میکند. یعنی عرض یا ارتفاع از این مقدار نمی‌تواند کمتر شود. این خاصیت مانند min-height وmin-width عمل می کند. اگر خاصیت flex-direction : row بود flex-basis عرض آیتم را مشخص میکند و اگر flex-direction : culomn بود آنگاه flex-basis ارتفاع آیتم را مشخص می کند.
.item2 {
flex-basis: 200px;
}
Flex
این خاصیت یکی دیگر از خاصیت‌های مختصر نویسی CSS می‌باشد. به کمک flex می‌توانید خاصیت‌های flex-grow ، flex-shrink و flex-basis را در یک خط خلاصه نویسی کنید.
.item2{
flex-grow: 1;
flex-shrink: 4;
flex-basis: 200px;
}
یا
.item2{
flex: 1 4 200px;
}
مقادیر flex به ترتیب عبارتند از flex-grow , flex-shrink و flex-basis که مقادیر ۲ و ۳ اختیاری است و شما می‌توانید آنها را ننویسید.
align-self
با استفاده از این خاصیت می‌توانید نحوه قرار گرفتن عمودی هر flex-item را مشخص کنید. مقادیر این خاصیت دقیقا همان مقادیر خاصیت align-items است.
.item2 {
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
}
آموزش این جلسه هم به پایان رسید. آخرین مطلب آموزشی flexbox که در جلسه بعدی توضیح خواهیم داد در مورد پشتیبانی مرورگرها از این قابلیت است.
شما می‌توانید نظرات ، انتقادات و پیشنهادات خود را درباره این آموزش و سایر آموزش‌ها از طریق بخش نظرات اعلام کنید.
به روز رسانی
جلسه بعدی آموزش Flexbox در سایت قرار گرفت. شما می‌توانید قسمت چهارم آموزش Flexbox را از اینجا مطالعه کنید.
