خب حالا بیایید از تمام دانش Flexbox خود استفاده کنیم
تا کل طرح صفحه را با استفاده از Flexbox بسازیم
و در واقع این نباید برای ما خیلی سخت باشد
چون در این مرحله طرح کلی صفحه واقعاً ساده است
پس حالا بیایید کمی بزرگنمایی کنیم
و یادتان باشد
که طرحی که می‌خواهیم به آن برسیم دقیقاً این است
پس اساساً هدر
و فوتر در جای خود باقی می‌مانند
پس آن‌ها در حال حاضر کامل و بدون مشکل هستند
و پس تنها کاری که باید انجام دهیم این است که
این مقاله را کنار بخش پست‌های مرتبط قرار دهیم
و این پست‌های مرتبط
به یاد داشته باشید باید عرضی برابر با ۳۰۰ پیکسل داشته باشند
و سپس می‌خواهیم یک فاصله ۷۵ پیکسلی در وسط ایجاد کنیم
خب پس بیایید این کار را انجام دهیم
و دوباره کاری که باید انجام دهیم اساساً این است که
این عنصر را کنار این مقاله قرار دهیم
و بنابراین دوباره اولین سوال این است که
چه عنصری قرار است flex container باشد؟
پس آیا شاید عنصر container باشد؟
یعنی عنصری با کلاس container خب
بیایید به بالای صفحه برویم
بیایید امتحانش کنیم
display: Flex
و خب به نظر نمی‌رسد این راه‌حل درست باشد
حالا همه چیز اینجا کمی کنار هم قرار گرفته است
و این منطقی است
دلیلش این است که همه این‌ها
هدر مقاله سایت و فوتر
همه در واقع فرزند این container هستند
پس طبیعی است که این همان flex container مورد نظر ما نیست
که دنبال آن هستیم
در عوض کاری که باید انجام دهیم این است که یک flex container جدید بسازیم
پس با Flexbox
اغلب لازم است یک flex container جدید ایجاد کنیم
تا بتوانیم طرح‌بندی مورد نظرمان را بسازیم
یادتان باشد در جلسه قبلی ما در واقع
همین کار را برای هر پست مرتبط انجام دادیم
پس مجبور شدیم یک div جدید اینجا ایجاد کنیم
تا این div بتواند کنار تصویر قرار بگیرد
پس این وضعیت دقیقاً مشابه نیست
اما باز هم مجبور بودیم یک عنصر جدید بسازیم
تا بتوانیم طرح‌بندی خود را پیاده کنیم
پس این دوباره در Flexbox کاملاً رایج است
به هر حال حالا می‌خواهیم یک والد ایجاد کنیم
برای هر دو مقاله و aside
پس بیایید یک div جدید بسازیم
باز هم عنصری بدون معنی واقعی
و این یکی را فقط row می‌نامم
پس یک نام خیلی عمومی که می‌توانیم در سراسر صفحه دوباره استفاده کنیم
اگر بخواهیم
پس بیایید این div را از اینجا حذف کنیم
و بعد از پایان aside جای‌گذاری کنیم
پس مقاله اینجا به پایان می‌رسد سپس aside شروع می‌شود
و بعد از aside و
قبل از فوتر است که div را می‌بندیم
ذخیره کنید و سپس همه چیز دوباره قالب‌بندی می‌شود
حالا بیایید به پایین برویم
تا پایان کد و شروع به ساخت طرح‌بندی کنیم
پس حالا row ما flex container است
و این چیزی است که به نظر می‌رسد
و در واقع این همین‌طور به نظر خیلی خوب می‌رسد
پس بدون نیاز به کار زیاد در واقع
بیایید همین حالا این سایت را بررسی کنیم چون به نظر می‌رسد
که عرض دارد اما در واقع ندارد
پس این فقط یک موقعیت خودکار Flexbox است
که در واقع تلاش می‌کند به صورت خودکار
عرض مناسب این عنصر را پیدا کند
و به نظر می‌رسد ۲۸۱ پیکسل باشد
اما ما می‌خواهیم ۳۰۰ پیکسل باشد
پس همان‌طور که قبلاً با floats انجام دادیم درست است؟
پس بیایید عرض سایت را مشخص کنیم
و حالا یادتان باشد که برای flex items
نباید از property width استفاده کنیم
بلکه باید از flex-basis استفاده کنیم
پس از flex-basis استفاده کنید
پس آن می‌شود flex-basis
۳۰۰ پیکسل
بیایید ببینیم جواب می‌دهد یا نه
و به نظر نمی‌رسد جواب بدهد درست است؟
پس هنوز روی ۲۸۱ پیکسل است
و دلیلش باید این باشد که Flexbox
می‌خواهد این عناصر را به صورت خودکار کوچک کند
پس باید flex-shrink را صفر کنیم یادتان باشد
و در واقع باید همه این‌ها را
در shorthand property flex انجام دهیم
پس فقط flex و اولین مقدار یادتان باشد flex-grow است
بیایید اینجا امتحانش کنیم
و در واقع من آن را اینجا کپی می‌کنم
چون می‌تواند منبع سردرگمی باشد
باشه؟
پس سریع آن را قالب‌بندی می‌کنیم
تا کمی مرتب‌تر به نظر برسد
و مقدار پیش‌فرض flex-grow صفر است
و می‌خواهیم آن را حفظ کنیم
و مقدار پیش‌فرض flex-shrink برابر یک است
اما بیایید آن را هم صفر کنیم
تا عرض دقیقاً ۳۰۰ پیکسل شود
و شاید دیدید که بزرگ شد
و واقعاً حالا عرض ما دقیقاً ۳۰۰ پیکسل شده است
درسته؟
و حالا بیایید مقاله را هم قالب‌بندی کنیم
پس این اساساً ستون دیگر است
و فعلاً بیایید مشابه روش قبل عمل کنیم
پس این‌ها را صفر می‌کنیم
و سپس دقیقاً ۸۲۵ پیکسل مشخص می‌کنیم
همان‌طور که قبلاً انجام دادیم
پس این می‌شود ۸۲۵
به علاوه ۷۵ پیکسل فاصله بین آن‌ها
و سپس به علاوه ۳۰۰ پیکسل اینجا
پس فعلاً این‌طور انجام می‌دهیم
اما بعداً کمی تغییرش می‌دهیم
باشه؟ حالا بیایید فاصله بین آن‌ها را هم اضافه کنیم
این فاصله را
و برای این کار روی flex container
یادتان باشد می‌توانیم از property gap استفاده کنیم
پس آن را مثل قبل روی ۷۵ پیکسل تنظیم کنیم
و حالا طرح‌بندی ما عملاً آماده است
بیایید بررسی کنیم
پس ۳۰۰ پیکسل و این یکی ۸۲۵ پیکسل است
و جمع همه این‌ها به ما ۱۲۰۰ پیکسل می‌دهد
که همان عرض container است
حالا انجام دادن همه این محاسبات
کمی هدف استفاده از Flexbox را خنثی می‌کند
پس شاید بخواهیم سایت واقعاً همین اندازه باشد
اما مقاله
شاید بهتر است Flexbox به طور خودکار اندازه آن را محاسبه کند درست است؟
پس معمولاً در چنین موقعیتی
کار ما این است که ساده flex را روی یک قرار دهیم
که اجازه می‌دهد این عنصر
به طور خودکار تا جایی که می‌تواند در فضای موجود رشد کند
و اگر این را ذخیره کنیم
عنصر ما باید دقیقاً
مثل قبل به نظر برسد و واقعاً همین‌طور است
پس هنوز عرض آن ۸۲۵ پیکسل است
چون این دقیقاً فضایی است که برای آن موجود است
و خب این دقیقاً همان فضایی است که می‌تواند پر کند
باشه؟ حالا بیایید ببینیم پایین چه اتفاقی می‌افتد
و شاید متوجه شده باشید
که این سایت تا پایین رشد کرده است
پس نگاه می‌کنیم چرا این اتفاق افتاده ولی همچنین می‌بینید
که کمی بیشتر هم رشد کرده تقریباً تا انتها
و دلیلش این است که
این مقاله یک margin دارد
که قبلاً اضافه کرده بودیم
و یک بار دیگر این margin
جزئی از اندازه این عنصر است
و حالا بیایید واقعاً آن را حذف کنیم
پس margin-bottom را صفر می‌کنیم
باشه؟
و برای ایجاد فاصله اینجا
بین فوتر و محتوا
بیایید margin-bottom را به کل row اضافه کنیم
پس به این container درست است؟
اما مهم این است که حالا این حداقل تا حدودی
با آن هم‌تراز شده باشد
پس margin-bottom برابر ۶۰ پیکسل
خوبه
و حالا بیایید فکر کنیم چرا واقعاً این عنصر
تا پایین رشد کرده است
می‌توانید حدس بزنید چرا؟
خب دلیلش این است که یادتان باشد مقدار پیش‌فرض
برای align-items برابر stretch است
پس اساساً اگر align-items تعریف نکنیم
تمام عناصر به طور خودکار تا جایی که می‌توانند کشیده می‌شوند
و در این حالت بزرگ‌ترین عنصر این aside است
یا در واقع این مقاله که می‌توانیم ببینیم
اگر به آن رنگ اضافه کنیم
پس background-color
قرمز
پس می‌بینید که این عنصر طبیعتاً خیلی بزرگ‌تر است
و پس به طور پیش‌فرض سایر flex items
تا جایی که می‌توانند رشد می‌کنند
تا همه عناصر هم‌عرض شوند
پس می‌بینید که آن‌ها کاملاً در پایین هم‌تراز هستند
حالاً اغلب اوقات این دقیقاً همان رفتاری است که می‌خواهیم
و قبل از Flexbox با layout های float چنین چیزی
تقریباً غیرممکن بود که فقط با CSS به دست آوریم
اما حالا همان‌طور که می‌بینید بسیار آسان است
حتی پیش‌فرض هم اتفاق می‌افتد
حال فرض کنیم نمی‌خواهیم این اتفاق بیفتد پس بیایید درستش کنیم
خب چگونه آن را درست کنیم؟
به سادگی property align-items را روی والد به مقدار دیگری تنظیم می‌کنیم
پس روی flex container اینجا
می‌گوییم align-items و آن را روی flex-start قرار می‌دهیم
و بله حالا دوباره
فقط به اندازه لازم عمودی اشغال می‌کند
بدون اینکه تا جایی که می‌تواند رشد کند
عالی فوق‌العاده است
با این کار استفاده از Flexbox را در پروژه‌مان به پایان رساندیم
و در این جلسه به طور خاص تقریباً تمام چیزهایی که
درباره Flexbox یاد گرفته بودیم را استفاده کردیم
پس فوق‌العاده است و پیشرفت خوبی داریم
اگر تا اینجا هنوز همراه من هستید
و یادتان باشد Flexbox مطالب زیادی دارد
و شخصاً یاد گرفتن همه آن زمان زیادی از من گرفت
پس اصلاً مشکلی نیست اگر هنوز بعضی چیزها برایتان گیج‌کننده باشد
در این مرحله
تمام کاری که باید انجام دهید این است که Flexbox را تمرین کنید
تمرین شخصی واقعاً کلیدی است
اولین فرصت برای این کار
چالش کدنویسی جلسه بعد است
پس واقعاً توصیه می‌کنم آن را انجام دهید
در این مرحله
تنها کاری که باید بکنید تمرین Flexbox به صورت عملی است
واقعاً کلیدی است
و اولین فرصت برای این کار
چالش کدنویسی جلسه بعد است
پس امیدوارم هرچه سریع‌تر آن را شروع کنید
و من امیدوارم آنجا شما را ببینم