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