[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t3-s04-flex-grow":3,"course:taropood":59},{"meta":4,"prev":11,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,4,"t3-s04-flex-grow","book",3,"فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},5,"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",[19,23,26,31,34,37,40,43,46,49,52,56],{"kind":20,"heading":21,"html":22},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا هر کارت اندازهٔ خودش را داشت و فضای اضافهٔ ردیف خالی می‌ماند. این فصل به کارت‌ها یاد می‌دهی \u003Cstrong>انعطاف\u003C\u002Fstrong> داشته باشند — همان چیزی که اسمِ \u003Ccode>flexbox\u003C\u002Fcode> از آن می‌آید. یاد می‌گیری چطور آیتم‌ها فضای خالی را پُر کنند، وقتی جا کم شد جمع شوند، و مهم‌تر از همه، وقتی دیگر جا نبود به‌جای اینکه از جعبه بیرون بزنند، به خطِ بعد بروند. آخرِ فصل یک شبکهٔ کارتِ \u003Cstrong>واقعی\u003C\u002Fstrong> داری که خودش با پهنای صفحه ور می‌رود: کارت‌ها کش می‌آیند تا جا پُر شود و وقتی تنگ شد، تمیز به خطِ پایین می‌ریزند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-flex-grow.55051de2a0.160.webp 160w, \u002F_img\u002F01-image-flex-grow.55051de2a0.320.webp 320w, \u002F_img\u002F01-image-flex-grow.55051de2a0.640.webp 640w, \u002F_img\u002F01-image-flex-grow.55051de2a0.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-flex-grow.55051de2a0.1280.jpg\" srcset=\"\u002F_img\u002F01-image-flex-grow.55051de2a0.160.jpg 160w, \u002F_img\u002F01-image-flex-grow.55051de2a0.320.jpg 320w, \u002F_img\u002F01-image-flex-grow.55051de2a0.640.jpg 640w, \u002F_img\u002F01-image-flex-grow.55051de2a0.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرح‌وارهٔ flex-grow: یک ردیف که فضای خالیِ آخرش به‌صورتِ سهم‌های برابر بینِ کارت‌ها پخش می‌شود و کارت‌ها کش می‌آیند تا کلِ عرض پُر شود\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>flex-basis\u003C\u002Fcode> اندازهٔ شروعِ هر آیتم را روی main axis تعیین کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>flex-grow\u003C\u002Fcode> آیتم‌ها را وادار کنی فضای خالی را پُر کنند و سهمشان را کنترل کنی\u003C\u002Fli>\n\u003Cli>بگویی \u003Ccode>flex-shrink\u003C\u002Fcode> کِی و چطور آیتم‌ها را جمع می‌کند\u003C\u002Fli>\n\u003Cli>هر سه را با shorthandِ \u003Ccode>flex\u003C\u002Fcode> در یک خط بنویسی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>flex-wrap\u003C\u002Fcode> کاری کنی آیتم‌ها به‌جای بیرون‌زدن از جعبه، به خطِ بعد بروند\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>display: flex\u003C\u002Fcode>، \u003Ccode>main axis\u003C\u002Fcode> و \u003Ccode>gap\u003C\u002Fcode> — انعطاف در امتدادِ همان main axis اتفاق می‌افتد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> \u003Ccode>justify-content\u003C\u002Fcode> فضای خالی را جابه‌جا می‌کرد؛ اینجا با \u003Ccode>flex-grow\u003C\u002Fcode> فضای خالی را \u003Cstrong>پُر\u003C\u002Fstrong> می‌کنیم — دو کارِ متفاوت.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۴:\u003C\u002Fstrong> \u003Ccode>box-sizing: border-box\u003C\u002Fcode> تا اندازه‌ها بی‌سورپرایز بمانند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— چند کارت در یک ردیف می‌بینی که فضای اضافهٔ کنارشان خالی مانده. کارِ این فصل این است که اول آن‌ها را وادار کنی فضا را پُر کنند، بعد آن‌قدر کارت اضافه کنی که مجبور شوند به خطِ بعد بریزند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-3-layout\u002Fsession-04-flex-grow",{"kind":20,"heading":32,"html":33},"۱. flex-basis: اندازهٔ شروع","\u003Ch2 id=\"۱-flex-basis-اندازهٔ-شروع\">۱. \u003Ccode>flex-basis\u003C\u002Fcode>: اندازهٔ شروع\u003Ca class=\"head-anchor\" href=\"#%DB%B1-flex-basis-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87%D9%94-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر flex item یک \u003Cstrong>اندازهٔ شروع\u003C\u002Fstrong> روی main axis دارد، قبل از اینکه کش بیاید یا جمع شود. اسمِ این اندازه \u003Ccode>flex-basis\u003C\u002Fcode> است. بیا سه کارت بسازیم و به هرکدام یک basisِ ۲۰۰ پیکسلی بدهیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="cards">\n  <div class="card">۱<\u002Fdiv>\n  <div class="card">۲<\u002Fdiv>\n  <div class="card">۳<\u002Fdiv>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  gap: 16px;\n  padding: 16px;\n}\n\n.card {\n  flex-basis: 200px;\n  padding: 24px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  font-size: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> سه کارت می‌بینی که هرکدام ۲۰۰ پیکسل پهن‌اند و کنارِ هم نشسته‌اند، ولی سمتِ چپِ ردیف یک فضای خالیِ بزرگ مانده. چرا پُرش نمی‌کنند؟ چون \u003Ccode>flex-basis\u003C\u002Fcode> فقط \u003Cstrong>اندازهٔ شروع\u003C\u002Fstrong> است؛ به کارت‌ها نگفتیم که رشد کنند. آن کار، دستورِ بعدی است.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. flex-grow: فضای خالی را پُر کن","\u003Ch2 id=\"۲-flex-grow-فضای-خالی-را-پُر-کن\">۲. \u003Ccode>flex-grow\u003C\u002Fcode>: فضای خالی را پُر کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-flex-grow-%D9%81%D8%B6%D8%A7%DB%8C-%D8%AE%D8%A7%D9%84%DB%8C-%D8%B1%D8%A7-%D9%BE%D9%8F%D8%B1-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>flex-grow\u003C\u002Fcode> به یک آیتم می‌گوید «از فضای خالیِ باقی‌مانده سهم بردار و کش بیا». مقدارش یک عدد است: \u003Ccode>0\u003C\u002Fcode> یعنی «رشد نکن» (پیش‌فرض)، و هر عددِ بزرگ‌ترْ یعنی «سهم بردار». به همهٔ کارت‌ها \u003Ccode>flex-grow: 1\u003C\u002Fcode> بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  flex-basis: 200px;\n  flex-grow: 1;\n  padding: 24px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  font-size: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا کارت‌ها کش آمدند و کلِ عرضِ ردیف را پُر کردند، بدونِ فضای خالی. چون هر سه \u003Ccode>flex-grow: 1\u003C\u002Fcode> گرفتند، فضای اضافه به سهمِ برابر بینشان پخش شد و هر سه هم‌عرض شدند.\u003C\u002Fp>\n\u003Cp>حالا بیا یکی را پهن‌تر کنیم. به کارتِ وسط یک کلاسِ دوم بده که سهمش دو برابر باشد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="cards">\n  <div class="card">۱<\u002Fdiv>\n  <div class="card wide">۲<\u002Fdiv>\n  <div class="card">۳<\u002Fdiv>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.wide {\n  flex-grow: 2;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کارتِ وسط پهن‌تر از دوتای دیگر شد. \u003Ccode>flex-grow\u003C\u002Fcode> نسبت است، نه اندازهٔ ثابت: کارتِ وسط با \u003Ccode>2\u003C\u002Fcode> از فضای خالی \u003Cstrong>دو برابرِ\u003C\u002Fstrong> هر کارتِ \u003Ccode>1\u003C\u002Fcode> سهم برد. عددها را عوض کن — \u003Ccode>3\u003C\u002Fcode>، بعد \u003Ccode>5\u003C\u002Fcode> — و ببین هرچه بزرگ‌تر، سهمِ بیشتر. این تفاوتش با \u003Ccode>justify-content\u003C\u002Fcode> است: آنجا فضای خالی را \u003Cstrong>جابه‌جا\u003C\u002Fstrong> می‌کردیم؛ اینجا فضای خالی را بینِ آیتم‌ها \u003Cstrong>پخش و پُر\u003C\u002Fstrong> می‌کنیم.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> اگر دو کارت داشته باشی، یکی \u003Ccode>flex-grow: 1\u003C\u002Fcode> و دیگری \u003Ccode>flex-grow: 3\u003C\u002Fcode>، فضای خالی چطور بینشان تقسیم می‌شود؟ (جواب: چهار سهم می‌شود؛ کارتِ اول یک سهم، کارتِ دوم سه سهم — یعنی دومی سه برابرِ اولی از فضای اضافه برمی‌دارد.)\u003C\u002Fp>\n",{"kind":20,"heading":38,"html":39},"۳. flex-shrink: وقتی جا کم می‌آید","\u003Ch2 id=\"۳-flex-shrink-وقتی-جا-کم-می‌آید\">۳. \u003Ccode>flex-shrink\u003C\u002Fcode>: وقتی جا کم می‌آید\u003Ca class=\"head-anchor\" href=\"#%DB%B3-flex-shrink-%D9%88%D9%82%D8%AA%DB%8C-%D8%AC%D8%A7-%DA%A9%D9%85-%D9%85%DB%8C%E2%80%8C%D8%A2%DB%8C%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>flex-grow\u003C\u002Fcode> برای فضای \u003Cstrong>اضافه\u003C\u002Fstrong> بود. حالت برعکس هم هست: وقتی مجموعِ اندازهٔ کارت‌ها از عرضِ جعبه \u003Cstrong>بیشتر\u003C\u002Fstrong> شود. اینجا \u003Ccode>flex-shrink\u003C\u002Fcode> تصمیم می‌گیرد چقدر جمع شوند. مقدارِ پیش‌فرضش \u003Ccode>1\u003C\u002Fcode> است، یعنی «اگر لازم شد جمع شو تا جا بشوی». برای دیدنش، \u003Ccode>flex-grow\u003C\u002Fcode> را موقتاً بردار و basis را بزرگ کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  flex-basis: 400px;\n  padding: 24px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  font-size: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> سه کارتِ ۴۰۰پیکسلی مجموعاً ۱۲۰۰ پیکسل می‌خواهند، ولی جعبه این‌قدر پهن نیست — با این حال کارت‌ها از جعبه بیرون نزدند، بلکه \u003Cstrong>جمع شدند\u003C\u002Fstrong> تا جا بشوند. این کارِ \u003Ccode>flex-shrink: 1\u003C\u002Fcode>ِ پیش‌فرض است: به آیتم‌ها اجازه می‌دهد کوچک‌تر از basisشان شوند تا در یک خط جا بگیرند. اگر \u003Ccode>flex-shrink: 0\u003C\u002Fcode> بدهی، دیگر جمع نمی‌شوند — و آن وقت از جعبه بیرون می‌زنند، که دقیقاً مشکلِ بخشِ آخرِ همین فصل است.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. shorthandِ flex: هر سه در یک خط","\u003Ch2 id=\"۴-shorthandِ-flex-هر-سه-در-یک-خط\">۴. shorthandِ \u003Ccode>flex\u003C\u002Fcode>: هر سه در یک خط\u003Ca class=\"head-anchor\" href=\"#%DB%B4-shorthand%D9%90-flex-%D9%87%D8%B1-%D8%B3%D9%87-%D8%AF%D8%B1-%DB%8C%DA%A9-%D8%AE%D8%B7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>نوشتنِ سه دستورِ جدا خسته‌کننده است. یک shorthand هست که هر سه را یک‌جا می‌گیرد، به همین ترتیب: \u003Ccode>flex: <grow> <shrink> <basis>\u003C\u002Fcode>. پس این سه خط:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: 200px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>دقیقاً برابر است با این یک خط:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  flex: 1 1 200px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این پرکاربردترین شکلِ \u003Ccode>flex\u003C\u002Fcode> است و آن را زیاد خواهی دید: «رشد کن، جمع شو، و از ۲۰۰ پیکسل شروع کن». یک شکلِ کوتاه‌ترش هم هست: \u003Ccode>flex: 1\u003C\u002Fcode> که برابرِ \u003Ccode>flex: 1 1 0\u003C\u002Fcode> است — یعنی «همه با هم مساوی، بدونِ اهمیت به اندازهٔ محتوا».\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> هر وقت خواستی چند کارت \u003Cstrong>دقیقاً هم‌عرض\u003C\u002Fstrong> شوند، \u003Ccode>flex: 1\u003C\u002Fcode> روی همه‌شان کافی است. هر وقت خواستی هم‌عرض شوند ولی زیرِ یک اندازه کوچک نشوند، \u003Ccode>flex: 1 1 200px\u003C\u002Fcode>. همین دو الگو، نانِ شبِ بیشترِ layout هایت می‌شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. flex-wrap: وقتی دیگر جا نیست (خطای عمدی)","\u003Ch2 id=\"۵-flex-wrap-وقتی-دیگر-جا-نیست-خطای-عمدی\">۵. \u003Ccode>flex-wrap\u003C\u002Fcode>: وقتی دیگر جا نیست (خطای عمدی)\u003Ca class=\"head-anchor\" href=\"#%DB%B5-flex-wrap-%D9%88%D9%82%D8%AA%DB%8C-%D8%AF%DB%8C%DA%AF%D8%B1-%D8%AC%D8%A7-%D9%86%DB%8C%D8%B3%D8%AA-%D8%AE%D8%B7%D8%A7%DB%8C-%D8%B9%D9%85%D8%AF%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا هرچه کارت داشتیم، در یک خط جا می‌شدند. حالا بیا آن‌قدر کارت اضافه کنیم که دیگر جا نشوند و ببینیم چه می‌شود. سه کارتِ دیگر اضافه کن تا بشوند شش‌تا، و به هرکدام یک اندازهٔ ثابت بده که نه رشد کند نه جمع شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="cards">\n  <div class="card">۱<\u002Fdiv>\n  <div class="card">۲<\u002Fdiv>\n  <div class="card">۳<\u002Fdiv>\n  <div class="card">۴<\u002Fdiv>\n  <div class="card">۵<\u002Fdiv>\n  <div class="card">۶<\u002Fdiv>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  flex: 0 0 200px;\n  padding: 24px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  font-size: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>flex: 0 0 200px\u003C\u002Fcode> یعنی «رشد نکن، جمع هم نشو، دقیقاً ۲۰۰ پیکسل بمان». شش کارتِ ۲۰۰پیکسلی مجموعاً ۱۲۰۰ پیکسل به‌علاوهٔ فاصله‌ها می‌خواهند — که از جعبه بزرگ‌تر است. نگاه کن چه شد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> بله، عمدی است. کارت‌ها از لبهٔ جعبه \u003Cstrong>بیرون زده‌اند\u003C\u002Fstrong> و بعضی‌شان نصفه بیرونِ کادرند یا اصلاً دیده نمی‌شوند. دلیلش دو چیز است که با هم دست‌به‌دستِ هم داده‌اند: اول، گفتیم \u003Ccode>flex-shrink: 0\u003C\u002Fcode> پس کارت‌ها حاضر نیستند جمع شوند؛ دوم، و مهم‌تر، \u003Ccode>flexbox\u003C\u002Fcode> به‌طورِ پیش‌فرض \u003Cstrong>همه‌چیز را به زور در یک خط نگه می‌دارد\u003C\u002Fstrong> (به این حالت می‌گویند \u003Ccode>nowrap\u003C\u002Fcode>). وقتی جا کم بیاید و اجازهٔ جمع‌شدن هم نباشد، تنها کاری که از دستش برمی‌آید این است که بگذارد آیتم‌ها بیرون بزنند. راهِ حل این است که به آیتم‌ها اجازهٔ رفتن به خطِ بعد بدهی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>به جعبهٔ والد \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا کارت‌هایی که جا نمی‌شدند، تمیز رفتند به خطِ دوم، به‌جای اینکه از جعبه بیرون بزنند. \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> یعنی «اگر جا کم آمد، خطِ جدید بساز». این تفاوتِ بین یک layoutِ شکسته و یک layoutِ سالم است.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.160.webp 160w, \u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.320.webp 320w, \u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.640.webp 640w, \u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.1280.jpg\" srcset=\"\u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.160.jpg 160w, \u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.320.jpg 320w, \u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.640.jpg 640w, \u002F_img\u002F02-image-nowrap-vs-wrap.8703e1d8e7.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ flex-wrap: در حالتِ nowrap کارت‌ها به زور در یک خط می‌مانند و از لبهٔ جعبه بیرون می‌زنند، در حالتِ wrap همان کارت‌ها به چند خط می‌ریزند و همه داخلِ جعبه می‌مانند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>حالا آخرین قدم: به‌جای اندازهٔ ثابت، از الگوی انعطاف‌پذیر استفاده کن تا کارت‌ها هم به خطِ بعد بریزند و هم فضای هر خط را پُر کنند. \u003Ccode>flex\u003C\u002Fcode> را به \u003Ccode>1 1 200px\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  flex: 1 1 200px;\n  padding: 24px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  font-size: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> این همان شبکهٔ واقعی است. کارت‌ها هرکدام از ۲۰۰ پیکسل شروع می‌کنند، کش می‌آیند تا عرضِ هر خط پُر شود، و وقتی جا کم شد به خطِ بعد می‌ریزند. حالا پنجرهٔ پیش‌نمایش را باریک و پهن کن (یا در آزمایشگاه اندازهٔ پنجره را عوض کن) و ببین تعدادِ کارت‌های هر خط خودش کم‌وزیاد می‌شود. این اولین باری است که یک layout ساختی که با اندازهٔ صفحه \u003Cstrong>ور می‌رود\u003C\u002Fstrong> — و همهٔ این کار را \u003Ccode>flexbox\u003C\u002Fcode> تنهایی و بدونِ یک خط اضافه انجام داد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیارِ AI ات بپرس «تفاوتِ \u003Ccode>flex-basis\u003C\u002Fcode> با \u003Ccode>width\u003C\u002Fcode> چیست؟». جوابش را با چیزی که دیدی بسنج: \u003Ccode>flex-basis: 200px\u003C\u002Fcode> را با \u003Ccode>flex-grow: 1\u003C\u002Fcode> ترکیب کن و ببین کارت از ۲۰۰ بزرگ‌تر می‌شود — کاری که \u003Ccode>width: 200px\u003C\u002Fcode>ِ سفت‌وسخت اجازه‌اش را نمی‌دهد. اگر AI این تفاوتِ «شروع در برابر قطعی» را نگفت، خودت دیدی‌اش.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":47,"html":48},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این هم دو فایلِ کاملِ این فصل، یک‌جا. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>انعطاف واقعی<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="cards">\n      <div class="card">۱<\u002Fdiv>\n      <div class="card">۲<\u002Fdiv>\n      <div class="card">۳<\u002Fdiv>\n      <div class="card">۴<\u002Fdiv>\n      <div class="card">۵<\u002Fdiv>\n      <div class="card">۶<\u002Fdiv>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n.cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n}\n\n.card {\n  flex: 1 1 200px;\n  padding: 24px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  font-size: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه یک شبکهٔ شش‌کارتی می‌بینی که کارت‌ها فضا را پُر می‌کنند و وقتی پنجره تنگ شود به خطِ بعد می‌ریزند. \u003Ccode>flex: 1 1 200px\u003C\u002Fcode> روی آیتم‌ها و \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> روی والد — همین دو خط، یک گالریِ خودتنظیم ساخت.\u003C\u002Fp>\n",{"kind":20,"heading":50,"html":51},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>flex-basis\u003C\u002Ftd>\n\u003Ctd>فلکس بِیسیس\u003C\u002Ftd>\n\u003Ctd>اندازهٔ شروعِ آیتم روی main axis\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex-grow\u003C\u002Ftd>\n\u003Ctd>فلکس گرو\u003C\u002Ftd>\n\u003Ctd>چقدر آیتم از فضای خالی سهم بردارد و کش بیاید (پیش‌فرض ۰)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex-shrink\u003C\u002Ftd>\n\u003Ctd>فلکس شرینک\u003C\u002Ftd>\n\u003Ctd>چقدر آیتم وقتی جا کم است جمع شود (پیش‌فرض ۱)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex\u003C\u002Ftd>\n\u003Ctd>فلکس\u003C\u002Ftd>\n\u003Ctd>shorthandِ سه‌تایی: \u003Ccode>grow shrink basis\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex-wrap\u003C\u002Ftd>\n\u003Ctd>فلکس رَپ\u003C\u002Ftd>\n\u003Ctd>آیا آیتم‌ها به خطِ بعد بریزند (\u003Ccode>wrap\u003C\u002Fcode>) یا به زور یک خط بمانند (\u003Ccode>nowrap\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>nowrap\u003C\u002Ftd>\n\u003Ctd>نو-رَپ\u003C\u002Ftd>\n\u003Ctd>پیش‌فرضِ \u003Ccode>flex-wrap\u003C\u002Fcode>: همه در یک خط، حتی اگر بیرون بزنند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":53,"heading":54,"html":55},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: \u003Ccode>flex: 1 1 200px\u003C\u002Fcode> یعنی چه؟ هر سه عدد را در یک جمله بگو.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک ردیف از چهار کارت بساز. کاری کن سه‌تای اول هم‌عرض باشند ولی کارتِ چهارم \u003Cstrong>دو برابرِ\u003C\u002Fstrong> بقیه پهن باشد. (راهنمایی: \u003Ccode>flex\u003C\u002Fcode> روی همه، ولی عددِ grow برای یکی بزرگ‌تر.) بعد آن‌قدر به عرضِ محتوای هر کارت اضافه کن یا پنجره را باریک کن تا مطمئن شوی با \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> به‌جای بیرون‌زدن، به خطِ بعد می‌ریزند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک «گالری» از شش کارت بساز که یک شبکهٔ خودتنظیم باشد: هر کارت \u003Ccode>flex: 1 1 240px\u003C\u002Fcode>، جعبهٔ والد \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> و \u003Ccode>gap: 16px\u003C\u002Fcode>. حالا فقط با عوض‌کردنِ عددِ basis (مثلاً از \u003Ccode>240px\u003C\u002Fcode> به \u003Ccode>320px\u003C\u002Fcode> یا \u003Ccode>160px\u003C\u002Fcode>)، ببین چطور تعدادِ کارت‌های هر ردیف عوض می‌شود، بی‌آنکه یک خطِ دیگر بنویسی. این نزدیک‌ترین کاری است که \u003Ccode>flexbox\u003C\u002Fcode> به یک گالریِ responsiveِ واقعی می‌کند.\u003C\u002Fp>\n",{"kind":20,"heading":57,"html":58},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان کلِ \u003Ccode>flexbox\u003C\u002Fcode> را بلدی: از چیدن در یک محور تا وسط‌چین‌کردن تا انعطاف و wrap. با همین یک ابزار می‌توانی بیشترِ layout هایی را که هر روز روی وب می‌بینی بسازی. ولی \u003Ccode>flexbox\u003C\u002Fcode> یک محدودیت دارد: هربار روی \u003Cstrong>یک\u003C\u002Fstrong> محور کار می‌کند. برای چیدمانِ واقعیِ دومحوره — ستون‌ها و ردیف‌ها که هم‌زمان با هم تراز باشند، مثلِ یک صفحهٔ شطرنجیِ کامل — ابزارِ بعدی می‌آید: \u003Ccode>grid\u003C\u002Fcode>. فصل بعد شروعش می‌کنیم و می‌بینی \u003Ccode>grid\u003C\u002Fcode> و \u003Ccode>flexbox\u003C\u002Fcode> رقیب نیستند، دو ابزارِ مکمل‌اند و هرکدام جای خودش را دارد.\u003C\u002Fp>\n",{"course":60,"entitled":68,"lessons":69,"payments_enabled":68,"terms":255,"live":5},{"active_window":61,"effective_price_toman":62,"free":5,"lesson_count":63,"price_toman":64,"slug":65,"summary_fa":66,"title_fa":67},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[70,74,78,81,84,87,91,95,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,148,149,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":71,"slug":72,"source":8,"term":71,"title_fa":73},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":75,"slug":76,"source":8,"term":71,"title_fa":77},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":9,"slug":79,"source":8,"term":71,"title_fa":80},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":6,"slug":82,"source":8,"term":71,"title_fa":83},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":15,"slug":85,"source":8,"term":71,"title_fa":86},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":71,"title_fa":90},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":71,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":71,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":71,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":71,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":71,"slug":108,"source":8,"term":75,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":75,"slug":111,"source":8,"term":75,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":9,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":6,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":15,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":75,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":75,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":75,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":75,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":71,"slug":142,"source":8,"term":9,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"slug":145,"source":8,"term":9,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":88,"slug":151,"source":8,"term":9,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":154,"source":8,"term":9,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":157,"source":8,"term":9,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":160,"source":8,"term":9,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":163,"source":8,"term":9,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":166,"source":8,"term":9,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":71,"slug":169,"source":8,"term":6,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":172,"source":8,"term":6,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":175,"source":8,"term":6,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":6,"slug":178,"source":8,"term":6,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":15,"slug":181,"source":8,"term":6,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":88,"slug":184,"source":8,"term":6,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":187,"source":8,"term":6,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":190,"source":8,"term":6,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":193,"source":8,"term":15,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":196,"source":8,"term":15,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":9,"slug":199,"source":8,"term":15,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":6,"slug":202,"source":8,"term":15,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":15,"slug":205,"source":8,"term":15,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":208,"source":8,"term":15,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":211,"source":8,"term":15,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":214,"source":8,"term":15,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":15,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":15,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":9,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":6,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":15,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":88,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105080]