[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t3-s02-flex-basics":3,"course:taropood":62},{"meta":4,"prev":11,"next":15,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,2,"t3-s02-flex-basics","book",3,"فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},1,"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",[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> بگویی \u003Ccode>display: flex\u003C\u002Fcode>، و بعدش هر چیزی که تویش هست، به‌جای اینکه زیرِ هم بیفتد، در یک \u003Cstrong>ردیف\u003C\u002Fstrong> کنارِ هم می‌نشیند. بعد کنترلش را هم به‌دست می‌گیری: می‌چرخانی‌اش عمودی، فاصلهٔ بینشان را تنظیم می‌کنی، و می‌فهمی چرا در صفحهٔ RTLِ ما اولین کارت سمتِ راست می‌نشیند. آخرِ فصل، یک ردیفِ تمیز از سه کارت داری که کاملاً در اختیارِ توست.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-main-cross-axis.502d8575d8.160.webp 160w, \u002F_img\u002F01-image-main-cross-axis.502d8575d8.320.webp 320w, \u002F_img\u002F01-image-main-cross-axis.502d8575d8.640.webp 640w, \u002F_img\u002F01-image-main-cross-axis.502d8575d8.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-main-cross-axis.502d8575d8.1280.jpg\" srcset=\"\u002F_img\u002F01-image-main-cross-axis.502d8575d8.160.jpg 160w, \u002F_img\u002F01-image-main-cross-axis.502d8575d8.320.jpg 320w, \u002F_img\u002F01-image-main-cross-axis.502d8575d8.640.jpg 640w, \u002F_img\u002F01-image-main-cross-axis.502d8575d8.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرح‌وارهٔ دو محور در flexbox: سه کارت در یک ردیف، یک پیکانِ افقی به‌عنوان main axis که در امتدادِ کارت‌ها می‌رود و یک پیکانِ عمودی به‌عنوان cross axis که عمود بر آن است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>display: flex\u003C\u002Fcode> روی یک جعبهٔ والد، بچه‌هایش را در یک ردیف کنارِ هم بچینی\u003C\u002Fli>\n\u003Cli>\u003Ccode>main axis\u003C\u002Fcode> و \u003Ccode>cross axis\u003C\u002Fcode> را از هم تشخیص بدهی و بگویی هرکدام کدام طرف است\u003C\u002Fli>\n\u003Cli>با \u003Ccode>flex-direction\u003C\u002Fcode> جهتِ ردیف را بین افقی و عمودی عوض کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>gap\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> جریانِ عادی و اینکه چرا block ها زیرِ هم می‌چینند — \u003Ccode>flexbox\u003C\u002Fcode> دقیقاً همان را عوض می‌کند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱:\u003C\u002Fstrong> محورِ inline در RTL از راست به چپ می‌رود — همین‌جا دوباره لازمش داریم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۲:\u003C\u002Fstrong> selector کلاس (\u003Ccode>.cards\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-02-flex-basics",{"kind":20,"heading":32,"html":33},"۱. یک ردیف کارت، هنوز زیرِ هم","\u003Ch2 id=\"۱-یک-ردیف-کارت-هنوز-زیرِ-هم\">۱. یک ردیف کارت، هنوز زیرِ هم\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DB%8C%DA%A9-%D8%B1%D8%AF%DB%8C%D9%81-%DA%A9%D8%A7%D8%B1%D8%AA-%D9%87%D9%86%D9%88%D8%B2-%D8%B2%DB%8C%D8%B1%D9%90-%D9%87%D9%85\" 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<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>والد را \u003Ccode><main>\u003C\u002Fcode> گذاشتیم چون این کارت‌ها کلِ محتوای اصلیِ این صفحهٔ کوچک‌اند — یادت هست از ترم ۱ که \u003Ccode><main>\u003C\u002Fcode> یعنی محتوای اصلیِ صفحه. ولی خودِ کارت‌ها \u003Ccode><div>\u003C\u002Fcode> هستند، و این‌بار درست است: در ترم ۱ گفتیم \u003Ccode><div>\u003C\u002Fcode> آخرین انتخاب است، فقط وقتی هیچ tag معناداری نمی‌خورد و تنها به یک جعبه برای چیدمان نیاز داری. این کارت‌ها معنایی ندارند، فقط قرار است چیده شوند؛ وقتی محتوای واقعی داشته باشند (یک محصول، یک مطلب) سراغِ \u003Ccode><article>\u003C\u002Fcode> می‌روی. و یک نکتهٔ مهم: \u003Ccode>display: flex\u003C\u002Fcode> روی \u003Cstrong>هر\u003C\u002Fstrong> عنصرِ block کار می‌کند، فرقی نمی‌کند \u003Ccode><main>\u003C\u002Fcode> باشد یا \u003Ccode><div>\u003C\u002Fcode> — مهم فقط این است که والد باشد.\u003C\u002Fp>\n\u003Cp>حالا یک CSS بده تا کارت‌ها دیده شوند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  padding: 16px;\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> سه کارتِ آبی می‌بینی که زیرِ هم چیده شده‌اند — چون \u003Ccode><div>\u003C\u002Fcode> یک عنصرِ block است و block ها، همان‌طور که فصل قبل دیدیم، روی هم می‌چینند. حالا این را عوض می‌کنیم.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. display: flex — و یک اشتباهِ خیلی رایج","\u003Ch2 id=\"۲-display-flex-—-و-یک-اشتباهِ-خیلی-رایج\">۲. \u003Ccode>display: flex\u003C\u002Fcode> — و یک اشتباهِ خیلی رایج\u003Ca class=\"head-anchor\" href=\"#%DB%B2-display-flex-%E2%80%94-%D9%88-%DB%8C%DA%A9-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D9%90-%D8%AE%DB%8C%D9%84%DB%8C-%D8%B1%D8%A7%DB%8C%D8%AC\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>راهِ کنارِ هم‌چیدن یک خط است: به جعبهٔ \u003Cstrong>والد\u003C\u002Fstrong> بگو \u003Ccode>display: flex\u003C\u002Fcode>. ولی قبل از اینکه درستش را بنویسیم، بیا عمداً همان اشتباهی را بکنیم که تقریباً هر تازه‌کاری یک‌بار می‌کند — چون از دلِ همین اشتباه، مهم‌ترین قانونِ \u003Ccode>flexbox\u003C\u002Fcode> بیرون می‌آید. حدس می‌زنی \u003Ccode>flex\u003C\u002Fcode> را باید به خودِ \u003Cstrong>کارت‌ها\u003C\u002Fstrong> بدهی. امتحانش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  display: flex;\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> کارت‌ها هنوز عینِ قبل زیرِ هم‌اند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> بله، عمدی است. \u003Ccode>display: flex\u003C\u002Fcode> را روی جای اشتباه گذاشتی. قانون این است: \u003Ccode>flex\u003C\u002Fcode> روی \u003Cstrong>جعبهٔ والد\u003C\u002Fstrong> می‌نشیند، نه روی بچه‌ها — و آن والد، \u003Cstrong>بچه‌های مستقیمِ خودش\u003C\u002Fstrong> را کنارِ هم می‌چیند. وقتی به \u003Ccode>.card\u003C\u002Fcode> دادی‌اش، به هر کارت گفتی «محتوای داخلِ خودت را flex کن»؛ ولی داخلِ هر کارت فقط یک عدد است، پس چیزی برای چیدن نبود و هیچ تغییری ندیدی. جای درست، \u003Ccode>.cards\u003C\u002Fcode> است — والدی که سه کارت بچه‌اش هستند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>خطِ \u003Ccode>display: flex\u003C\u002Fcode> را از \u003Ccode>.card\u003C\u002Fcode> بردار و به \u003Ccode>.cards\u003C\u002Fcode> بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا سه کارت در یک \u003Cstrong>ردیف\u003C\u002Fstrong> کنارِ هم نشسته‌اند. همین یک خط، جعبهٔ والد را به یک \u003Cstrong>flex container\u003C\u002Fstrong> تبدیل کرد و بچه‌هایش شدند \u003Cstrong>flex item\u003C\u002Fstrong>. این مهم‌ترین جملهٔ کلِ ترم است: \u003Cstrong>\u003Ccode>flexbox\u003C\u002Fcode> را همیشه روی والد می‌گذاری تا بچه‌هایش را بچیند.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> یک راهِ ساده برای اینکه یادت نرود: \u003Ccode>flex\u003C\u002Fcode> روی «ظرف» است، نه روی «چیزهای داخلِ ظرف». ظرف تصمیم می‌گیرد محتوایش چطور چیده شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. دو محور: main axis و cross axis","\u003Ch2 id=\"۳-دو-محور-main-axis-و-cross-axis\">۳. دو محور: main axis و cross axis\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AF%D9%88-%D9%85%D8%AD%D9%88%D8%B1-main-axis-%D9%88-cross-axis\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا که کارت‌ها در یک ردیف‌اند، باید یک مدلِ ذهنی برداری که تا آخرِ ترم همراهت است: هر flex container \u003Cstrong>دو محور\u003C\u002Fstrong> دارد.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>main axis\u003C\u002Fstrong> — محورِ اصلی، همان جهتی که flex item ها در امتدادش کنارِ هم می‌چینند. الان که کارت‌ها افقی‌اند، main axis افقی است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>cross axis\u003C\u002Fstrong> — محورِ عرضی، که همیشه \u003Cstrong>عمود بر\u003C\u002Fstrong> main axis است. الان که main axis افقی است، cross axis عمودی است.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>چرا این مهم است؟ چون در فصل بعد هر دستوری که برای چیدن و وسط‌چین‌کردن یاد می‌گیری، یا روی main axis کار می‌کند یا روی cross axis. اگر این دو را قاطی کنی، دستور روی محورِ اشتباه اثر می‌گذارد و گیج می‌شوی. پس همین حالا محکمش کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> اگر main axis افقی باشد، cross axis کدام طرف است؟ (جواب: عمودی — چون cross axis همیشه عمود بر main axis است.)\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. main axis در RTL: چرا کارتِ ۱ سمتِ راست است","\u003Ch2 id=\"۴-main-axis-در-rtl-چرا-کارتِ-۱-سمتِ-راست-است\">۴. main axis در RTL: چرا کارتِ ۱ سمتِ راست است\u003Ca class=\"head-anchor\" href=\"#%DB%B4-main-axis-%D8%AF%D8%B1-rtl-%DA%86%D8%B1%D8%A7-%DA%A9%D8%A7%D8%B1%D8%AA%D9%90-%DB%B1-%D8%B3%D9%85%D8%AA%D9%90-%D8%B1%D8%A7%D8%B3%D8%AA-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>به ردیفت دقت کن: کارتِ ۱ کجاست؟ سمتِ \u003Cstrong>راست\u003C\u002Fstrong>. این تصادفی نیست و همان درسِ فصلِ قبل است. جهتِ پیش‌فرضِ main axis از \u003Ccode>direction\u003C\u002Fcode> صفحه پیروی می‌کند، و صفحهٔ ما RTL است — پس main axis از \u003Cstrong>راست به چپ\u003C\u002Fstrong> می‌رود. برای همین اولین کارت سمتِ راست می‌نشیند و بقیه به‌سمتِ چپ می‌آیند. این دقیقاً همان جریانِ inlineای است که فصل قبل دیدی، حالا برای کارت‌ها.\u003C\u002Fp>\n\u003Cp>این را با \u003Ccode>flex-direction\u003C\u002Fcode> می‌بینی. تا حالا مقدارِ پیش‌فرضش که \u003Ccode>row\u003C\u002Fcode> است کار می‌کرد؛ حالا صریح بنویسش و بعد برعکسش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  flex-direction: row;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>row\u003C\u002Fcode> یعنی «ردیفِ افقی، در جهتِ صفحه». حالا مقدارش را به \u003Ccode>row-reverse\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  flex-direction: row-reverse;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> با \u003Ccode>row-reverse\u003C\u002Fcode> ترتیب برعکس شد و حالا کارتِ ۱ رفت سمتِ \u003Cstrong>چپ\u003C\u002Fstrong>. پس \u003Ccode>flex-direction\u003C\u002Fcode> جهتِ main axis را کنترل می‌کند. برای صفحهٔ فارسیِ ما \u003Ccode>row\u003C\u002Fcode> تقریباً همیشه همان چیزی است که می‌خواهی؛ فقط بدان که «از راست شروع می‌شود» یک اشتباه نیست، رفتارِ درستِ RTL است.\u003C\u002Fp>\n",{"kind":20,"heading":44,"html":45},"۵. flex-direction: column — همان محور، عمودی‌شده","\u003Ch2 id=\"۵-flex-direction-column-—-همان-محور-عمودی‌شده\">۵. \u003Ccode>flex-direction: column\u003C\u002Fcode> — همان محور، عمودی‌شده\u003Ca class=\"head-anchor\" href=\"#%DB%B5-flex-direction-column-%E2%80%94-%D9%87%D9%85%D8%A7%D9%86-%D9%85%D8%AD%D9%88%D8%B1-%D8%B9%D9%85%D9%88%D8%AF%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>flex-direction\u003C\u002Fcode> یک مقدارِ خیلی پرکاربردِ دیگر هم دارد: \u003Ccode>column\u003C\u002Fcode>. با این، main axis می‌شود \u003Cstrong>عمودی\u003C\u002Fstrong> و کارت‌ها دوباره زیرِ هم می‌چینند — ولی این‌بار به‌عنوان flex item، نه جریانِ عادی. امتحانش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کارت‌ها دوباره زیرِ هم‌اند، ولی این‌بار main axis عمودی است و cross axis افقی — یعنی دو محور دقیقاً جایشان عوض شد. چرا این با جریانِ عادی فرق دارد؟ چون حالا این جعبه یک flex container است و در فصل بعد می‌توانی همین ستونِ عمودی را با یک خط وسطِ صفحه بیاوری — کاری که با block معمولی سخت بود. فعلاً \u003Ccode>column\u003C\u002Fcode> را نگه دار یا به \u003Ccode>row\u003C\u002Fcode> برگردان؛ هر دو را در فصل بعد به‌کار می‌گیریم.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-row-vs-column.4cc15e5b89.160.webp 160w, \u002F_img\u002F02-image-row-vs-column.4cc15e5b89.320.webp 320w, \u002F_img\u002F02-image-row-vs-column.4cc15e5b89.640.webp 640w, \u002F_img\u002F02-image-row-vs-column.4cc15e5b89.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-row-vs-column.4cc15e5b89.1280.jpg\" srcset=\"\u002F_img\u002F02-image-row-vs-column.4cc15e5b89.160.jpg 160w, \u002F_img\u002F02-image-row-vs-column.4cc15e5b89.320.jpg 320w, \u002F_img\u002F02-image-row-vs-column.4cc15e5b89.640.jpg 640w, \u002F_img\u002F02-image-row-vs-column.4cc15e5b89.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ flex-direction: در حالتِ row سه کارت در یک ردیفِ افقی، در حالتِ column همان سه کارت در یک ستونِ عمودی، با پیکانِ main axis که در هر حالت جهتش عوض شده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":20,"heading":47,"html":48},"۶. gap — فاصلهٔ تمیز بینِ کارت‌ها","\u003Ch2 id=\"۶-gap-—-فاصلهٔ-تمیز-بینِ-کارت‌ها\">۶. \u003Ccode>gap\u003C\u002Fcode> — فاصلهٔ تمیز بینِ کارت‌ها\u003Ca class=\"head-anchor\" href=\"#%DB%B6-gap-%E2%80%94-%D9%81%D8%A7%D8%B5%D9%84%D9%87%D9%94-%D8%AA%D9%85%DB%8C%D8%B2-%D8%A8%DB%8C%D9%86%D9%90-%DA%A9%D8%A7%D8%B1%D8%AA%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>کارت‌ها الان به هم چسبیده‌اند. در فصل قبل دیدی که فاصله‌انداختن با \u003Ccode>margin\u003C\u002Fcode> بینِ عنصرهای کنارِ هم می‌تواند دردسر بسازد. \u003Ccode>flexbox\u003C\u002Fcode> یک ابزارِ مخصوصِ همین کار دارد که تمیزتر است: \u003Ccode>gap\u003C\u002Fcode>. فقط بینِ item ها فاصله می‌اندازد، نه قبلِ اولی و نه بعدِ آخری. به \u003Ccode>row\u003C\u002Fcode> برگرد و \u003Ccode>gap\u003C\u002Fcode> اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  padding: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا بینِ هر دو کارت ۱۶ پیکسل فاصله افتاد، ولی دو طرفِ کلِ ردیف نه. مقدارِ \u003Ccode>gap\u003C\u002Fcode> را به \u003Ccode>4px\u003C\u002Fcode> عوض کن و ببین کارت‌ها به هم نزدیک می‌شوند، بعد \u003Ccode>40px\u003C\u002Fcode> بگذار و ببین از هم باز می‌شوند. این تمیزترین راهِ فاصله‌گذاری بینِ flex item هاست و از این به بعد همیشه از همین استفاده می‌کنیم.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیارِ AI ات بپرس «فرقِ \u003Ccode>gap\u003C\u002Fcode> و \u003Ccode>margin\u003C\u002Fcode> برای فاصله‌گذاری بینِ آیتم‌های flex چیست؟». جوابش را با چیزی که همین الان دیدی بسنج: با \u003Ccode>gap\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>flexbox: یک محور<\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    <\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-direction: row;\n  gap: 16px;\n  padding: 16px;\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> روی صفحه سه کارتِ آبی در یک ردیف با فاصلهٔ منظم می‌بینی که از راست شروع می‌شوند. \u003Ccode>display: flex\u003C\u002Fcode> روی والد، \u003Ccode>flex-direction: row\u003C\u002Fcode> برای جهت، و \u003Ccode>gap\u003C\u002Fcode> برای فاصله — همین سه، پایهٔ هر چیزی است که در فصل‌های بعد رویش می‌سازیم.\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>flexbox\u003C\u002Ftd>\n\u003Ctd>فلکس‌باکس\u003C\u002Ftd>\n\u003Ctd>روشِ چیدنِ بچه‌های یک جعبه در یک محور\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>display: flex\u003C\u002Ftd>\n\u003Ctd>دیسپلی فلکس\u003C\u002Ftd>\n\u003Ctd>خطی که جعبهٔ والد را به flex container تبدیل می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex container\u003C\u002Ftd>\n\u003Ctd>فلکس کانتینر\u003C\u002Ftd>\n\u003Ctd>جعبهٔ والدی که \u003Ccode>display: flex\u003C\u002Fcode> گرفته\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex item\u003C\u002Ftd>\n\u003Ctd>فلکس آیتم\u003C\u002Ftd>\n\u003Ctd>هر بچهٔ مستقیمِ یک flex container\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>main axis\u003C\u002Ftd>\n\u003Ctd>مِین اَکسیس\u003C\u002Ftd>\n\u003Ctd>محورِ اصلی که آیتم‌ها در امتدادش می‌چینند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>cross axis\u003C\u002Ftd>\n\u003Ctd>کراس اَکسیس\u003C\u002Ftd>\n\u003Ctd>محورِ عمود بر main axis\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flex-direction\u003C\u002Ftd>\n\u003Ctd>فلکس‌دایرکشن\u003C\u002Ftd>\n\u003Ctd>جهتِ main axis: \u003Ccode>row\u003C\u002Fcode> \u002F \u003Ccode>row-reverse\u003C\u002Fcode> \u002F \u003Ccode>column\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>gap\u003C\u002Ftd>\n\u003Ctd>گَپ\u003C\u002Ftd>\n\u003Ctd>فاصلهٔ بینِ آیتم‌ها، فقط بینشان\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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: \u003Ccode>display: flex\u003C\u002Fcode> را روی والد می‌گذاری یا روی بچه‌ها؟ و چرا؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک ردیف از \u003Cstrong>چهار\u003C\u002Fstrong> کارت بساز که با \u003Ccode>display: flex\u003C\u002Fcode> کنارِ هم بنشینند و بینشان \u003Ccode>gap: 12px\u003C\u002Fcode> باشد. بعد \u003Ccode>flex-direction\u003C\u002Fcode> را یک‌بار روی \u003Ccode>row\u003C\u002Fcode>، یک‌بار \u003Ccode>row-reverse\u003C\u002Fcode> و یک‌بار \u003Ccode>column\u003C\u002Fcode> امتحان کن و برای هر کدام یک جمله بنویس که کارتِ ۱ کجا رفت و کدام محور، main axis شد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک منوی ساده بساز — یک \u003Ccode><nav>\u003C\u002Fcode> که سه تا \u003Ccode><a>\u003C\u002Fcode> مستقیم داخلش دارد — و به خودِ \u003Ccode><nav>\u003C\u002Fcode> بده \u003Ccode>display: flex\u003C\u002Fcode> با \u003Ccode>gap: 24px\u003C\u002Fcode>. ببین سه لینک در یک ردیف کنارِ هم می‌نشینند. حالا \u003Ccode>flex-direction: column\u003C\u002Fcode> بده و ببین منو عمودی می‌شود. این همان الگویی است که تقریباً هر نوارِ ناوبریِ واقعی روی وب از آن ساخته شده.\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>الان می‌توانی هر مجموعه‌ای را در یک ردیف یا ستون بچینی و فاصله‌شان را کنترل کنی. ولی هنوز کاری با \u003Cstrong>جای\u003C\u002Fstrong> کارت‌ها در طولِ ردیف نکرده‌ای — همه سرِ شروعِ محور چسبیده‌اند. فصل بعد دقیقاً همین است: با \u003Ccode>justify-content\u003C\u002Fcode> آیتم‌ها را در امتدادِ main axis پخش می‌کنی (وسط، دو سر، با فاصلهٔ برابر) و با \u003Ccode>align-items\u003C\u002Fcode> روی cross axis می‌چینی‌شان — و بالاخره به آن چیزی می‌رسی که هر تازه‌کاری آرزویش را دارد: \u003Cstrong>وسط‌چینِ واقعیِ عمودی\u003C\u002Fstrong>.\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,76,79,82,86,90,94,98,102,106,110,113,116,119,122,125,128,131,134,137,140,144,145,146,147,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":12,"slug":74,"source":8,"term":12,"title_fa":75},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":6,"slug":77,"source":8,"term":12,"title_fa":78},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":9,"slug":80,"source":8,"term":12,"title_fa":81},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":83,"slug":84,"source":8,"term":12,"title_fa":85},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":87,"slug":88,"source":8,"term":12,"title_fa":89},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":91,"slug":92,"source":8,"term":12,"title_fa":93},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":95,"slug":96,"source":8,"term":12,"title_fa":97},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":99,"slug":100,"source":8,"term":12,"title_fa":101},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":103,"slug":104,"source":8,"term":12,"title_fa":105},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":107,"slug":108,"source":8,"term":12,"title_fa":109},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":12,"slug":111,"source":8,"term":6,"title_fa":112},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":6,"slug":114,"source":8,"term":6,"title_fa":115},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":9,"slug":117,"source":8,"term":6,"title_fa":118},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":83,"slug":120,"source":8,"term":6,"title_fa":121},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":87,"slug":123,"source":8,"term":6,"title_fa":124},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":91,"slug":126,"source":8,"term":6,"title_fa":127},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":95,"slug":129,"source":8,"term":6,"title_fa":130},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":99,"slug":132,"source":8,"term":6,"title_fa":133},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":103,"slug":135,"source":8,"term":6,"title_fa":136},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":107,"slug":138,"source":8,"term":6,"title_fa":139},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":141,"slug":142,"source":8,"term":6,"title_fa":143},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":83,"slug":148,"source":8,"term":9,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":87,"slug":151,"source":8,"term":9,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":91,"slug":154,"source":8,"term":9,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":95,"slug":157,"source":8,"term":9,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":99,"slug":160,"source":8,"term":9,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":103,"slug":163,"source":8,"term":9,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":107,"slug":166,"source":8,"term":9,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":141,"slug":169,"source":8,"term":9,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":12,"slug":172,"source":8,"term":83,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":6,"slug":175,"source":8,"term":83,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":178,"source":8,"term":83,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":83,"slug":181,"source":8,"term":83,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":87,"slug":184,"source":8,"term":83,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":91,"slug":187,"source":8,"term":83,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":95,"slug":190,"source":8,"term":83,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":99,"slug":193,"source":8,"term":83,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":12,"slug":196,"source":8,"term":87,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":6,"slug":199,"source":8,"term":87,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":9,"slug":202,"source":8,"term":87,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":83,"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":12,"slug":226,"source":8,"term":91,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":6,"slug":229,"source":8,"term":91,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":9,"slug":232,"source":8,"term":91,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":83,"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","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105069]