فلکس باکس چیست؟ + کاربردهای یادگیری FlexBox

شاید برای یک‌بار هم شده اسم فلکس باکس (flex-box) رو شنیده باشید. اگر نشده که تا حالا بشنوید باید به شما بگم که خبر ندارید که چه معجزاتی رو می‌توان با آن انجام داد. با ما همراه باشید تا توضیحاتی را در این باره برای شما بگویم.

باید گفت قبل از این که از flexbox  استفاده بشود از propertyهایی مانند float و position استفاده می شد تا بتوانیم  عنصرها رو چینش کنیم. حالا ممکن بود این چینش به صورت عمودی باشد یا افقی که کار با استفاده از این پروپرتی ها برای ما یک خورده سخت می‌شد. بعد از اینکه FlexBox ایجاد شد سبب این شد که ما راحت تر این چینش رو انجام بدیم. با استفاده از آن مشکلات کمتری برخورد داشته باشیم. در ادامه بیشتر با فلکس باکس آشنا خواهید شد.

بیشتر بخوانید: مسیر یادگیری برنامه نویسی فرانت اند

تعریف فلکس باکس

فلکس باکس را می‌توان مخفف کلمه (flexible box) به معنای باکس انعطاف‌پذیر دانست. یعنی در این روش باید از باکس‌های انعطاف‌پذیر برای صفحه آرایی که مد نظرتان است استفاده کنید. درنتیجه می توان گفت فلکس باکس یکی از ابزار هایی است که به شما کمک می کند تا بتوانید وب‌سایتتان را در مدت زمان بسیار پایینی به صورت Responsive طراحی کنید.

Responsive چیست؟

شما تصور کنید که وب‌سایتی را در لپ‌تاپ خود طراحی کرده‌اید. این وب‌سایتی که طراحی کردید به‌راحتی در مانیتور شما بالا می‌آید و هیچ مشکلی ندارد. اما ممکن است دوست شما بخواهد با گوشی موبایل خود وارد وب‌سایت شما بشود. در این صورت چون که اندازه نمایشگر موبایل کاربر یا دوست شما با اندازه نمایشگر لپ‌تاپ شما متفاوت است. وب‌سایت شما برای کاربرتان آن‌طور که باید به درستی نمایش داده نمی‌شود و عناصر مختلف وب‌سایت موقعیت و ظاهر مناسب خود را از دست خواهند داد. علت این امر Responsive نبودن وب سایت شما است. شما برای این که وب‌سایت تقریباً در همه دستگاه‌های موبایل، لپ‌تاپ، تبلت و غیره کاملاً به درستی نمایش داده شود، باید وب‌سایتتان را به صورت Responsive  طراحی کنید. فلکس باکس یک حالت چیدمان CSS3 است.

تعریف CSS

در طراحی وب از زبان CSS طراحی و زیباتر کردن صفحات استفاده می‌شود؛ اما گاهی، طراحی برخی از موارد بسیار دشوار می‌شود و استفاده از CSS را سخت می‌کند. اما خوشبختانه با استفاده از روش فلکس باکس این  مشکل به‌آسانی قابل‌حل شده است.

بیشتر بخوانید: CSS چیست و چه کاربردی دارد؟

فلکس باکس و پیش‌نیازهای آن

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

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

• 1. هم‌ترازسازی چپ، راست و مرکز باتوجه به عنصر نگهدارنده

• 2. امکان تغییر ترتیب عنصرها بدون دست‌کاری در HTML ( این یکی خیلی عالیه )

• 3. تعیین‌کردن اندازه‌ی عنصر نسبت به‌اندازه‌ی عنصر نگهدارنده بدون نگران بودن در مورد واحد اندازه‌ی عنصر نگهدارنده و تغییرات viewport ( پنجره مرورگر)

• 4. بدون نیاز داشتن به تعیین عرض مشخص و دقیق می‌توان برای آنها عنصرهایی را در کنار هم ردیف کرد.

• 5. اگر جای کافی برای عنصرهایی که در یک خط قرارگرفتن نباشد به‌راحتی عنصر آخر به‌صورت خودکار در ردیف بعد قرار می‌گیرد.

• 6. با سرعت بالا می‌توان چیدمان عنصرهای کنار هم را از حالت افقی به حالت عمودی و برعکس عوض کرد. (فقط با تغییر یک کلمه)

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

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

• 9. آموزش فلکس باکس بسیار راحت و قابل‌فهم است

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

معایب فلکس باکس

• 1. متاسفانه کدهای این ماژول به همراه prefixهای مختص به آن خیلی زیاد و نامرتب است.

• 2. فلکس باکس قادر به پشتیبانی از تمامی نسخه‌های مرورگر نیستند. استفاده از آن برای بعضی از مرورگرها سایت را برهم می‌ریزد.

بیشتر بخوانید: برنامه نویسی فرانت اند چیست؟(به همراه راهنمای مسیر)

آموزش FlexBox

با جرئت می توان گفت که آموزش فلکس باکس در css یکی از مهم‌ترین تکنیک‌هایی است که در طراحی وب حتماً  با html و css باید بلد باشید شما با استفاده از flex box در css خیلی راحت و ساده  می‌توانید چیدمان المان‌های صفحه را به بهترین شکل ممکن انجام دهید بدون اینکه شما نیاز به استفاده از خصوصیت‌هایی مثل float و position و غیره داشته باشید.

آموزش flexbox در css یکی از مباحث کاربردی است، با کمک flexbox قادر هستید صفحات خود را بدون درگیرشدن با مشکلاتی مانند float یا whitespace به‌راحتی طراحی کنید. یکی از مزیت‌های صفحه‌آرایی با FlexBox این است که صفحات به‌صورت ریسپانسیو خواهند بود.

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

وب‌سایتی به اسم CanIUse طراحی شده است  که شما به کمک آن می‌توانید از پشتیبانی هر مرورگر مانند فایرفاکس، گوگل کروم، اپرا، بریم و غیره  از هر تکنولوژی و ابزارهایی که در برنامه‌نویسی موجود هستند مطلع شوید. برای این کار کافی است به وب‌سایت caniuse.com بروید. در اینپوت باکس مربوط به serach  کلمه flex را بنویسید و سرچ کنید. برای استفاده از flexbox، باید به عنصر پدری که عناصر رو در بر دارد، دستور display:flex اختصاص بدیم. طراحی ریسپانسیو با flexbox خیلی ساده‌تر می‌شود.

کلام آخر

یکی از اصلی‌ترین و ارزشمندترین امکاناتی که فلکس باکس در اختیار شما قرار خواهد داد قابلیت انعطاف پذیر بودن اندازه عنصرهای داخلی نسبت به فضای عنصر نگهدارنده آن است. اگر جهت عنصر نگهدارنده row باشد عرض انعطاف‌پذیر می‌شود و اگر جهتش column باشد ارتفاع انعطاف‌پذیر است. یادگیری FlexBox بسیار راحت و کاربردی است. شما امروزه حتماً باید آن را بلد باشید تا کار شما راه بیفتد.