رپ بتلینگ (یا بتل رپ) نوعی اجرای رپ است که در آن دو یا چند خواننده رپ علیه یکدیگر آواز می‌خوانند (به طور کلی شامل برخی توهین‌ها/حمله‌ها). کمیک امروز با همفون های Rap و Wrap بازی می کند تا یک شوخی احمقانه با Flexbox و flex-wrap ویژگی.
یک ظرف انعطاف پذیر به طور پیش فرض محتوا را در یک خط قرار می دهد. ممکن است خوب باشد، اما اگر اندازه اقلام بیشتر از ظرف باشد، فشرده می شوند یا سرریز می شوند. بنابراین در عوض، ممکن است بخواهیم محتوا را در چندین خط قرار دهیم. اینجاست که flex-wrap وارد عمل می شود.
این ویژگی مشخص می کند که ظرف فلکس تک خطی یا چند خطی باشد (بسته به مقدار و اندازه اقلام فلکس)، و در مورد چند خطی، نحوه چیدمان اقلام پس از بسته بندی را مشخص می کند.
flex-wrap دارای سه مقدار اصلی است:
nowrap: موارد بسته بندی نمی شوند. در عوض، آنها اندازه خود را تنظیم می کنند و یا والد را سرریز می کنند. (این مقدار پیش فرض است.)wrap: اقلام به جای سرریز شدن ظرف فلکس بسته می شوند. آنها از شروع متقاطع تا پایان متقاطع روی هم قرار می گیرند.wrap-reverse: اقلام به جای سرریز شدن ظرف فلکس بسته می شوند. آنها از cross-end تا cross-start روی هم قرار می گیرند.
قسمت شروع متقاطع و کراس پایان ممکن است پیچیده به نظر برسد، اما ساده تر از آن چیزی است که به نظر می رسد. این به جهت انعطاف بستگی دارد: اگر جهت افقی (“ردیف”) باشد، عناصر پیچیده شده به صورت عمودی (در ردیف) قرار می گیرند. و اگر جهت عمودی باشد (“ستون”)، عناصر پیچیده شده به صورت افقی (در ستون ها) روی هم قرار می گیرند.
بیایید یک مثال را با یک ظرف انعطاف پذیر با 5 مورد با عرض تعریف شده بررسی کنیم. به طور پیش فرض، مقدار flex-wrap “nowrap” است، بنابراین آیتم های انعطاف پذیر ظرف را سرریز می کنند (من آن را به عنوان یک تصویر قرار دادم تا از سرریز افقی آزاردهنده ای که ایجاد می کند جلوگیری کنم):
حال، اگر کد را تغییر دهیم تا مقدار “wrap” را برای آن تعیین کنیم flex-wrap، هنگامی که اقلام انعطاف پذیر از ظرف سرریز می شوند، به جای آن در یک ردیف جدید قرار می گیرند:
اما اگر تنظیم کنیم flex-wrap به “پیچیدن- معکوس”، سپس جهت پیچیدن برعکس است: به جای وارد شدن به یک ردیف جدید، عناصر پیچیده شده فشار دادن بقیه در یک ردیف جدید
آخرین نمونه با flex-direction روی “ستون” تنظیم کنید. در این مورد، عناصر به صورت عمودی در ستون‌ها سازماندهی می‌شوند، بنابراین وقتی آنها را می‌پیچند، آن را به جای ردیف‌ها در ستون‌ها انجام می‌دهند:
امیدوارم این مثال ها مفید بوده باشد و از کمیک امروز لذت برده باشید. بیشتر بدانید flex-wrap در منابع زیر:
