انتخاب درست بین Flexbox و Grid | درس 38 + پروژه درس

درس 38 از دوره آموزش HTML و CSS ارومیا دیزاین

یک منو، پنج کارت خدمات و چند دکمه دارید. آیا باید همه را با Grid بسازید یا Flexbox انتخاب بهتری است؟ پاسخ به رابطه اجزا بستگی دارد. در این درس، تفاوت Flexbox و Grid را با دو نمونه یکسان بررسی می کنیم، رفتار ردیف آخر را می بینیم و سپس هر دو ابزار را در یک پروژه ترکیب می کنیم. هدف این است که برای انتخاب روش چیدمان دلیل داشته باشید، نه اینکه یک دستور را به همه بخش ها اضافه کنید.

پروژه و پاسخ تمرین: دانلود ZIP پروژه درس 38؛ شامل index.html، style.css، solution.css و راهنمای اجرای آفلاین. ZIP را استخراج و index.html را باز کنید. نمونه مقایسه، پروژه ترکیبی و تمرین مستقل بدون اینترنت و نصب ابزار اجرا می شوند.

پیش نیاز و نتیجه ای که باید به دست بیاورید

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

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

تفاوت اصلی؛ رابطه یک مسیر یا شبکه مشترک

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

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

جدول تصمیم برای انتخاب Flexbox یا Grid

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

آزمایش اول؛ پنج کارت در Flexbox

.demo-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 760px;
  margin-inline: auto;
}

.demo-flex > article {
  flex: 1 1 220px;
  min-width: 0;
}

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

اگر grow را صفر کنید، کارت ها دیگر فضای اضافه را به همان شکل پر نمی کنند. پس نتیجه تصویر فقط از نام Flexbox نمی آید؛ به قواعد اندازه گذاری این نمونه وابسته است. برای مشاهده دقیق، مقدار اول flex را از 1 به 0 تغییر دهید و نتیجه خط دوم را مقایسه کنید. basis برابر 220px هم اندازه پایه است و عرض ثابت تضمین شده نیست.

آزمایش دوم؛ همان پنج کارت در Grid

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin-inline: auto;
}

