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

اگر هنگام طراحی صفحه در المنتور برای قرار دادن چند المان کنار یکدیگر، تنظیم فاصله ها، تراز کردن محتوا یا نمایش صحیح بخش ها در موبایل با مشکل مواجه شده اید، احتمالاً زمان آن رسیده است که با منطق Flexbox Container کار کنید. استفاده از فلکس باکس در المنتور باعث می شود ساختار صفحه به جای وابستگی به تعداد زیادی سکشن، ستون و سکشن داخلی، بر اساس یک سیستم انعطاف پذیر و قابل کنترل شکل بگیرد. در این روش می توانید مشخص کنید المان ها در چه جهتی قرار بگیرند، چطور در فضای موجود توزیع شوند، چه فاصله ای از یکدیگر داشته باشند و در نمایشگرهای مختلف چگونه تغییر وضعیت دهند.

این قابلیت برای طراحی بخش هایی مانند هدر، منوی سایت، کارت های خدمات، معرفی محصولات، بخش ویژگی ها، فرم تماس، دکمه های فراخوان و بخش های اطلاعاتی کاربرد دارد. در این راهنما، علاوه بر آموزش استفاده از فلکس باکس در المنتور، با منطق Container، تفاوت Row و Column، کاربرد Justify Content و Align Items، نقش Gap، Wrap، Width، Grow و Shrink، تنظیمات واکنش گرا و اشتباهات رایج آشنا می شوید.

فلکس باکس در المنتور چیست؟

Flexbox یک مدل چیدمان در CSS است که برای قرار دادن و توزیع عناصر در یک فضای مشخص طراحی شده است. با خرید المنتور حرفه ای و نصب متوجه خواهید شد که المنتور این منطق را در قالب Container در اختیار طراح قرار می دهد تا بتواند بدون نوشتن کدهای پیچیده، ساختارهای منعطف تری ایجاد کند. در ساختار قدیمی المنتور، طراحی صفحه معمولاً بر پایه Section، Column و Inner Section انجام می شد. برای ساخت یک بخش چندستونه ممکن بود چند ستون ایجاد کنید و سپس برای هر ستون، فاصله، عرض، تراز و تنظیمات واکنش گرا را جداگانه تغییر دهید.

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

دسکتاپ: کارت اول | کارت دوم | کارت سوم

موبایل: کارت اول → کارت دوم → کارت سوم

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

چرا استفاده از Flexbox Container در المنتور اهمیت دارد؟

مزیت اصلی فلکس باکس فقط حذف چند ستون نیست؛ بلکه تغییر روش فکر کردن درباره ساختار صفحه است. در یک طراحی اصولی، هر بخش باید رابطه مشخصی میان والد و فرزندان خود داشته باشد. Container این رابطه را ساده تر می کند و به شما اجازه می دهد کنترل چیدمان را در سطح والد انجام دهید.

ساختار ساده تر صفحه

وقتی برای هر بخش از صفحه کانتینرهای متعدد و غیرضروری ایجاد نکنید، مدیریت ساختار صفحه آسان تر می شود.

کنترل بهتر چیدمان

به جای تنظیم دستی موقعیت بسیاری از عناصر، می توانید از Direction، Justify Content، Align Items و Gap استفاده کنید.

واکنش گرایی بهتر

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

کاهش وابستگی به Marginهای متعدد

در بسیاری از موارد، فاصله بین عناصر را می توان با Gap مدیریت کرد و دیگر لازم نیست برای هر عنصر Margin جداگانه تعیین شود.

مدیریت آسان تر گروهی از عناصر

اگر چند المان باید همیشه به عنوان یک گروه رفتار کنند، قرار دادن آن ها در یک کانتینر باعث می شود کنترل گروه ساده تر شود.

برای درک بهتر ساختار Container، می توانید راهنمای کار با کانتینر در المنتور را نیز مطالعه کنید.

آموزش استفاده از فلکس باکس در المنتور

برای استفاده از Flexbox Container بهتر است به جای تغییر تصادفی گزینه ها، مرحله به مرحله جلو بروید.

مرحله اول: ایجاد Container

در صفحه موردنظر، گزینه افزودن بخش جدید را انتخاب کنید و Container را به ساختار صفحه اضافه کنید. بعد از ایجاد کانتینر، می توانید ویجت هایی مانند Heading، Image، Button، Icon و Text Editor یا حتی کانتینرهای دیگر را داخل آن قرار دهید. در این مرحله لازم نیست سراغ تنظیمات پیچیده بروید. ابتدا مشخص کنید کانتینر قرار است چه نقشی داشته باشد:

• کانتینر اصلی بخش معرفی
• کانتینر کارت های خدمات
• کانتینر اطلاعات تماس
• کانتینر دکمه های CTA
• کانتینر تصویر و متن
• کانتینر هدر

