آموزش Flexbox - قسمت چهارم
03 آبان 94

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

در جلسات گذشته تمام خاصیت‌های مربوط به flex-container و flex-item گفته شد. در این جلسه قصد داریم در مورد پشتیبانی مرورگرها از Flexbox توضیحاتی ارائه بدیم. اگر به یاد داشته باشید در جلسه اول ذکر شد که سینتکس flexbox سال‌های 2009 ، 2011 و 2012 با هم تفاوت دارند و دچار تغیراتی شده اند. دیدن مجدد تصویر زیر که در جلسه اول منتشر شد خالی از لطف نیست:

flexbox syntax

برای اینکه مرورگرهای قدیمی هم از flexbox پشتیبانی کنند، باید از Syntax قدیمی هم استفاده کنیم. البته به یاد داشته باشید علاوه بر استفاده از Syntax قدیمی، برای بعضی از خاصیت‌ها باید از پیشوند مرورگرها هم استفاده کرد.


برای مثال برای استفاده از خاصیت display:flex کد زیر را می نویسیم.

                
.flex-container{
  display: -webkit-box;      /* iOS 6 و Safari 3.1-6 */
  display: -moz-box;         /* برای Firefox قبل از نسخه ۱۹ */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* نسخه های جدید Google Chrome */
  display: flex;
}
                
            

یا برای خاصیت order از کد زیر استفاده می کنیم.

                
.flex-item{
  -webkit-box-ordinal-group: 3;   /* iOS 6 و Safari 3.1-6 */
  -moz-box-ordinal-group: 3;      /* برای Firefox قبل از نسخه ۱۹ */
  -ms-flex-order: 3;              /* IE 10 */
  -webkit-order: 3;               /* نسخه های جدید Google Chrome */
  order: 3; 
}
                
            

برای خاصیت flex که در جلسه پیش توضیح داده شد نیز کد زیر را مینویسم:

                .item1{order: -3;}
.flex-item{
  -webkit-box-flex: 1 200px;   /* iOS 6 و Safari 3.1-6 */
  -moz-box-flex: 1 200px;      /* برای Firefox قبل از نسخه ۱۹ */
  -ms-flex: 1 200px;           /* IE 10 */
  -webkit-flex: 1 200px;       /* نسخه های جدید Google Chrome */
  flex: 1 200px;  
}
                
            

اما مطمئنا نوشتن ۵ خط کد برای هر خاصیت دشوار است و مورد رضایت توسعه دهندگان نیست. برای حل این مشکل شما می‌توانید از یکی از پیش پردازنده‌های CSS استفاده کنید. در اینجا یک فایل نمونه برای افرادی که از Sass استفاده می‌کنند قرار داده‌ایم. در این فایل همه خاصیت‌ها به صورت mixin تعریف شده اند. شما می‌توانید فایل را دانلود کنید از Flexbox همراه با Sass لذت ببرید.

دانلود از Github

به عنوان آخرین موضوع ، بعضی از دوستان در شبکه های اجتماعی تقاضا کرده بودند تا نمونه استفاده از Flexbox را در پروژه واقعی شرح دهیم. به همین دلیل نمونه نحوه استفاده از Flexbox را در یک پروژه ایجاد کرده‌ایم که می‌توانید در پایین مشاهده کنید. این تکه کد به کمک خاصیت order در سایزعادی و ریسپانسیو عکس العمل متفاوتی دارد که می‌توانید آن را تست کنید.


See the Pen Flexbox_layout by Ali Haddadkar (@ali_haddadkar) on CodePen.


سری آموزش های Flexbox در اینجا به اتمام رسید. در صورتی که در مورد نحوه استفاده از Flexbox سوالی داشتید می‌توانید از طریق قسمت نظرات همین پست و یا اکانت تم یاب در توئیتر با ما در ارتباط باشید.

soran
1 سال و 6 ماه پیش
بسیار بسیار عالی توضیح دادین
ممنون از شما
??? ?????
2 سال و 1 ماه پیش
آموزش خوبی بود.
در مورد flexbox آموزش فارسی به این کاملی ندیده بودم.
سینا
2 سال و 3 ماه پیش
خیلی آموزش خوبی بود.
از این ویزگی ها توی Angular Material استفاده کرده بودم ولی جزیات کار رو نمی دونستم.
بعلاوه اینکه کلی چیز اضافه تر یاد گرفتم.

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