@media (max-width: 600px) {
  .demo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

در عرض بیشتر از 600px، این مثال سه ستون صریح و هم سهم دارد. کارت چهارم و پنجم در ردیف دوم، عرض همان ستون های ردیف اول را حفظ می کنند. یک خانه خالی می ماند؛ کارت پنجم خودکار نصف ردیف نمی شود. اگر هماهنگی ستون ها برای فهرست محصول یا خدمات مهم باشد، این رفتار معمولا مناسب است.

برای مقایسه کنترل شده، اینجا تعداد ستون ها را صریح تعیین کرده ایم. در نسخه واقعی شبکه منعطف، می توانید auto-fit و minmax را به کار ببرید. توجه کنید که auto-fit فقط مسیر کاملا خالی را جمع می کند؛ خانه خالی آخرین ردیف به تنهایی به معنی خالی بودن تمام ستون نیست. همین تفاوت یکی از علت های اشتباه در مقایسه ردیف آخر فلکس و گرید است.

منو و دکمه ها؛ یک مسیر با امکان شکستن خط

.menu, .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

منو معمولا از لینک هایی با متن متفاوت تشکیل می شود. فلکس اجازه می دهد عرض هر لینک از متن آن بیاید و هنگام کمبود جا، گروه به خط بعد برود. gap فاصله میان آیتم ها را ایجاد می کند؛ برای فاصله لبه والد از padding استفاده کنید. اگر هدف ستون های مساوی باشد، باید آن نیاز را جدا در اندازه گذاری بیان کنید.

در HTML منو از nav، فهرست و لینک واقعی استفاده کنید. فلکس فقط چیدمان می سازد و معنای منو یا رفتار کلیک را اضافه نمی کند. dir برابر rtl جهت طبیعی فارسی را تعیین می کند؛ برای فارسی کردن، row-reverse را بی دلیل اضافه نکنید. برای مرور رفتار display، درس نوع نمایش عناصر را ببینید.

پروژه ترکیبی؛ گرید بیرونی و فلکس داخل کارت

<div class="catalog">
  <article class="product">
    <h3>دوره HTML</h3>
    <p>توضیح دوره</p>
    <div class="actions">
      <a href="#exercise">تمرین</a>
      <a href="#answer">راهنما</a>
    </div>
  </article>
  <!-- Add more product cards here -->
</div>

.catalog {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.product {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.product .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 16px;
}

catalog رابطه کارت ها را کنترل می کند. product رابطه عنوان، متن و گروه لینک های خودش را تنظیم می کند. actions هم یک فلکس مستقل برای لینک هاست. یک عنصر می تواند هم آیتم شبکه والد باشد و هم والد فلکس فرزندان خودش. این ترکیب تناقض ندارد؛ هر قانون در سطح متفاوتی کار می کند.

margin-block-start: auto فضای آزاد بالای گروه لینک را می گیرد و گروه را به انتهای کارت می برد. نتیجه زمانی دیده می شود که کارت فضای اضافی داشته باشد؛ مثلا کارت های یک ردیف با ارتفاع مشترک و متن های متفاوت. ارتفاع همه ردیف های گرید لزوما برابر نیست، پس هم ترازی لینک ها را برای کارت های همان ردیف بسنجید.

دلیل استفاده از min-width و شکستن متن

.product { min-width: 0; }
.product p { overflow-wrap: anywhere; }

حداقل اندازه خودکار بعضی آیتم ها می تواند مانع کوچک شدن شود. min-width: 0 این محدودیت آیتم را کاهش می دهد، اما رشته بلند بدون فاصله همچنان به شکستن خط نیاز دارد. در مسیر گرید هم minmax(0, 1fr) می تواند حداقل خودکار مسیر را کنترل کند. هر کدام در جای خود مفید هستند؛ یکی جای دیگری یا جای قانون شکستن متن را نمی گیرد.

برای تشخیص علت بیرون زدن محتوا، آموزش مدیریت سرریز و درس مدل جعبه CSS را مرور کنید. overflow: hidden روی کل صفحه ممکن است نشانه مشکل را پنهان کند و بخشی از محتوا را از دسترس خارج کند. اول عنصر بزرگ تر از والد و علت اندازه آن را پیدا کنید.

اشتباه رایج؛ جابه جایی دیداری به جای ترتیب درست

order در فلکس و جای گذاری صریح در گرید، ترتیب HTML را بازنویسی نمی کنند. کاربر صفحه کلید معمولا لینک ها را بر اساس ترتیب سند دنبال می کند. اگر ترتیب دیداری را بدون توجه به ساختار تغییر دهید، فوکوس ممکن است بین نقاط دور صفحه بپرد. ابتدا HTML را منطقی بنویسید؛ سپس چیدمان را با همان مسیر هماهنگ کنید.

در پروژه از order، reverse و tabindex مثبت استفاده نکرده ایم. با Tab مسیر لینک های منو، نمونه ها و کارت ها را بررسی کنید. خط دور فوکوس باید مشخص باشد؛ درس focus-visible روش نمایش این نشانه را توضیح می دهد. هر دو ابزار چیدمان به تصمیم درست شما درباره ترتیب و دسترس پذیری نیاز دارند.

سه پرسش قبل از انتخاب روش چیدمان

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

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

تمرین مستقل و پاسخ درس 38

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

.exercise {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.exercise .tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

در style.css اصلی، display: grid و gap برای exercise از قبل وجود دارد؛ پاسخ فقط الگوی ستون را تغییر می دهد و ابزارهای داخلی را فلکس می کند. فایل solution.css همین پاسخ را دارد و از ابتدا فعال نیست. برای مقایسه، خط زیر را پس از style.css در head اضافه کنید.

<link rel="stylesheet" href="solution.css">

آزمایش را در عرض های 320، 600، 601 و 1000 پیکسل انجام دهید. در عرض زیاد، دو کارت آخر نمونه فلکس باید با قواعد این پروژه بزرگ تر شوند و گرید ستون های مشترک خود را حفظ کند. در عرض کم، هیچ متن یا لینک ضروری نباید از صفحه بیرون بزند. سپس پنج کارت را به شش کارت تبدیل کنید و دلیل تغییر ردیف آخر را توضیح دهید.

پرسش های متداول

آیا Grid همیشه از Flexbox بهتر است؟

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

آیا Flexbox فقط یک ردیف می سازد؟

خیر؛ با flex-wrap می تواند چندخطی شود، اما فضای هر خط را مستقل تقسیم می کند.

چرا دو کارت آخر در نمونه فلکس عریض تر هستند؟

در این پروژه grow برابر 1 است و کارت های هر خط فضای آزاد همان خط را می گیرند. تغییر قواعد اندازه گذاری می تواند نتیجه را عوض کند.

آیا یک کارت می تواند هم آیتم Grid و هم والد Flex باشد؟

بله؛ شبکه بیرونی جای کارت را کنترل می کند و فلکس داخلی رابطه اجزای کارت را.

فایل ZIP پاسخ تمرین هم دارد؟

بله؛ HTML، CSS اصلی، solution.css و راهنمای اجرای آفلاین همراه هم هستند.

دانلود پروژه مقایسه، پروژه ترکیبی و پاسخ تمرین درس 38

منابع فنی برای مطالعه بیشتر: مشخصات رسمی Flexbox و مشخصات رسمی CSS Grid. برای مرور عملی، قواعد هر نمونه را جدا تغییر دهید و نتیجه را با رابطه مورد انتظار اجزا مقایسه کنید.