gap فاصله بین آیتم‌ها رو به ظرف واگذار می‌کنه. این روش نسبت به margin روی هر فرزند، بیان روشن‌تری برای فاصله‌های یکنواخت داره؛ لازم نیست آخرین آیتم رو با انتخابگر ویژه از حاشیه اضافه نجات بدی. فاصله ایجادشده بین آیتم‌هاست و خودبه‌خود دور لبه بیرونی ظرف padding نمی‌سازه. برای فاصله از لبه باید جدا تصمیم بگیری.
مثال دو برچسب با فاصله هشت پیکسلی رو نشون می‌ده. توی تمرین سه نام مهارت داریم و می‌خواهیم فاصله دوازده پیکسلی بین هر دو همسایه باشه. خطای رایج نوشتن gap روی خود فرزندهاست؛ همون‌طور که display:flex روی والد قرار می‌گیره، فاصله گروه هم روی همون والد تنظیم می‌شه. مقدار column-gap که مرورگر گزارش می‌کنه، بخش افقی همین فاصله رو نشون می‌ده. عرض ظرف در این نمونه مشخصه و برچسب‌ها کوتاهن، پس به جای نگرانی درباره شکستن خط، روی محل درست قانون و مقدار دقیق تمرکز کن.
✍️ مثال حل‌شده:
<div class="labels"><span>خبر</span><span>آموزش</span></div>
<style>.labels { display:flex; gap:8px; }</style>
حالا نوبت توئه: ظرف .tags را با display:flex، flex-direction:row و gap:12px بساز و عرض موجود ۳۶۰ پیکسل را نگه دار. سه span مهارت باید باقی بمانند. فاصله را روی والد تنظیم کن؛ افزودن فاصله متنی داخل نام‌ها یا margin جایگزین gap نباشد.
فعالیت شما
ظرف .tags را با display:flex، flex-direction:row و gap:12px بساز و عرض موجود ۳۶۰ پیکسل را نگه دار. سه span مهارت باید باقی بمانند. فاصله را روی والد تنظیم کن؛ افزودن فاصله متنی داخل نام‌ها یا margin جایگزین gap نباشد.