آموزش Flexbox - قسمت سوم
25 مهر 94

اگر هنوز قسمت اول و قسمت دوم آموزش Flexbox را نخوانده‌اید ، قبل از خواندن ادامه متن این ۲ پست را مطالعه کنید.

در جلسه قبلی خصوصیات مربوط به Flex containerها را بررسی کردیم اما در این جلسه یک قدم به جلوتر خواهیم رفت و خصوصیاتی که مربوط به Flex itemها می‌باشند را مورد بررسی قرار خواهیم داد.

در پایان این مطلب خصوصیات مربوط به Flexbox ها به اتمام می‌رسد و در قسمت بعدی به سراغ توضیحاتی در مورد پشتیبانی مرورگرها از این قابلیت می‌رویم.


order

به کمک خاصیت order شما می‌توانید ترتیب چینش Flex itemها را مشخص کنید. مقادیر این خاصیت اعداد می‌باشند و هرچه عدد کوچکتر باشد اولویت آیتم بالاتر خواهد بود.

مقدار پیشفرض این خاصیت 1 می‌باشد که اگر به آیتمی order ندهید اولویت آن ۱ محسوب می‌شود. شما می‌توانید از اعداد منفی هم استفاده کنید.

این خاصیت یکی از کاربردی ترین خاصیت‌ها برای طراحی ریسپانسیو می‌باشد.


در تصویر زیر نحوه اولویت بندی آیتم ها نشان داده شده است:

flex item 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) اعمال می‌شود.


flex item flex-grow

                
.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 قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک می‌شود.


flexitem flex-shrink

توجه داشته باشید که این خاصیت در حالت ریسپانسیو فعال می‌شود. در دمو ۲حالت 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 است.


flexitem align-item

                
.item2 {
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
} 
                
            

آموزش این جلسه هم به پایان رسید. آخرین مطلب آموزشی flexbox که در جلسه بعدی توضیح خواهیم داد در مورد پشتیبانی مرورگرها از این قابلیت است.


شما می‌توانید نظرات ، انتقادات و پیشنهادات خود را درباره این آموزش و سایر آموزش‌ها از طریق بخش نظرات اعلام کنید.


به روز رسانی

جلسه بعدی آموزش Flexbox در سایت قرار گرفت. شما می‌توانید قسمت چهارم آموزش Flexbox را از اینجا مطالعه کنید.

ارسال نظر
نظر خود را با کاربران تم یاب در میان بگذارید.
CAPTCHA