استفاده از فکلس باکس در طراحی

فلکس باکس در دنیای واقعی

اگر قصد استفاده از فلکس باکس را داریم یکی از مهم ترین مواردی که باید توجه داشته باشیم این است که چطور ویژگی های مربوط به این ماژول را بنویسیم تا بهترین پشتیبانی را در مرورگرهای مختلف داشته باشیم. وقتی در منابع متفاوت دنبال یادگیری فلکس باکس هستیم همه جا یک سینتکس تمیز به ما نشان می دهند اما وقتی در دنیای واقعی طراحی کنیم قصه چیز دیگری است.

 

چی بود چی شد

از سال 2009 که اولین نسخه ماژول فلکس باکس عرضه شد تا به امروز سه سینتکس متفاوت از این ماژول معرفی شده است. که دومین آن در سال 2011 بود و پس از آن سینتکس نهایی نیز معرفی شد.

در هر کدام از نسخه ها نحوه نوشتن برخی از ویژگی های فلکس باکس متفاوت است. و در مورد مرورگرهای قدیمی تر باید از دو نسخه قدیمی استفاده کرد.

در جدول زیر مغایرت های مربوط به نسخه های مختلف را می توانیم ببینیم:

2009 syntax (old) 2011 syntax (hybrid) Final syntax (new)
display: box display: flexbox display: flex
box-orient: horizontal box-orient: horizontal flex-direction: row
box-pack: start box-pack: start justify-content: flex-start
box-align: start box-align: start align-items: flex-start
box-flex: 1 flex: 1 flex: 1
box-ordinal-group: 1 flex-order: 1 order: 1


 

بدتر از بد

این قصه به همینجا ختم نخواهد شد و برای اکثر مرورگرها باید از پیشوندهای مربوطه نیز استفاده کنیم. مثلا برای نوشتن یک display: flex ساده باید بصورت زیر عمل کنیم :(

 


display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* HYBRID  - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

 

تازه همانطور که گفته شد این فقط یکی از ویژگی های فلکس باکس است! به دنیای واقعی خوش آمدید! :)

 

پشتیبانی مرورگرها

در جدول زیر پشتیبانی سینتکس های مختلف در مرورگرهای اصلی آورده شده است.

Chrome Safari Firefox Opera IE Android iOS
20- (old)
21+ (new)		 3.1+ (old)
6.1+ (new)		 2-21 (old)
22+ (new)		 12.1+ (new) 10 (hybrid)
11+ (new)		 2.1+ (old)
4.4+ (new)		 3.2+ (old)
7.1+ (new)

 

راه حل

(بعد از خواندن پاراگراف بعدی خواهید گفت: مرد حسابی از اول بگو دیگه…. اولا مرد حسابی خودتونین دوما: :) )

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

 

اهمیت بدهیم یا ندهیم؟

اینکه باید به سینتکس های قدیمی اهمیت داد و نداد جواب ثابتی ندارد و کاملا به کاربران پروژه های ما بستگی دارد که از چه مرورگرها و دستگاه هایی برای استفاده از وب سایت یا اپلیکیشن ما استفاده می کنند.

مطالب مرتبط

8 دیدگاه برای “فلکس باکس در دنیای واقعی”

      1. خواهش.
        تازه چند دقیقه هم تعلل داشتم :)
        به زودی از مرحله کامنت هم گذشته و به خود مقاله نفوذ میکنم !
        یه وقت دیدی وسط مقاله نوشتنت، چند تا خط هم اضافه شد، اونا رو من نوشتم :)

        درود.

        پاسخ

  3. سلام اقا مجتبی جان !
    من چند تا div رو گذاشتم تو یه نگهدارنده و div ها از اون خارج شدن. برای جوگیری از این مشکل میشه از flex-wrap استفاده کرد یا اینگه باید ارتفاعش داره زیاد کرد یا اینکه از overflow استفاده کنیم!!
    اگه میشه بهترین روش رو بگین.ممنون
    http://codepen.io/gentlyCro…

    پاسخ

    1. سلام. ممنون از سوالتون

      یه قانون کلی:‌ برای بحث ارتفاع همیشه سعی کنیم تا اجازه بدیم محتوا ارتفاع نگهدارنده رو بسازه. توی مثال شما بهتره ارتفاع نگهدارنده رو ازش بگیرد. ولی اگر مورد خاص هستش میتونید بیشتر توضیح بدید تا بهتر بتونم کمکتون کنم اگر سوادم رسید.

      پاسخ

  4. سلام وقتی یه دیو main داشته باشیم و بخوایم 6 تا عکس تو این دیو باشه و زیر این عکسا دکمه باشه، به دیو اصلی display :flex و بقیه چیزایی که لازم باشه رو میدیم عکس ها بطور منظم کنار هم وایمیسن سه تا بالا سه تا در زیر ولی چون دکمه ها هم داخل همون دیو main هستن دقیقا میرن کنار عکسا، چجوری میشه اون دکمه ها رو بیاریم زیر عکسا با همین فلکس باکس؟

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *