جریان آیتم

دو هفته پیش، جن سیمونز از تیم Webkit مقاله ای در مورد یک ماژول طرح بندی جدید به نام Item Flow به اشتراک گذاشت. ایده این است که آنها را متحد کنیم flex-flow و grid-auto-flow در یک سیستم واحد این زمان باعث می شود که سنگ تراشی CSS در سینتکس جدید ادغام شود.

در اکتبر 2024، من نظرات خود را در مورد اینکه آیا سنگ تراشی به عنوان بخشی از شبکه CSS یا به عنوان یک نحو جدید مستقل (display: masonry).

Element Flow در حال حاضر توسط کارگروه CSS مورد بحث قرار گرفته است. هدف این مقاله این است که یادداشت های خود را در حین بررسی نحو جدید به اشتراک بگذارم.

ابتدا اجازه دهید به شما ایده بدهم که سیتناک جدید چگونه سنگ تراشی را به ما می دهد. سعی کنید مقادیر زیر را تغییر دهید و ببینید CSS چگونه تغییر می کند.

.layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
  }

به نظر شما کدام سیتنکس بهتر است؟

منحنی یادگیری حداقل است

اگرچه یک پیشنهاد جدید است، اما به خوبی با نحو فعلی وب و فلکس باکس ادغام می شود. اگر به آنچه قبلاً پیشنهاد شده بود نگاه کنید display: masonry نحو، در نگاه اول واضح است که منحنی یادگیری خوبی وجود دارد، حتی اگر یک متخصص CSS باشید.

.layout {
  display: masonry;
  masonry-template-tracks: repeat(auto-fit, minmax(180px, 1fr));
  masonry-direction: column;
  gap: 1rem;
}

در حالی که برای Item Flow، احساس راحتی می‌کند. حتی بهتر از آن، رفتن از یک شبکه معمولی به یک آجر نیاز به تغییر دارد item-flow دارایی

در اینجا یک مثال است که به سبک سنگ تراشی تغییر می کند اگر 10 عنصر یا بیشتر در شبکه وجود دارد.

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.layout:has(.card:nth-last-child(n + 10)) {
  item-flow: row collapse;
}

اگر display: masonry استفاده می شود، کد شبیه به این خواهد بود. من طرفدار نیستم

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.layout:has(.card:nth-last-child(n + 10)) {
  display: masonry;
  masonry-template-tracks: repeat(auto-fit, minmax(180px, 1fr));
  masonry-direction: column;
}

که احساس بهتری دارد، تغییر یک ویژگی CSS (item-flow) یا یک نوع نمایشگر کاملاً جدید؟

بسته بندی فلکس باکس

متراکم

یکی از نکات مورد بحث استفاده از بسته بندی فلکس باکس است. در شبکه CSS می توانیم اعمال کنیم grid-auto-flow: dense که به مرورگر اجازه می‌دهد تا عناصر را در جایی که مناسب می‌داند، مرتب کند.

در مثال زیر یک شبکه CSS داریم. زمانی که dense اعمال می شود، آیتم ها برای پر کردن فضای اضافی منتقل می شوند.

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: dense;
}

شایان ذکر است که استفاده از متراکم باعث تغییر ترتیب عناصر می شود. این گیج کننده است و می تواند 11 مشکل ایجاد کند، اما این روش کار می کند.

با جریان آیتم، پیشنهادی برای پورت آن به Flexbox وجود دارد. برای رسیدن به این هدف، باید از آن استفاده کنیم item-pack.

با توجه به تصاویر Webkit، معرفی wrapping در یک flowbox می تواند یکی از دو گزینه باشد:

• گزینه 1: عناصر را کمی کوچک کنید تا عناصر بیشتری را در خود جای دهید
• گزینه 2: عناصر را مانند یک شبکه متراکم در CSS حرکت دهید

در شکل زیر، مرورگر عنصر انعطاف پذیر را فقط کمی کوچک می کند تا فضای بیشتری را برای موارد کوچکتر ایجاد کند.

در مثال زیر، فهرستی از برچسب ها را تصور کردم که در آن هر تگ محتوای خود را با پدهایی در سمت چپ و راست در آغوش می گیرد.

• اول، گزینه پیش فرض وجود دارد که از Flexbox با گپ و بسته بندی فعال استفاده می کند.
• بسته بندی فلکس باکس محکم: اقلام را فقط کمی کوچک کنید تا جا برای یک مورد دیگر باز شود. در این مثال، “ترکی” است.
• بسته بندی فشرده مانند یک شبکه CSS: عناصر کوچکتر را در اطراف مرتب می کند تا به خوبی از فضا استفاده کند.

