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