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

Flexbox

Flex Container، Alignment و Gap

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

محتوای درس Flex Container، Alignment و Gap

Flex Container، Alignment و Gap را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت 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
<header class="flex items-center justify-between gap-4 rounded-xl bg-white p-4 shadow">
  <strong class="text-slate-900">خانه برنامه نویسان البرز</strong>
  <nav class="flex items-center gap-4 text-sm text-slate-600">
    <a href="#">دوره‌ها</a>
    <a href="#">آموزش‌ها</a>
    <a href="#">وبلاگ</a>
  </nav>
</header>

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

هدر افقی با لوگوتایپ و منو.

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

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

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

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

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