کانتینر چیست؟
۱. انواع کانتینرها
کانتینرهای متقارن (Grid): این نوع کانتینر به شما امکان می‌دهد عناصر را به صورت متقارن و در یک ساختار شبکه‌ای قرار دهید. این نوع طراحی معمولاً برای چیدمان‌های منظم و یکسان استفاده می‌شود.
کانتینرهای نامتقارن (Flexbox): این کانتینرها بیشتر برای چیدمان‌های انعطاف‌پذیر و نامتقارن کاربرد دارند. با استفاده از Flexbox، می‌توانید عناصر را در کنار یکدیگر قرار دهید و نحوه نمایش آن‌ها را به راحتی تغییر دهید.
۲. مزایای استفاده از کانتینرها
کاهش DOM: یکی از مزایای بزرگ کانتینرها، کاهش اندازه DOM (Document Object Model) است. با استفاده از کانتینرها، می‌توانید تعداد عناصر HTML را کاهش دهید، که این امر به بهبود عملکرد سایت و افزایش سرعت بارگذاری کمک می‌کند.
طراحی هوشمند: کانتینرها به شما اجازه می‌دهند طراحی‌های هوشمندانه‌تری ایجاد کنید. با استفاده از امکانات Flexbox و Grid، می‌توانید چیدمان‌های پیچیده‌تری بسازید که به راحتی قابل تنظیم و مدیریت هستند.
قوانین استفاده از کانتینر
1. عرض محتوا: جعبه‌ای و تمام عرض
در حالت “جعبه‌ای”، عرض محتوای داخلی کانتینر به تغییرات عرض کانتینر واکنش می‌دهد و خود را به اندازه‌ی مشخصیکه تعیین شده محدود می‌کند. در این حالت، محتوای درون کانتینر بسته به تنظیمات تعیین شده توسط کاربر در داخل یک محدوده قرار می‌گیرد.
در حالت “تمام عرض”، کل کانتینر بدون محدودیت، عرض صفحه را پر می‌کند و محتوای داخل کانتینر با عرض کانتینر تطبیق می‌یابد و تغییرات را دنبال می‌کند.
2. ارث‌بری در کانتینرها
قابلیت ارث‌بری در کانتینرها به عناصر داخلی این امکان را می‌دهد که برخی از ویژگی‌های کانتینر والد را به صورت خودکار دریافت کنند. این ویژگی می‌تواند در بهینه‌سازی و یکپارچگی تنظیمات سبک و چیدمان بسیار مفید باشد.
3. کمترین ارتفاع
تنظیم کمترین ارتفاع کانتینر باعث می‌شود کانتینر حتی در صورت داشتن محتوای کم، به ارتفاع مشخصی برسد. این کار به شما کمک می‌کند طرحی ثابت و منظم ایجاد کنید و از تغییرات ناخواسته در اندازه کانتینرها جلوگیری شود.
4. جهت‌یابی
گزینه جهت‌یابی به شما اجازه می‌دهد که نحوه قرارگیری محتوا را در کانتینر تعیین کنید، به‌صورت افقی یا عمودی. این ویژگی برای چیدمان دقیق عناصر بسیار کاربردی است.
5. تراز کردن محتوا
تنظیمات تراز کردن محتوا به شما این امکان را می‌دهد که موقعیت محتوای درونی کانتینر را بر اساس نیازهای طراحی خود، مانند تراز مرکزی، چپ، راست یا بالا و پایین، تنظیم کنید.
6. شکاف (Gap)
گزینه شکاف برای تعیین فاصله بین عناصر داخلی کانتینر استفاده می‌شود. با این گزینه می‌توانید فاصله‌گذاری‌ها را دقیق تنظیم کنید و چیدمان مرتب‌تری برای محتوا داشته باشید.
7. Wrap
Wrap در کانتینرها به عناصر داخلی اجازه می‌دهد که در صورت پر شدن عرض کانتینر، به خط بعدی منتقل شوند. این ویژگی برای چیدمان ریسپانسیو و منظم عناصر در کانتینرها بسیار مفید است.
8. No Wrap
گزینه No Wrap از انتقال عناصر به خط بعدی جلوگیری می‌کند و همه‌ی عناصر را در یک خط نگه می‌دارد. این تنظیم در مواقعی مفید است که می‌خواهید عناصر داخلی کنار هم و بدون شکاف باقی بمانند.
عملکرد عناصر منفرد در کانتینر
1. عرض
این گزینه در تب پیشرفته هر عنصر وجود دارد و چند زیر گزینه را برای تنظیم عرض عنصر ارائه می‌دهد:
- تمام عرض (100%): عنصر کل عرض کانتینر را پر می‌کند و بدون حاشیه‌ای از لبه‌های کانتینر نمایش داده می‌شود.
- پیش‌فرض: عرض عنصر به طور پیش‌فرض بر اساس تنظیمات کانتینر و چیدمان کلی تعیین می‌شود.
- در متن (Auto): عنصر به صورت “درون متنی” نمایش داده می‌شود، یعنی در یک خط با سایر عناصر قرار می‌گیرد، به خصوص زمانی که می‌خواهید عناصر به‌صورت کنار هم قرار گیرند.
- عرض سفارشی: این گزینه به شما اجازه می‌دهد تا عرض عنصر را به صورت دستی و با مقدار دقیق تنظیم کنید. این تنظیمات می‌تواند برای طرح‌های پیچیده مفید باشد.
2. Align-Self
این گزینه برای تراز کردن عمودی هر عنصر در کانتینر استفاده می‌شود و شامل زیرگزینه‌های زیر است:
- آغاز (Start): عنصر را در بالای کانتینر قرار می‌دهد و در ابتدای محور عمودی چیدمان می‌کند.
- وسط (Center): عنصر را در وسط کانتینر قرار می‌دهد و آن را در مرکز محور عمودی قرار می‌دهد.
- پایان (End): عنصر را در پایین کانتینر قرار می‌دهد و در انتهای محور عمودی چیدمان می‌کند.
- کشیده (Stretch): عنصر را به طور کامل در امتداد محور عمودی کشیده می‌کند، به‌طوری‌که کل ارتفاع کانتینر را پر کند.
3. اندازه
تنظیمات اندازه، کنترل بیشتری بر رفتار اندازه‌ی هر عنصر ارائه می‌دهد و شامل این زیر گزینه‌ها است:
- Grow: این گزینه به عنصر اجازه می‌دهد تا فضای بیشتری را اشغال کند و همراه با تغییرات کانتینر به نسبت بزرگ‌تر شود. این گزینه برای چیدمان‌هایی که انعطاف‌پذیری دارند مفید است.
- Shrink: این گزینه به عنصر اجازه می‌دهد که در صورت کمبود فضا، اندازه‌ی خود را کاهش دهد. این تنظیم برای طراحی‌های ریسپانسیو بسیار کاربردی است.
- None: با انتخاب این گزینه، عنصر اندازه‌ی ثابت خود را حفظ می‌کند و تغییرات کانتینر بر روی اندازه‌ی آن تاثیری نخواهد گذاشت.
مراحل لینک دادن به کانتینر با تگ <a>:
- کانتینر موردنظر را انتخاب کنید.
- به بخش طرح‌بندی بروید.
- در قسمت تگ HTML، تگ
<a>را انتخاب کنید. - در بخش لینک، URL موردنظر خود را وارد کنید. همچنین می‌توانید تنظیمات دیگری مانند باز شدن لینک در یک صفحه جدید یا استفاده از ویژگی‌های سئو مانند
nofollowرا اعمال کنید.
نکات مهم:
- یکپارچگی طراحی: وقتی تگ
<a>را برای یک کانتینر انتخاب می‌کنید، کل کانتیر به لینک تبدیل می‌شود و کاربر می‌تواند روی هر قسمتی از آن کلیک کند تا به آدرس مشخص شده هدایت شود. - استفاده از لینک برای بخش‌های کلیک‌پذیر: این قابلیت برای طراحی کارت‌ها، بنرها، یا بخش‌هایی که می‌خواهید به‌طور کامل به لینک متصل شوند، مفید است.
- دقت در انتخاب عناصر داخلی: دقت کنید که داخل کانتینر از لینک‌های جداگانه استفاده نکنید، چون HTML استاندارد اجازه تودرتویی تگ‌های
<a>را نمی‌دهد و ممکن است ساختار کد به مشکل بخورد.