آموزش رایگان FlexBox - صفر تا 100 فلکس باکس

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

 

فلکس باکس (FlexBox) چیست؟

Flexbox  يا همان  Flexible Box Layout Model یک ماژول یا تکنیکی برای طرح‌بندی در لایه‌های المان‌های موجود یک صفحه می‌باشد که به منظور ایجاد طراحی قابل انعطاف به کار می‌رود.  فلکس باکس برای سیستم پنجره‌ی x به منظور سبکی از Blackbox ایجاد شده است. یکی از علت‌های سبکی آن این است که  UI این ماژول صرفا شامل یک منوی وظیفه و یک منوی باز شونده می‌باشد که از طریق راست کلیک بر دسکتاپ قابل دستیابی است. همچنین دارای یک پشتیبانی کوچک برای تمامی آیکن‌ها است. این مجموعه به بخشی از قوانین CSS تلقی می‌شود که کمک می‌کند طراحی و چیدمان برای ریسپانسیوسازی بسیار راحت‌تر صورت بگیرد. این ماژول جز اولین تکنیک‌های css در دنیای مدرن وب می‌باشد. 

 

قبل از ارائه‌ی فلکس باکس

قبل از ارائه‌ی این ماژول طراحان به منظور ایجاد این صفحه‌بندی از  Float و Position استفاده می‌کردند. این دو ویژگی برای شناور کردن آلمان‌های مختلف در صفحات به نحو دلخواه و مورد انتظار به کار می‌رود. برای مثال برای قرار دادن المانی در سمت راست یا چپ از ویژگی Float استفاده می‌کردند. مطمئنا برای صفحه نمایش یک الی دو ستونه از عکس‌ها در این روش مشکلی نخواهیم داشت، اما مطمئنا برای صفحه‌آرایی‌های چند ستونه‌ی تودرتو قطعا به چالش برمی‌خوریم.  از مشکلات دیگری که برنامه‌نویسان با آن درگیر بودند این بود که زمانی که صفحه‌آرایی‌های صورت گرفته را در مرورگرهای متفاوت یکسان می‌کردند باید  مسیر پر پیچ و خمی را طی می‌کردند. یا فضا‌ها سفیدی که در طراحی وب ایجاد می‌شد از کیفیت عملکرد برنامه‌نویسان کاهش می‌داد. تا اینکه فلکس باکس در سال ۲۰۰۹ ارائه شد و علاوه بر رفع این مشکلات ویژگی‌ها بسیار کاربردی را فراهم کرد.

 

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

1. طراحی آبجکت

در نگاه اول از این ماژول برای طراحی المان‌ها در داخل یک صفحه  می‌توان استفاده کرد. همچنین فلکس باکس دارای دو محور اصلی (Main Axis) و ضربدری (Cross Axis) می‌باشد که  محور اصلی، دارای خاصیت flex-direction می‌باشد. که دارای چهار مقدار ممکن است: ردیف، ردیف معکوس، ستون و ستون معکوس. محور عرضی  عمود (⟂) به محور اصلی می‌باشد. به کمک این خاصیت می‌توان طرح‌های بسیار جذابی ارائه داد.

2. چیدن المان‌ها در خطوط

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

• wrap: باعث می شوند عنصرها به خط بعد بروند
• nowrap: مقدار پیش‌فرض که باعث می‌شود تحت همه شرایط تمام عنصرها در یک خط باقی بمانند.
• wrap-reverse: این ویژگی باعث می شود عنصرهایی که در عنصر نگهدارنده جای نمی‌گیرند در همان خط بمانند و به جای آنها عنصرهای دیگر که از لحاظ ترتیب قبل آنها قرار دارند به خط بعد بروند.

3. ترازبندی داده‌ها

فلکس باکس اولین لایه‌بندی CSS می‌باشد که از قدرت ترازبندی المان‌های بالایی برخوردار است. کافی است  به مقدارهای justify-content نگاه کنید که  چندین مدل ترازبندی ارائه شده است. همچنین به کمک این  ماژول می‌توان داده‌ها را نسبت به عنصر نگهدارنده در سمت چپ، راست و یا مرکز هم تراز کرد.

4. تغییر ترتیب المان‌ها

فلکس باکس این امکان را برای ما فراهم می‌کند که بدون ایجاد هیچ تغییری در کدهای ‌html و تغییر در viewport  ترتیب المان‌ها را تغییر دهیم.

5. طراحی ساده‌ی ریسپانسیو

اگر سایتی را در هر مرورگری باز کنیم و نظم‌ آن بهم نریزد می‌گویند ریسپانسیو سازی شده است. به کمک فلکس باکس ریسپانسیو سازی ما خیلی بهتر می‌شود تا نسبت به زمانی که بخواهیم با Html, CSS خام این کار را انجام دهیم. به منظور واکنش‌گرایی سایت باید از به عنصر اصلی که عملکرد دیگر عناصر به آن وابسته است دستور display: flex داد. در این صورت طراحی ریسپانسیو و طراحی وب  با flexbox بسیار  ساده‌تر خواهد شد. چرا که بعد از اختصاص دادن این دستور، CSS دست برنامه‌نویس را برای به کارگیری دیگر دستورات باز خواهد کرد.