مرحله دوم: تعیین Direction

بعد از انتخاب Container، وارد بخش Layout شوید و Direction را بررسی کنید.

• Row: عناصر در امتداد یک ردیف قرار می گیرند.
• Column: عناصر از بالا به پایین قرار می گیرند.

اگر می خواهید تصویر در کنار متن قرار بگیرد، معمولاً Row نقطه شروع مناسبی است. اگر می خواهید عنوان، توضیح و دکمه زیر یکدیگر قرار بگیرند، Column انتخاب طبیعی تری است.

مرحله سوم: تنظیم Justify Content

Justify Content نحوه توزیع عناصر در محور اصلی را کنترل می کند. فرض کنید Direction روی Row قرار دارد. در این حالت محور اصلی افقی است و Justify Content تعیین می کند عناصر در راستای افقی چگونه توزیع شوند. این گزینه برای قرار دادن عناصر در ابتدای ردیف، مرکز، انتها یا توزیع فضای میان آن ها کاربرد دارد.

مرحله چهارم: تنظیم Align Items

Align Items بیشتر روی محور مقابل اثر می گذارد. اگر Direction روی Row باشد، Align Items معمولاً برای تراز عمودی عناصر اهمیت بیشتری پیدا می کند. برای مثال، اگر یک تصویر و یک متن در کنار هم قرار گرفته اند اما ارتفاع آن ها متفاوت است، با تنظیم Align Items می توانید مشخص کنید عناصر نسبت به یکدیگر چگونه تراز شوند.

مرحله پنجم: استفاده از Gap

Gap یکی از مهم ترین تنظیمات برای ایجاد فاصله بین عناصر داخل یک Container است. اگر چند کارت داخل یک کانتینر دارید، به جای اینکه برای هر کارت Margin جداگانه تعریف کنید، می توانید فاصله بین فرزندان را با Gap مدیریت کنید.

• فاصله ها یکدست تر می شوند.
• مدیریت طراحی آسان تر می شود.
• در تغییرات Responsive کنترل بهتری خواهید داشت.
• احتمال ایجاد فاصله های ناخواسته کمتر می شود.

برای فاصله اختصاصی اطراف یک عنصر خاص، Margin همچنان کاربرد دارد؛ اما برای فاصله منظم بین چند فرزند یک Container، Gap معمولاً انتخاب منطقی تری است. برای یادگیری دقیق تر این موضوع، آموزش مارجین و پدینگ در المنتور را مطالعه کنید.

Wrap در فلکس باکس چیست؟

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

چگونه یک ساختار حرفه ای برای کارت های خدمات بسازیم؟

کارت خدمات یکی از بهترین تمرین ها برای یادگیری Flexbox است. فرض کنید هر کارت شامل آیکون، عنوان، توضیح کوتاه و دکمه باشد.

Container کارت

• Icon
• Heading
• Description
• Button

می توانید برای هر کارت یک Container در نظر بگیرید و عناصر داخلی را به صورت Column قرار دهید. فاصله میان عناصر نیز می تواند با Gap کنترل شود. برای تکمیل چنین کارت هایی، آموزش های افزودن آیکون در المنتور و ویجت دکمه در المنتور نیز می توانند مفید باشند.

فلکس باکس برای ساخت جدول و بخش های اطلاعاتی

Flexbox می تواند برای ساخت بسیاری از چیدمان های اطلاعاتی مفید باشد، اما نباید هر ساختاری را به عنوان جدول واقعی در نظر گرفت. اگر هدف شما نمایش داده های واقعاً جدولی است، بهتر است از ساختار مناسب جدول استفاده کنید. برای طراحی جدول در المنتور پس از دانلود رایگان المنتور پرو اورجینال می توانید راهنمای ساخت جدول در المنتور را بررسی کنید. اما برای بخش هایی مانند مقایسه ویژگی ها، کارت های قیمت، فهرست امکانات و بلوک های اطلاعاتی می توان از Container و Flexbox برای ساخت ساختاری منظم استفاده کرد.

آیا فلکس باکس باعث افزایش سرعت سایت می شود؟

نباید صرفاً به دلیل استفاده از Flexbox انتظار داشت سرعت سایت به شکل محسوسی افزایش پیدا کند. مزیت اصلی Flexbox در المنتور، مدیریت بهتر ساختار و چیدمان است. سرعت سایت نیز به عوامل مختلفی مانند تصاویر، فونت ها، افزونه ها، اسکریپت ها، کش، هاست و ساختار کلی صفحه وابسته است. اگر هدف شما بهینه سازی عملکرد المنتور است، مطالعه راهنمای افزایش سرعت المنتور می تواند مسیر مناسب تری برای بررسی عوامل مؤثر بر عملکرد سایت در اختیار شما قرار دهد.

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

