ابزارهای فلکس باکس

ابزارهای فلکس باکس

این روزها بازار کار با Flexbox داغ شده است و تا هنوز Grid در بین مرورگرها در جایگاه خوبی برای پشتیبانی قرار نگرفته است, فلکس باکس تازنده میدان است.

از آنجا که پربازدیدترین مطلب این وب سایت تا زمان نوشتن این مطلب flexbox بوده است, تصمیم گرفتم تا مطلبی برای معرفی ابزارهایی که به یادگیری آن کمک می کنند و همینطور ابزارهایی که سرعت کار با این ماژول را افزایش می دهند را معرفی کنم.

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

 

تست و یادگیری

ابزارهای زیر برای یادگیری و تست ویژگی های فلکس باکس طراحی شده اند:

 
ابزارهای زیر کاربردی تر است و کد خروجی را نیز نمایش می دهند:

 

الگوها

در این آدرس شما به منبعی دسترسی دارید که الگوهایی مثل هدر سایت, منوی ساده, کارت ها و غیره با فلکس باکس طراحی شده اند و در آینده به آنها اضافه می شود و صد البته که شما هم می توانید در پروژه متن باز آن در گیتهاب به گسترش آنها کمک کنید:

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

 

بازی با فلکسی

بازی با ریاضی یادتونه؟ :)

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

حتی بازی استراتژیک هم داریم :)

 

کد تقلب

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

 

پلیفیل ها (polyfills)

برای اینکه بتوانید از فلکس باکس در مرورگرهایی مثل اینترنت اکسپلورر 8 و 9 هم استفاده کنید, پلیفیل هایی زیر در دسترس هستند:

 

کمک به توسعه فلکس باکس

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

همینطور راه حل مشکلات معرفی شده نیز در اینجا مطرح شده است:

 

فلکسی قول

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

 

13 دیدگاه برای “ابزارهای فلکس باکس

  1. اینم یک فریمورک css خوب بر اساس flexbox که دیدم سایت مجید آنلاین معرفیش کرده توی لینک هاش:
    https://bbo-code.com/bobscss
    که البته این فریمورک گفته که من از این ها الهام گرفتم:
    Basscss
    Twitter Bootstrap
    Google Material

    1. ممنون بابت معرفی این فریمورک. من خودم از فریمورک استفاده نمی کنم ولی اگه یه روزی بخوام استفاده کنم از این استفاده می کنم. که بر اساس فلکس باکس هم هست و کار گوگل هم هست پشتیبانی خوبی داره: getmdl.io

      فک کنم توی این صفحه بهتر باشه یه قسمت فریمورک های فلکس باکس هم داشته باشیم. نظرتون چیه؟

      بازم ممنون از کامنت خوبتون

      1. فریمورک Material Design Lite هم خیلی خوبه و اینکه گوگل پشتشه یعنی پشتیبانی قوی و آپدیت. من به نظرم رسید که فریمورک bobscss قوی تره ولی چون فقط یک نفر پشتشه اون آپدیت و پشتیبانی قوی رو نداره ولی فکر کنم امکاناتش زیاده.
        خیلی فکر خوبیه که فریمورک های قوی flexbox رو معرفی کنین.
        اگه یک آموزش هم راجبه Material Design Lite بگذارین که دیگه نور علی نور

  2. سلام آقا سیدی وققتون بخیر
    چرا من هر چی توی سابلایم autoprefixer رو سرچ میکنم چیزی برای من نمیاره؟ایراد از کجاس؟

  3. سلام استاد
    با این کد:
    float: right;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: space-around;

    مثلا من 4 تا پست دارم که دوتا دوتا کنار هم قرار میگیره
    اولین خط : پست 1 و 2
    که
    پست 1 : چهار خط داره
    پست 2: هشت خط
    دومین خط: که زیر پست اول و دوم هست توی یک خط راست
    توی این کد پست ها به هم نمیچسبه
    من میخوام پست سه درست زیر پست قبل 1 باشه اما
    پست های “بعدی” زیر پست های خط “قبل” بدون فاصله قرار بگیرن اما فاصله میوفته بین پست ها تا توی یک خط راست قرار بگیرند و به هم نچسبند
    چطوری میشه پست ها رو مثل این عکس به هم چسباند؟؟؟
    http://bayanbox.ir/view/4563521527217989344/111.jpg

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

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