6. ایجاد یک استایل برای چند عنصر

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

7. لایه‌بندی راحت

همان طور که اشاره شد فلکس سر آغاز سیستم‌های قوی لایه‌بندی در دنیای وب بود. این ابزار فوق العاده برای تنظیم لایه‌ها جایگزین دو آبشن float و display شد.

8. پشتیبانی از چیدمان معکوس

به سرعت می‌توان آیکون‌های قرار گرفته در یک ردیف را با تغییر صرفا یک کد چیدمان ‌آن‌ها را به صورت عمودی و افقی ‌تغییر داد.

9. به کدهای GS کمتری نیاز داریم

یکی از کاربردهای جی اس قابلیت order یا همان جابجایی عناصر  بدون از دست دادن خاصیت استاتیک ‌آن‌ها بود. که به کمک فلکس باکس به راحتی می‌توان این جابه‌جایی‌ها را اجرا کرد.

 

پیش‌نیازهای لازم برای فلکس باکس

فلکس باکس ابزاری جدا از CSS نیست و داخل خود CSS وجود دارد. به نوعی این ماژول نوعی display است که اگر به CSS تسلط داشته باشید، با displayهای نوع block، inline و … آشنا هستید. همان طور که اشاره شد با دادن دستور  display: flex با کمک propertyهایی که وجود دارد به طراح کمک می‌کند تا در فرآیند صفحه‌آرایی و ریسپانسیو سازی سایت سریع‌تر عمل کند. و در بازه‌ی زمانی خیلی کوتاهی وب سایت را Responsive کنند. بنابراین می‌توان گفت که پیش‌نیاز اصلی و اساسی یادگیری این ماژول CSS می‌باشد.

 

مهم‌ترین عیب‌های فلکس‌ باکس

1. متاسفانه کدهای این ماژول به همراه prefixهای مختص به آن بسیار زیاد و نامرتب است.
2. متاسفانه از تمامی نسخه‌های مرورگر پشتیبانی نمی‌کند و استفاده از آن برای برخی از مرورگرها سایت را برهم می‌ریزد.

 

ویژگی ها و پایه ها فلکس باکس.

• Direction (جهت)
• Order (ترتیب)
• Warp (پیچاندن)
• Alignment (تراز کردن)
• Resize (تغییر اندازه)

ویژگی های فلکس باکس این ۵ مورد هستند که اکر به خوبی یاد بگیرید در این زمینه به تسلط کافی خواهید رسید.

 

فلکس باکس از چه مرورگرهایی پشتیبانی می‌کند؟

• Google Chrome 29 + (باید نسخه‌ی ۲۹ به بعد کروم را استفاده کنید.)
• Firefox 28 +
• Internet Explorer 11
• Opera
• Safari 6
• Android 4.4
• IOS 7.1

 

Grid یا flexbox

از دیگر ابزارهایی که کمک می‌کند علاوه بر ریسپانسیوسازی سایت با سرعت بالا طراحی خود را ارائه دهیم، گرید می‌باشد. این ماژول در css این شرایط را برای کسانی که در حوزه‌ی وب کار می‌کنند فراهم می‌کند که بتوانند صفحات وب را بدون تداخل با یک دیگر به بخش‌های مختلفی تقسیم کنند. دو مورد از زمینه‌هایی که این دو با هم تفاوت دارند را در این قسمت اشاره می‌کنم:

1. تعداد ابعاد:

ابعاد به جهاتی گفته می‌شود که سیستم طبقه‌بندی، به کمک آن‌ها طبقه‌بندی را انجام می‌دهد. فلکس باکس تمامی روند مرتب کردن و طبقه‌بندی المان‌ها را صرفا در یک خط انجام می‌دهد و به توعی تک بعدی است و ما بعد از مشخص کردن تغییرات جهت  را توسط خاصیت  flex-direction  فقط در راستای سطر یا فقط در راستای ستون انجام می‌دهیم. در صورتی که به کمک گرید طبقه‌بندی در دو بعد انجام می‌شود. منظور این است که به طور همزمان قادر هستیم المان‌ها را راستای سطر و ستون قرار دهیم.

2. هم‌پوشانی

اورلپ یا هم‌پوشانی یعنی گاهی اوقات مجبور هستیم که المان‌ها را وارد محدوده‌ی یک دیگر کنیم. بدین منظور در فلکس باکس باید از margin  منفی استفاده کنیم که متاسفانه ممکن است در واکنش‌گرایی صفحه به مشگل بر بخوریم. اما به کمک گرید ساده‌تر پیاده می‌شود و تنها کافی است از خاصیت‌های grid-row و grid-column بهره ببریم.

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

 

در پایان

در این مقاله سعی کردم شما را با یک ماژول حرفه‌ای آشنا کنم. مزایا و کاربردهای فلکس باکس بسیار بیشتر از موارد اشاره شده می‌باشد. پس، اگر به عنوان یک طراح صفحات وب قصد دارید به کمک فلکس باکس کار حرفه‌ای ارائه دهید، دوره آموزش رایگان FlexBox کدیاد مناسب شماست.