بر اساس محتوای منبع این آموزش، قابلیت ساخت Container و تنظیمات اصلی Flexbox در نسخه رایگان المنتور در دسترس است و برای شروع یادگیری این روش چیدمان لزوماً به نسخه حرفه ای نیاز ندارید. با این حال، نیاز به نسخه رایگان یا حرفه ای به امکانات دیگری که در پروژه خود استفاده می کنید بستگی دارد. بنابراین بهتر است انتخاب نسخه را فقط بر اساس فلکس باکس انجام ندهید. اگر درباره تفاوت امکانات نسخه ها تصمیم می گیرید، مطالعه المنتور پرو یا رایگان؟ می تواند به مقایسه بهتر امکانات کمک کند. برای پروژه هایی که به قابلیت های حرفه ای المنتور نیاز دارند نیز می توانید صفحه خرید افزونه المنتور پرو را بررسی کنید.

جمع بندی

استفاده از فلکس باکس در المنتور بیش از آنکه به معنی یادگیری چند گزینه در پنل تنظیمات باشد، به معنی یادگیری یک روش منطقی برای ساختاردهی صفحه است. در یک چیدمان مناسب، ابتدا باید مشخص کنید چه عناصری متعلق به یک گروه هستند و Container والد را بر همان اساس ایجاد کنید. سپس Direction را انتخاب کنید، نحوه تراز شدن عناصر را با Justify Content و Align Items مشخص کنید و فاصله بین فرزندان را تا حد امکان با Gap مدیریت کنید. بعد از آن، Width، Grow، Shrink و Wrap را فقط در صورت نیاز تنظیم کنید و در نهایت نسخه موبایل و تبلت را جداگانه بررسی کنید.

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

سؤالات متداول درباره فلکس باکس در المنتور

آیا برای استفاده از Flexbox باید CSS بلد باشیم؟

خیر. برای استفاده از تنظیمات اصلی Flexbox Container در المنتور نیازی نیست از ابتدا CSS بنویسید. المنتور بسیاری از کنترل های اصلی مانند Direction، Alignment، Gap و Width را در رابط کاربری خود ارائه می کند. با این حال، آشنایی مقدماتی با مفاهیم CSS می تواند درک رفتار این گزینه ها را آسان تر کند.

تفاوت Row و Column در المنتور چیست؟

Row عناصر را در امتداد یک ردیف قرار می دهد، در حالی که Column عناصر را به صورت عمودی و از بالا به پایین سازمان دهی می کند. بسته به طراحی Responsive می توانید در دسکتاپ از Row و در موبایل از Column استفاده کنید.

آیا برای فاصله بین چند عنصر بهتر است از Margin استفاده کنیم؟

اگر هدف ایجاد فاصله منظم میان فرزندان یک Container است، Gap معمولاً انتخاب ساده تر و قابل کنترل تری است. Margin زمانی کاربرد بیشتری دارد که فاصله اختصاصی اطراف یک عنصر مشخص موردنیاز باشد.

چرا بعد از تغییر Width، رفتار Grow یا Shrink متفاوت می شود؟

Width، Grow و Shrink همگی در نحوه استفاده عنصر از فضای موجود نقش دارند. تعیین یک عرض ثابت یا سفارشی می تواند روی رفتار Grow و Shrink اثر بگذارد. بنابراین بهتر است این گزینه ها را به صورت هماهنگ بررسی کنید و بدون نیاز، چند کنترل را همزمان تغییر ندهید.

آیا می توان Direction را فقط برای موبایل تغییر داد؟

بله. در طراحی Responsive المنتور می توانید تنظیمات را برای دستگاه های مختلف بررسی کنید. به این ترتیب ممکن است یک بخش در دسکتاپ Row باشد اما در موبایل به Column تبدیل شود تا فضای صفحه بهتر استفاده شود.

آیا استفاده از Containerهای تو در تو اشتباه است؟

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

چه زمانی باید از CSS سفارشی استفاده کنیم؟

وقتی تنظیمات داخلی المنتور نیاز شما را پوشش نمی دهد یا به کنترل ظاهری خاصی احتیاج دارید، CSS سفارشی می تواند مفید باشد. اما بهتر است ابتدا مشکل را با تنظیمات ساختاری Container حل کنید و CSS را به عنوان ابزار تکمیلی در نظر بگیرید.

آیا Flexbox برای طراحی سایت موبایل فرندلی مناسب است؟

بله، یکی از کاربردهای مهم آن مدیریت چیدمان در عرض های مختلف صفحه است. البته واکنش گرا بودن سایت فقط به Flexbox وابسته نیست و مواردی مانند اندازه فونت، تصاویر، Padding، Margin، عرض محتوا و سایر تنظیمات Responsive نیز باید بررسی شوند.