فصل 6 از 27 درس 2 از 2

Flexbox

Flex Grow، Shrink و Basis

بخشی از آموزش جامع Tailwind CSS

محتوای درس Flex Grow، Shrink و Basis

Flex Grow، Shrink و Basis را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Flexbox برای چیدمان یک‌بعدی مناسب است. محور اصلی با flex-row یا flex-col تعیین می‌شود، justify محتوا را روی محور اصلی و items آن را روی محور متقاطع تراز می‌کند. grow، shrink و basis سهم فضا را کنترل می‌کنند.

روش پیاده‌سازی

  1. محور و امکان Wrap شدن محتوا را مشخص کنید.
  2. تراز و فاصله را با items، justify و gap تنظیم کنید.
  3. برای محتوای انعطاف‌پذیر min-w-0 و برای بخش ثابت shrink-0 را بررسی کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="flex gap-6">
  <aside class="w-64 shrink-0 rounded-xl bg-slate-900 p-4 text-white">Sidebar</aside>
  <main class="min-w-0 grow rounded-xl bg-slate-100 p-6">Main content</main>
</div>

خروجی مورد انتظار

Sidebar ثابت و محتوای اصلی انعطاف‌پذیر.

نکات مهم و خطاهای رایج

  • فراموش‌کردن min-w-0 می‌تواند باعث Overflow متن شود.
  • برای چیدمان دوبعدی پیچیده، Grid خواناتر از Flex تو در تو است.

تمرین پیشنهادی

هدر یا Layout نمونه را با متن طولانی و عرض 320px تست کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS