‏چیدمان متعادل فلکس‌باکس با flex-wrap: balance

تو فلکس‌باکس وقتی flex-wrap فعاله، خیلی وقت‌ها آخرین آیتم تنها می‌ره خط بعد و چیدمان نامتوازن به نظر می‌رسه. احمد شادید می‌گه واکنش معمول طراح‌ها و توسعه‌دهنده‌ها اینه که یه media query بذارن تا این حالت پیش نیاد، ولی این وصله با کوچک‌ترین تغییر محتوا می‌شکنه. حالا کروم ۱۵۰ مقدار تازهٔ balance رو برای flex-wrap فرستاده که همین کارو خودکار انجام می‌ده.

استفاده‌ش هم به همین سادگیه؛ کافیه مقدار wrap رو با balance عوض کنید:

.channels {
  display: flex;
  flex-wrap: balance;
  justify-content: center;
  gap: 1rem;
}

چون این ویژگی فعلاً فقط تو کرومه، نویسنده اول چهار جایگزین رو روی یه نمونهٔ واقعی تست کرده: بخش شبکه‌های اجتماعی سایت Buffer که به‌خاطر justify-content: space-between موقع باریک‌شدن صفحه دو آیکون رو با فاصلهٔ زیاد کنار هم می‌ذاره. راه‌حل‌هاش container query با max-width ثابت، همون ایده با conditional clamp، تقسیم آیتم‌ها به دو گروه و تخت‌کردنشون با display: contents، و آخری یه شبه‌المان با order بود که خودش می‌گه خوب جواب نداد. همهٔ این‌ها به دونستن اندازهٔ آیتم، gap و تعداد کل نیاز دارن.

ویژگی دومی که نویسنده حین تحقیق پیدا کرده flex-line-count هست، یعنی می‌تونید حداقل تعداد خط‌های چیدمان رو تعیین کنید؛ حتی اگه فضا برای یه خط کافی باشه، آیتم‌ها به دو خط شکسته می‌شن. ترکیبش با flex-direction: column و تابع round() چیزی شبیه چیدمان masonry (یعنی همون ستون‌های آجری با ارتفاع نامساوی) می‌سازه که تعداد ستون‌هاش با عرض کانتینر عوض می‌شه:

.layout {
  --line-min: 190px;
  --line-count: clamp(1, round(down, 100cqw / var(--line-min)), 4);
  display: flex;
  flex-direction: column;
  flex-wrap: balance;
  flex-line-count: var(--line-count);
}

شادید خودش تأکید می‌کنه اون دموی masonry فقط یه آزمایشه و ترتیب خوندن محتوا با ترتیب دیداریش یکی نیست، پس برای دسترس‌پذیری حواستون باشه. تا وقتی بقیهٔ مرورگرها این دو ویژگی رو پیاده کنن، همون راه‌حل‌های container query هنوز لازمن.

نکات کلیدی:

• مقدار balance برای flex-wrap تو کروم ۱۵۰ عرضه شده و آیتم‌ها رو بدون media query بین خط‌ها پخش می‌کنه.
• ویژگی flex-line-count حداقل تعداد خط‌ها رو تعیین می‌کنه؛ مثلاً مقدار ۲ آیتم‌ها رو حتی تو فضای کافی به دو خط می‌بره.
• ترکیب flex-direction: column با تابع round() و واحد 100cqw یه masonry واکنش‌گرا می‌سازه.
• راه‌حل‌های جایگزین (container query، conditional clamp، display: contents) به دونستن اندازهٔ آیتم، gap و تعداد کل نیاز دارن.
• تو دموی masonry ترتیب خوندن محتوا با ترتیب دیداری یکی نیست.