این روزها بازار کار با Flexbox داغ شده است و تا هنوز Grid در بین مرورگرها در جایگاه خوبی برای پشتیبانی قرار نگرفته است, فلکس باکس تازنده میدان است.
از آنجا که پربازدیدترین مطلب این وب سایت تا زمان نوشتن این مطلب flexbox بوده است, تصمیم گرفتم تا مطلبی برای معرفی ابزارهایی که به یادگیری آن کمک می کنند و همینطور ابزارهایی که سرعت کار با این ماژول را افزایش می دهند را معرفی کنم.
قبل از بررسی ابزارها اگر با این روش صفحه آرایی آشنایی ندارید بهتر است تا نگاهی به مطلب مربوط به آن داشته باشید.
تست و یادگیری
ابزارهای زیر برای یادگیری و تست ویژگی های فلکس باکس طراحی شده اند:
ابزارهای زیر کاربردی تر است و کد خروجی را نیز نمایش می دهند:
الگوها
در این آدرس شما به منبعی دسترسی دارید که الگوهایی مثل هدر سایت, منوی ساده, کارت ها و غیره با فلکس باکس طراحی شده اند و در آینده به آنها اضافه می شود و صد البته که شما هم می توانید در پروژه متن باز آن در گیتهاب به گسترش آنها کمک کنید:
در مطلب زیر نیز طراحی دو الگو قدم به قدم صورت گرفته است و کد نیز موجود است:
بازی با فلکسی
بازی با ریاضی یادتونه؟ :)
عاشق بازی های زیر خواهید شد که بسیار جالب برای به خاطر سپردن و درک بهتر ویژگی های فلکس باکس طراحی شده اند:
حتی بازی استراتژیک هم داریم :)
کد تقلب
اگر دنبال این هستید تا با ویژگی ها فلکس باکس در چند دقیقه به سرعت هر چه تمام تر آشنا شوید کافی است به مطلب فوق العاده زیر سر بزنید:
- Flexbox Cheatsheet by Joni Bologna
- Flexbox Cheatsheet by Yoksel
- آموزش ویژگی های فلکس باکس با تصویر های متحرک
پلیفیل ها (polyfills)
برای اینکه بتوانید از فلکس باکس در مرورگرهایی مثل اینترنت اکسپلورر 8 و 9 هم استفاده کنید, پلیفیل هایی زیر در دسترس هستند:
کمک به توسعه فلکس باکس
در آدرس زیر به باگ هایی که تا بحال توسط برنامه نویسان مطرح شده است دسترسی خواهید داشت و حتما اگر موردی در زمان کار با فلکس باکس پیش آمد در چنین صفحاتی مطرح کنید.
همینطور راه حل مشکلات معرفی شده نیز در اینجا مطرح شده است:
فلکسی قول
از این به بعد اگر ابزار یا منبع خوبی در مورد فلکس باکس پیدا کردم حتما در این صفحه مطرح می کنم که همه باهاش آشنا بشیم و اینجا مخزن خوبی برای ابزارها و منابع فلکس باکس باشه.
بسیار عالی بود و باتوجه به فلکسی قول قطعا خیلی بهترهم خواهد شد.
امروز روز توست…
…روزت مبارک استاد گرامی.
شما لطف داری رفیق شفیق. آقا رضای عزیز :)
مرسی فلکسی قول :))
:)
اینم یک فریمورک css خوب بر اساس flexbox که دیدم سایت مجید آنلاین معرفیش کرده توی لینک هاش:
https://bbo-code.com/bobscss
که البته این فریمورک گفته که من از این ها الهام گرفتم:
Basscss
Twitter Bootstrap
Google Material
ممنون بابت معرفی این فریمورک. من خودم از فریمورک استفاده نمی کنم ولی اگه یه روزی بخوام استفاده کنم از این استفاده می کنم. که بر اساس فلکس باکس هم هست و کار گوگل هم هست پشتیبانی خوبی داره: getmdl.io
فک کنم توی این صفحه بهتر باشه یه قسمت فریمورک های فلکس باکس هم داشته باشیم. نظرتون چیه؟
بازم ممنون از کامنت خوبتون
فریمورک Material Design Lite هم خیلی خوبه و اینکه گوگل پشتشه یعنی پشتیبانی قوی و آپدیت. من به نظرم رسید که فریمورک bobscss قوی تره ولی چون فقط یک نفر پشتشه اون آپدیت و پشتیبانی قوی رو نداره ولی فکر کنم امکاناتش زیاده.
خیلی فکر خوبیه که فریمورک های قوی flexbox رو معرفی کنین.
اگه یک آموزش هم راجبه Material Design Lite بگذارین که دیگه نور علی نور
لطف میکنین اگه همچین کار بکنین.
در ضمن لینکی که گذاشتین خرابه به نظرم
سلام آقا سیدی وققتون بخیر
چرا من هر چی توی سابلایم autoprefixer رو سرچ میکنم چیزی برای من نمیاره؟ایراد از کجاس؟
آخ آخ حله حله دمتون گرم خودم پیدا کردم :D
سلام استاد
با این کد:
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
اگر مقدار align-items رو stretch بدید کمی نزدیک میشه به اون چیزی که میخواین.
ولی اگر اون چیزی که می خواین دقیقا مثل تصویری هستش که فرستادید بهترین راه حل فعلا استفاده از این کتابخونه است:
https://masonry.desandro.com
سلام استاد :)
این کد پنش : https://codepen.io/hoseyni/pen/PXYPGa
توی پنل ویرایش زدم دوباره ببینید درست گذاشتم