معرفی فلکس باکس (FlexBox)

فلکس باکس چیست

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

مقدمه

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

فلکس باکس چیست؟

یکی از مشکلات عمده در طراحی وب، ریسپانسیو نبودن سایت است که ظاهر آن را ناخوشایند می‌سازد. زبان CSS3 که از پرکاربردترین ابزارهای برنامه نویسی است، با طراحی ماژولی به نام فلکس باکس، این دغدغه را از بین برده است. امروزه هر شرکت برنامه نویسی معتبر از این ماژول یا ماژول‌های مشابه آن استفاده می‌کند. FlexBox یا چیدمان جعبه انعطاف‌پذیر (Flexible Box Layout Model)، یک حالت چیدمان است که با استفاده از آن می‌توانید به راحتی طرح‌هایی را برای برنامه‌های پیچیده و صفحات وب ایجاد نمایید. طرح این ابزار کنترل کاملی بر جهت، تراز، ترتیب، باکس‌ها و اندازه را ارائه می‌دهد. فلکس باکس توسط سازمان W3C معرفی شد و در ابتدا برای طراحی آبجکت‌ها در داخل صفحه مورد استفاده قرار می‌گرفت و در طراحی کل صفحه استفاده نمی‌شد. دلیل این موضوع، این است که فلکس باکس همراه و در کنار زبان CSS است که معمولا با نام تخصصی Grid Layout Module شناخته می‌شود و ممکن است دارای محدودیت‌هایی باشد.

کاربردهای استفاده از FlexBox

  1. جهت (Direction):

شما خواهید توانست موارد مورد نظر را به هر جهت مانند چپ به راست، راست به چپ، پایین به بالا و بالا به پایین ترتیب دهید.

  1. ترتیب (Order):

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

  1. پیچاندن (Wrap):

در صورت عدم داشتن فضای متناقض برای محتوای یک صفحه وب به صورت تک خط، می‌توانید آن‌ها را به چند خط افقی و یا عمودی بپیچانید.

  1. تراز کردن (Alignment):

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

  1. تغییر اندازه (Resize):

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

  1. پشتیبانی از مرورگرها:

FlexBox زیرمجموعه زبان CSS است و در مرورگرهای زیر، پشتیبانی می‌شود:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+
  • Android 4.4+
  • Ios 7.1+

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

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

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

بررسی معماری و نحوه طرح‌بندی FlexBox برای درک بهتر آن ضروری است. چیدمان عناصر به حالات زیر خواهد بود:

  1. درون کانتینر
  2. در امتداد محور متقاطع (Cross Axis)
  3. از شروع متقاطع تا انتهای متقاطع
  4. در امتداد محور اصلی (Main Axis)
  5. از شروع محور اصلی تا انتهای محور اصلی

در ادامه، اصطلاحات کلیدی مربوط به طرح‌بندی فلکس باکس را برای درک واضح‌تر آن توضیح می‌دهیم.

  • flexboxجهت فلکس (Flex-Direction): این ویژگی به منظور قرار گرفتن عناصر فلکس در امتداد محور اصلی می‌باشد.
  • محور اصلی: این محور به عنوان جهت اولیه برای چیدمان عناصر فلکس عمل می‌کند و ممکن است همیشه افقی نباشد. محور اصلی در واقع محوری محسوب می‌گردد که عناصر در امتداد آن سازمان‌دهی می‌شوند.
  • آغاز محور اصلی پایان محور اصلی: این اصطلاحات مربوط به قرار دادن عناصر در کانتینر، از شروع تا پایان محور اصلی هستند.
  • اندازه اصلی (Main Size): عرض یا ارتفاع آیتم مورد نظر، بسته به بعد اصلی که اشغال می‌کند، به عنوان اندازه اصلی شناخته می‌شود.
  • شروع متقاطع پایان متقاطع: خطوط منعطفی جهت تقسیمات درون کانتینر می‌باشند که که از سمت شروع متقاطع، آغاز و در پایان متقاطع ختم می‌شوند.
  • اندازه متقاطع: عرض یا ارتفاع آیتم مورد نظر فلکس به عنوان اندازه متقاطع آن تعریف می‌شود که ابعادی در جهت متقاطع را اشغال می‌کند.
  • محور متقاطع: این محور عمود بر محور اصلی قرار گرفته است و جهت ثانویه را برای چیدمان عناصر ایجاد می‌کند.

موضوعات پیشرفته مربوط به FlexBox

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

  • عناصر فلکس مطلق و نسبی:

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

  • تراز خودکار حاشیه:

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

  • طراحی واکنش‌گرا با فلکس باکس:

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

سخن پایانی

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

Webnegahcompanyمشاهده نوشته ها

وب نگاه با بیش از 20 سال فعالیت در حوزه برنامه نویسی و طراحی اپلیکیشن سعی دارد با نوشتن مقالات جذاب شما را بیشتر با این حوزه آشنا کند

بدون دیدگاه

دیدگاهتان را بنویسید

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