من 100٪ مطمئن نیستم که آیا این را دوست دارم یا نه، زیرا مورد بالا باعث نمی شود آن را برای من کلیک کنم. شاید این مفهوم بتواند برای استفاده دیگری مفید باشد.

تعادل

پس از مطالعه مقاله در وب کیت، پیشنهادی برای item-pack: balanceبه طور خلاصه، عناصر انعطاف پذیر را متعادل می کند و سعی می کند کاری شبیه به این انجام دهد text-wrap: balance، اما برای عناصر انعطاف پذیر.

جالب به نظر می رسد.

استفاده از Nowrap برای شبکه

من افکار دیگری در این مورد دارم. چرا ما به آن نیاز داریم nowrap در شبکه؟ به طور پیش فرض، شبکه، به جز در یک مورد. هنگام استفاده grid-auto-flow: column، اینطور نیست.

در اینجا یک مثال است که در آن برخی از اقلام را در یک ظرف کوچک قرار می دهم.

.layout {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
}

در پست Webkit کد پیشنهادی به شرح زیر است:

.container {
  display: grid;
  grid-auto-columns: 1fr;
  item-wrap: nowrap;
}

..که باید به هر عنصر فضای مساوی بدون پیچیدن بدهد. حتی اگر این کار کند، من کاملاً مطمئن نیستم که مشکل (یا مورد استفاده) حل می شود.

شما چه فکر می کنید

چند نمونه از جریان آیتم

فکر می‌کنم ایده خوبی است که از جریان عنصر در برخی از CSSهای رایجی که در برخی پروژه‌ها می‌نویسیم استفاده کنیم.

یک عنصر انعطاف پذیر، یک ظرف انعطاف پذیر، با تراز کننده ها

من سعی می کنم تصور کنم که نحو جدید در طبیعت چگونه خواهد بود. در اینجا، من یک ظرف فلکس باکس دارم. موارد زیر را ببینید:

.layout {
  flex: 1;
  align-self: start;
  display: flex;
  align-items: center;
  item-wrap: wrap;
  item-pack: balance;
}

مطمئن نیستم items در مقابل item. چرا جمع در داریم align-items اما نه در item-packمثلا؟ اگرچه هر دو عناصر فرزند flexbox را هدف قرار می دهند.

عنصر یتیم را در یک شبکه قرار دهید

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

در اینجا یک نمونه CSS وجود دارد:

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  item-wrap: balance;
  gap: 1rem;
}

شکل زیر را برای مشاهده قبل و بعد از آن ببینید:

Wrap detect یا چیزی؟

من از طرفداران بزرگ کشف پوسته هستم. من در این مورد در سال 2023 نوشتم. فقط تصور کنید که آیا این نحو جدید می تواند این یا چیزی را در اطراف آن اجازه دهد.

.list {
  display: flex;
 item-wrap: wrap;

 @container wrap-state(wrap) {
 // do something
 }
}

فقط یه فکر

سوالات در مورد Webkit

پاسخ من به سوالات مطرح شده در پایان مقاله Webkit.

آیا ترکیب جریان انعطاف پذیر و جریان خودکار شبکه در یک سیستم واحد ایده خوبی است؟

بله به نظر من خوب است.

به عنوان یک توسعه دهنده، آیا از نحو جدید برای دستیابی به کارهایی که امروز با جریان flex-flow و grid-auto-flow انجام می دهید استفاده می کنید؟

استفاده من از کوتاه نویسی flex-flow و در grid-auto-flow نادر است. با این حال، در صورت نیاز از نحو جدید استفاده خواهم کرد.

چه ایده های دیگری برای ترکیب عملکرد Flexbox و Grid موجود در یک سیستم واحد دارید؟

شاید در نظر داشته باشید که یک مرز بین عناصر (هم در flexbox و هم در grid) اضافه کنید.

آیا در مورد امکان افزودن قابلیت های جدید به Grid و Flexbox هیجان زده اید؟ کدام یک بیشترین پتانسیل را برای کمک به شما در انجام کار و باز کردن طرح های جدید دارند؟

من در مورد چند چیز هیجان زده هستم:

• سنگ تراشی (البته!)
• بسته بندی محکم در فلکس باکس
• بسته بندی متعادل در فلکس باکس

چه ایده های جدید دیگری را می خواهید به این سیستم یکپارچه اضافه کنید؟

تشخیص بسته بندی فلکس باکس

نتیجه گیری

فکر کردم بهتر است نظراتم را در یک پست وبلاگ به اشتراک بگذارم. خوشحالم که این کار را کردم و امیدوارم این نحو جدید بیشتر مورد توجه قرار گیرد. این عالی است!