• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

1 2824 ۲۷ مرداد ۹۳

به نام خدا

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

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

 

 

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


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

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها یک نظر ارسال شده است.

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram