وقتی عرض مجموع آیتم‌ها از ظرف بیشتر می‌شه، فلکس به‌صورت پیش‌فرض سعی می‌کنه اون‌ها رو در یک ردیف نگه داره. این رفتار می‌تونه باعث جمع‌شدن آیتم‌ها بشه. flex-wrap:wrap اجازه می‌ده آیتم‌های اضافی به ردیف بعد برن. برای اینکه اندازه کارت‌های این تمرین قابل پیش‌بینی باشه، با flex:0 0 مقدار ثابت، رشد و جمع‌شدنشون رو هم متوقف می‌کنیم.
مثال، چهار خانه کوتاه رو توی ظرف دویست پیکسلی می‌چینه. هدف تمرین هم مدیریت کمبود فضای واقعی در همین اندازه است؛ اندازه‌های مختلف صفحه در ارزیابی این فعالیت بررسی نمی‌شن. خطای رایج افزودن br بین آیتم‌های فلکس برای شروع ردیف جدیده. این کار تصمیم چیدمان رو به ساختار محتوا گره می‌زنه و با تغییر تعداد آیتم‌ها شکننده می‌شه. wrap این تصمیم رو با توجه به فضای در دسترس می‌گیره. فاصله ردیف‌ها و ستون‌ها رو هم با gap نگه دار تا ردیف دوم به ردیف اول نچسبه.
✍️ مثال حل‌شده:
<div class="mini"><span>الف</span><span>ب</span><span>ج</span><span>د</span></div>
<style>.mini { display:flex; width:200px; flex-wrap:wrap; gap:8px; } .mini span { flex:0 0 90px; }</style>
حالا نوبت توئه: ظرف .wrap-list با عرض ۲۶۰ پیکسل باید display:flex، flex-wrap:wrap و gap:10px داشته باشد. هر چهار .tile باید flex:0 0 120px بگیرند؛ پس دو کارت در هر ردیف جا می‌شود. تعداد کارت‌ها را نگه دار و برای شکستن ردیف، br یا ظرف اضافه نکن.
فعالیت شما
ظرف .wrap-list با عرض ۲۶۰ پیکسل باید display:flex، flex-wrap:wrap و gap:10px داشته باشد. هر چهار .tile باید flex:0 0 120px بگیرند؛ پس دو کارت در هر ردیف جا می‌شود. تعداد کارت‌ها را نگه دار و برای شکستن ردیف، br یا ظرف اضافه نکن.