کرومیوم شکاف Flexbox را به ارمغان می آورد

ویژگی gap CSS برای موتورهای چیدمان چند ستونی و CSS Flexbox کرومیوم اینجا است.

Adam Argyle

David Grogan

شکاف CSS

اصطلاح کلیدی: gap ، فاصله بین بچه‌هاست . شاید اسم این نوع فاصله را «ناودان» یا «کوچه» شنیده باشید. این فاصله فقط جایی است که لبه‌های جعبه بچه‌ها به هم می‌رسند.

gap نسبی است، به این معنی که به صورت پویا بر اساس جهت جریان محتوا تغییر می‌کند. به عنوان مثال، gap به طور خودکار برای مقادیر مختلف writing-mode یا direction که برای کاربران بین‌المللی خود تعیین می‌کنید، تنظیم می‌شود. این امر به طور قابل توجهی بار چالش‌های فاصله‌گذاری را برای کامپوننت و نویسنده CSS کاهش می‌دهد. مقیاس‌بندی کد کمتر می‌شود.

گپ پشتیبانی از محلی‌سازی را نشان می‌دهد، زیرا تغییرات در جهت و حالت نوشتاری را مدیریت می‌کند: Codepen | توییت

سازگاری با مرورگرها

Browser Support

• 57
• 16
• 52
• 10.1

Source

کاربرد

gap هر طول یا درصد CSS را به عنوان مقدار می‌پذیرد.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

می‌توان به فاصله ۱ طول پاس داد که هم برای سطر و هم برای ستون استفاده خواهد شد.

تندنویسی

.grid {
  display: grid;
  gap: 10px;
}

هر دو ردیف و ستون را به طور همزمان تنظیم کنید

گسترش یافته

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

شکاف را می‌توان به اندازه ۲ طول عبور داد که برای سطر و ستون استفاده خواهد شد.

تندنویسی

.grid {
  display: grid;
  gap: 10px 5%;
}

هر دو ردیف و ستون را به طور جداگانه و همزمان تنظیم کنید

گسترش یافته

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

gap فلکس‌باکس

قبل از اینکه gap در Flexbox وجود داشته باشد، استراتژی‌ها شامل حاشیه‌های منفی، انتخابگرهای پیچیده، انتخابگرهای شبه کلاس از نوع :last یا :first یا روش‌های دیگری برای مدیریت فضای یک مجموعه از فرزندان که به صورت پویا چیدمان و پوشش داده شده‌اند، بودند.

تلاش‌های قبلی

در ادامه الگوهایی آمده است که افراد برای ایجاد فاصله‌های شبه‌شکاف از آنها استفاده کرده‌اند.

انتخابگرهای شبه کلاس

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

جغد لوبوتومی شده

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

منبع

موارد فوق جایگزین کاملی برای gap نیستند و اغلب برای در نظر گرفتن سناریوهای wrapping، حالت‌های نوشتاری یا جهت، به تنظیمات @media یا :lang() نیاز دارند. اضافه کردن یک یا دو media query چندان بد به نظر نمی‌رسد، اما می‌توانند جمع شوند و منجر به منطق طرح‌بندی پیچیده شوند.

چیزی که نویسنده‌ی مطلب بالا واقعاً در نظر داشته این بوده که هیچ‌کدام از آیتم‌های فرزند لمس نشوند.

پادزهر: شکاف

.layout {
  display: flex;
  gap: 10px;
}

توجه: مالکیت فاصله‌گذاری از فرزند به والد منتقل می‌شود.

در دو مثال اول (بدون gap Flexbox)، عناصر فرزند هدف قرار می‌گیرند و فاصله‌ای از سایر عناصر به آنها اختصاص داده می‌شود. در مثال فاصله پادزهر، کانتینر مالک فاصله‌گذاری است. هر فرزند می‌تواند بار خود را از دوش بردارد، در حالی که مالکیت فاصله‌گذاری را نیز متمرکز می‌کند. ساده‌سازی سازگاری. مرتب‌سازی مجدد، تغییر نماها، حذف عناصر، افزودن عناصر جدید و غیره و فاصله‌گذاری ثابت می‌ماند. بدون انتخابگر جدید، بدون پرس‌وجوی رسانه‌ای جدید، فقط فاصله.

به‌روزرسانی‌های ابزارهای توسعه کرومیوم

با این به‌روزرسانی‌ها، تغییراتی در Chromium DevTools ایجاد می‌شود، توجه کنید که چگونه پنل Styles اکنون grid-gap و gap را مدیریت می‌کند 👍

Devtools هم grid-gap و gap را نشان می‌دهد، که gap زیر grid-gap استفاده شده تا به آبشار اجازه دهد از جدیدترین سینتکس استفاده کند.

DevTools از هر دو grid-gap و gap پشتیبانی می‌کند، زیرا gap اساساً نام مستعاری برای سینتکس‌های قبلی است.

پتانسیل طرح‌بندی جدید

با Flexbox gap ، ما چیزی بیش از راحتی را آزاد می‌کنیم. ما طرح‌بندی‌های قدرتمند، کاملاً فاصله‌دار و ذاتی را آزاد می‌کنیم. در ویدیو و نمونه کد زیر، Grid نمی‌تواند به طرح‌بندی‌ای که Flexbox می‌تواند، دست یابد. Grid باید ردیف‌ها و ستون‌های مساوی داشته باشد، حتی اگر ذاتاً به آن اختصاص داده شده باشند.

توییت

همچنین، توجه کنید که فاصله بین فرزندان وقتی ذاتاً به این شکل بسته‌بندی می‌شوند چقدر پویا است. کوئری‌های رسانه‌ای نمی‌توانند این نوع بسته‌بندی را تشخیص دهند تا تنظیمات هوشمندی انجام دهند. Flexbox gap می‌تواند و این کار را برای شما در تمام بین‌المللی‌سازی‌ها انجام خواهد داد.

gap چند ستونی

علاوه بر اینکه Flexbox از ساختار gap (gap syntax) پشتیبانی می‌کند، طرح‌بندی‌های چند ستونی نیز از ساختار gap کوتاه‌تر پشتیبانی می‌کنند.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

خیلی باحاله.