CSS Flexbox(جلسه چهارم | آخر): بیشترین پشتیبانی مرورگرها از Flexbox

- visibility ٢ mode_comment

به نام خدا

 با سلام خدمت دوستان عزیز سون‌لرنی.

در جلسات قبلی در مورد فلکس باکس و خاصیت های جدیدی که وارد CSS کرده صحبت کردیم. همونطور که گفته شد فلکس باکس سه سینتکس(نحوه نوشتن) متفاوت داره؛ سینتکس 2009(اولین سینتکس فلکس باکس) و بعد سینتکس 2011 و در نهایت سینتکس 2012. در این سه سینتکس، بیشتر خاصیت ها با هم فرق دارند.(با توجه به تصویر زیر)

flex-timeline

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

برای خاصیت های دیگه هم همینطور. یا مثلا برای خاصیت order ، کد زیر رو مینویسیم.

همونطور که دیدید برای تنها یک خاصیت، 5 خط کد نوشتیم؛ به نظر من خیلی سخته اگه بخواهیم همه ی این خاصیت ها با مقادیرشون رو حفظ کنیم. راه حل استفاده از CSS Preprocessor(پیش پردازنده های CSS) هاست. من SASS رو میپسندم، بنابراین تمام خاصیت های فلکس باکس(سینتکس جدید، قدیم و بین این دو(new, old & tweener)) رو در یک فایل SCSS به صورت میکسین(mixin) تعریف کردم.support

میتونید فایل رو دانلود و محتوای اون رو مشاهده کنید.

(قطعه ای از فایل flexbox.scss)

فایل بالا رو دانلود کنید و داخل استایل اصلیتون import کنید. حالا میخواهیم با استفاده از میکسین های فایل flexbox.scss، یک صفحه ی ریسپانسیو ساده رو بنویسیم.

 

 

و این کد ها پس از کامپایل:

امیدوارم این سری آموزشی براتون مفید بوده باشه.

موفق باشید.

comment دیدگاه کاربران
قاسم

سلام
ممنون از آموزشتون.
جالب و مفید بود.
اگر یک نسخه کامل از این آموزش به همراه مثال ها هم قرار میدادید برای دانلود ، عالی میشد.
التماس دعا

علی علی

ممنون از آموزش های خوبتون
موفق باشید
آموزش ها تون طوری قرار بدید که بشه دانلود کرد.
باز هم ممنون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.