حالا که با اصول Flexbox آشنا شدید
بیایید نهایتاً Flexbox را به پروژه بلاگ پست خود اضافه کنیم
خوب
پس بیایید برگردیم اینجا
به پروژه‌مان
و عرض بهتری به آن بدهیم
و این همان چیدمانی است که قبلاً با استفاده از floats ساخته بودیم
و کارهای زیادی دیگر هم با floats انجام دادیم
مثل قرار دادن این متن کنار تصویر به صورت کنار هم
و همچنین اینجا قرار دادن ناوبری
در سمت راست و عنوان در سمت چپ
و بنابراین
بیایید حالا همه این‌ها را غیرفعال کنیم
تا بتوانیم همان کار را انجام دهیم
اما این بار با استفاده از Flexbox
خوب
پس حالا برگشتیم
به همان شکلی که قبلاً با floats بود
و
پس دوباره بیایید این را یک بار دیگر درست کنیم
خوب و از اینجا شروع می‌کنیم
با ناوبری و عنوان
پس این‌ها را دوباره کنار هم قرار می‌دهیم
روش قبلی ما این بود که هر دو 'h1' و 'nav' را float کنیم
اما حالا البته از Flexbox استفاده می‌کنیم
پس در واقع کجا باید Flexbox را اعمال کنیم؟
یا به عبارت دیگر
کدام عنصر باید به عنوان flex container در اینجا باشد؟
خب این باید عنصری باشد
که هر دوی این عناصر را در بر می‌گیرد درست است؟
و این همان main header است
یعنی عنصری که کلاس main header را دارد
درست؟
پس فقط برای اطمینان
بیایید سریع آن را در markup بررسی کنیم
و واقعاً main header والد هر دو 'h1' و 'nav' است
خوب و حالا بیایید این را flex container کنیم
با تنظیم display روی flex
پس این به طور خودکار آن‌ها را کنار هم قرار می‌دهد
و حالا بیایید تراز عمودی را هم درست کنیم
حالا فقط یک کار باقی مانده است
می‌بینید که همه این لینک‌ها
margin بالای ۱۰ پیکسل دارند
مثلاً همین یکی اینجا
و ما می‌خواهیم حالا آن را حذف کنیم
و در واقع می‌خواهیم برای همیشه حذف شود
پس بیایید این کار را نه اینجا که مربوط به بخش Flexbox است
بلکه آنجا انجام دهیم
همان جایی که در واقع آن را تعریف کرده‌ایم
پس
می‌بینید که CSS ما بزرگ‌تر می‌شود و
پیدا کردن کدی که دنبالش هستیم سخت‌تر می‌شود
و در پروژه‌های بزرگ‌تر
البته راهی برای سازماندهی بهتر آن پیدا خواهیم کرد
پس این را حذف می‌کنیم و می‌بینید که حالا بالا رفته است
اما دوباره حالا می‌خواهیم این به صورت عمودی تراز شود
و یادتان هست چگونه این کار را انجام می‌دهیم؟
خب ما فقط استفاده می‌کنیم از
align-items
که به طور پیش‌فرض عناصر را عمودی تراز می‌کند
و اگر بگوییم center
به طور خودکار به مرکز منتقل می‌شوند
پس عالی است
خیلی آسان
نیازی نیست padding یا margin دستی اضافه کنیم
تا زمانی که در مرکز قرار بگیرد
پس به این صورت به طور خودکار اتفاق می‌افتد
که خیلی بهتر است
و حالا قدم بعدی که می‌خواهیم انجام دهیم این است که
در واقع این را به سمت راست منتقل کنیم
پس کل ناوبری
وقتی فقط دو flex item داریم
و می‌خواهیم هر کدام را به یک سمت بفرستیم
بهترین کار استفاده از justify-content است
یادتان باشد justify-content شبیه align-items است
اما این برای تراز افقی عناصر به طور پیش‌فرض است
پس یادتان باشد می‌توانستیم آن را روی center هم بگذاریم
که آن‌وقت شبیه این می‌شد
پس حالا این دو در مرکز دقیق header قرار دارند
اما چیزی که ما می‌خواهیم در واقع space-between است
و این در واقع تمام فضای خالی را می‌گیرد
و به عنوان فاصله بین آن‌ها تقسیم می‌کند
و اگر فقط دو عنصر داشته باشیم
این یعنی تمام فضای باقی‌مانده بین دو عنصر فلکس باقی می‌ماند
و در نتیجه
هر کدام به یک سمت منتقل می ‌شوند
عالی پس این یکی ثابت شد
خوب حالا برویم سراغ بعدی که این بخش است
پس می‌خواهیم این متن دوباره کنار تصویر باشد درست است؟
پس یک بار دیگر
بپرسیم که چه عنصری باید flex container باشد
یا به عبارت دیگر
کدام والد این دو عنصر منطقی است که به flex container تبدیل شود؟
تا به حال چه عنصری این دو را در بر می‌گیرد و می‌تواند flex container شود؟
خب بیایید HTML خودمان را بررسی کنیم
و حالا می‌توانیم همین کار را در Inspector انجام دهیم
پس در DevTools و فکر کنم کمی خیلی کوچک است
دوباره بیایید آن را بزرگ‌تر کنیم
و این دو عنصر هستند که ما به آن‌ها علاقه‌مندیم
یعنی تصویر و P
با این حال
flex container واقعاً نباید همین عنصر باشد درست است؟
منظورم این است که این والد تصویر و پاراگراف است
اما همچنین والد تمام این عناصر دیگر هم هست
پس این واقعاً جواب نمی‌دهد درست است؟
بیایید در واقع آن را امتحان کنیم
post-header
و display را روی flex تنظیم کنیم
اما این باید خیلی عجیب به نظر برسد
و واقعاً هم چنین است
چون حالا این عنصر flex container است
و همه این‌ها عناصر فلکس هستند که اکنون کنار هم قرار می‌گیرند
حداقل اگر امکان داشته باشد
و البته این همان چیزی نیست که ما می‌خواهیم
پس راه حل این است که یک عنصر جدید بسازیم
که والد تصویر و این پاراگراف باشد
خوب
پس می‌تواند فقط یک div ساده باشد
چون نیازی به معنا یا کلاس خاصی برای آن نداریم
پس بیایید آن را 'author-box' بنامیم
و حالا اجازه دهید از آن ترفند استفاده کنم
که کلید option یا alt را همراه با
کلید پایین زده و
این div را پایین می‌بریم
یعنی تگ بسته شدن آن
و این یک راه ساده است
برای wrap کردن دو عنصر درون یک والد جدید
پس این کلاس author-box است که حالا
باید به جای post-header به flex container تبدیل شود
بیایید ببینیم
و بلافاصله کنار هم قرار می‌گیرند پس عالی است
حالا تنها کاری که باید انجام دهیم این است که دوباره
آن‌ها را عمودی وسط چین کنیم
و سپس می‌توانیم کمی فاصله به تصویر اضافه کنیم
شاید برای ایجاد کمی فاصله بین این دو
پس
یک بار دیگر
از align-items استفاده می‌کنیم و روی center قرار می‌دهیم
خوب
خب در واقع کمی عجیب به نظر می‌رسد
پس واقعاً وسط چین نشده است
و فکر می‌کنم دلیلش این است که margin وجود دارد
بله درست است
و در این وضعیت margin به نوعی
جزئی از عنصر در هنگام وسط چین عمودی باقی می‌ماند
خوب
پس بیایید در واقع آن margin را حذف کنیم
چون خیلی منطقی نیست
سپس اینجا فکر کردم
که این تصویر در واقع margin به پایین دارد
اما شاید نداشته باشد
خوب به هر حال کاری که می‌خواهیم انجام دهیم این است که
margin-bottom این عنصر را برای همیشه حذف کنیم
پس بیایید به سادگی author را انتخاب کنیم
و سپس آن را override کنیم
پس در واقع مقدار آن را به صفر برمی‌گردانیم
خوب
پس ما قبلاً این کلاس author را انتخاب نکرده بودیم
پس بیایید این کار را همین‌جا انجام دهیم
پس margin-bottom باید صفر باشد
و سپس بیایید در واقع margin اضافه کنیم
به سمت چپ برای ایجاد فاصله بین تصویر
margin-left
۱۵ پیکسل
و
همین است
عالی حالا کمی فاصله اضافه کنیم
بین این author-box جدیدی که ساختیم
و این عنصر اینجا
پس یک margin-bottom دیگر اضافه می‌کنم
۱۵ پیکسل البته margin-bottom
خوب
عالی
و حالا وقت آن است که
این عنصر را کمی بهتر استایل دهیم
پس هر یک از این‌ها
در حال حاضر کمی نامرتب هستند
بیایید markup را بررسی کنیم
و می‌توانیم این کار را همین‌جا انجام دهیم
پس ما li ها را داریم
و همه کاری که انجام می‌دهند داشتن تصویر
و <a و <p درون آن است
اما چیزی که واقعاً می‌خواهیم این است که
این anchor و این پاراگراف کنار تصویر باشند
پس ببینم
بله اینجاست چیزی که می‌خواهیم
پس در یک طرف تصویر و در طرف دیگر
یک باکس که این دو عنصر را در خود دارد
پس بیایید کلاس‌هایی اضافه کنیم
به markup تا بتوانیم بالاخره آن را استایل دهیم
پس کل UL اینجا 'related' نام دارد
پس به هر li کلاس 'related-post' می‌دهیم
پس همه این‌ها را کپی می‌کنیم و ایده‌آل این است که این کلاس‌ها را
همین ابتدای هر عنصر اضافه کنیم
وقتی واقعاً شروع به نوشتن markup خود می‌کنیم
خوب پس ما نمی‌خواهیم بعداً این کار را انجام دهیم
چون آن کمی کار بیشتری است
چون حالا ما باید کلاس‌هایی هم به اینجا اضافه کنیم
به این لینک‌ها
پس عنصر P قبلاً 'related-author' را دارد
پس این یکی را 'related-link' می‌نامیم
پس class= "related-link"
و سپس آن را به دو عنصر دیگر هم اضافه می‌کنیم
و همین است
حالا برمی‌گردیم به CSS خود
flex container احتمالاً باید 'related-post' باشد
درست است؟
پس 'related-post' و display را روی 'flex' تنظیم می‌کنیم
و این همان است
اما حالا مشکل این است که هر سه
اکنون به عنوان flex item هستند
پس می‌بینید این یکی
و این یکی و آن یکی همه flex item هستند
و این چیزی نیست که ما می‌خواهیم
پس فکر کنم قبلاً هم اشاره کردم
که ما می‌خواهیم این دو عنصر در یک باکس باشند
تا آن باکس بتواند در سمت راست تصویر قرار گیرد
پس اینجا فراموش کردم این کار را انجام دهم
پس حالا انجام می‌دهیم
پس دوباره آن را درون یک div wrap می‌کنم
سپس اینجا enter زدم و دوباره
از option و arrow down استفاده کردم تا آن را پایین ببرم
و save کنم
و این عنصر واقعاً نیازی به نام ندارد
ما واقعاً فقط به این باکس نیاز داریم تا
این باکس با این محتوا بتواند
در سمت راست تصویر قرار گیرد
پس دوباره ترفند پایین بردن div
برای تگ بسته شدن و همین‌جا نیز مشابه است
خب حداقل باید درست آن را تایپ کنم
و اگر حالا بررسی کنیم
آنگاه بالاخره درست به نظر می‌رسد
خوب
و حالا
باز هم باید این عناصر را عمودی وسط چین کنیم
بیایید در واقع دوباره اندازه را کوچک کنیم
تا بتوانیم نتایج را فوراً ببینیم
پس در این مرحله
باید وسط چین کردن عمودی آسان باشد درست است؟
پس 'align-items: Center'
خوب عالی
اما دوباره این مشکل وجود دارد
که یکی از این عناصر هنوز margin قدیمی دارد
این مشکلی است که رخ می‌دهد
وقتی ابتدا با floats کد می‌نویسیم برای مثال
یا صرفاً marginهای تصادفی همه جا اضافه می‌کنیم
و فقط بعداً شروع به بهینه‌سازی کد می‌کنیم
این اتفاق می‌افتد چون هنوز در حال یادگیری هستیم
اما در آینده همه این‌ها کمی آسان‌تر خواهد شد
پس نگران نباشید که همه چیز نامرتب است
پس در این حالت هنوز این مشکل را داریم که
به طور پیش‌فرض margin-bottom را به پاراگراف‌ها اختصاص داده‌ایم
پس بیایید این 'related-author' را انتخاب کنیم و آن را حذف کنیم
پس 'related-author'
و سپس می‌گوییم
'margin-bottom'
و آن را به صفر برمی‌گردانیم
و از آنجا که همین‌جا هستیم در واقع این را هم استایل می‌دهیم
پس 'font-size' ۱۴ پیکسل
و بسیاری از کارهایی که باید اینجا انجام دهیم
این است که برخی از تنظیمات قبلی را دوباره بازنشانی کنیم
برای مثال به دلایلی این bold است
پس آن را به حالت normal برمی‌گردانیم
پس 'font-weight' باید normal باشد
و حالا بیایید همه این‌ها را italic کنیم
و
صبر کنیم 27400:15:11,940... > 00 :15:14,760 بله این حالا بسیار خوب به نظر می‌رسد
بیایید سریع این لینک‌ها را هم استایل دهیم
و سپس وقتی تمام شد
کمی فاصله اضافه می‌کنیم
پس
این کار را همین‌جا انجام می‌دهیم
پس 'related-link'
و هرگز فراموش نکنیم که باید
از link pseudo-class استفاده کنیم
خوب
پس می‌گوییم 'font-size'
۱۷ پیکسل
یک باگ کوچک وجود دارد
سپس وزن فونت باید bold باشد
اما سبک فونت باید normal باشد
پس دوباره در ابتدای دوره
ما برخی استایل‌ها را نوشتیم که باعث شد
اولین عنصر bold و
آخرین عنصر italic باشد
و اینجا ما فقط آن را بازنشانی می‌کنیم
به جای اینکه برگردیم و کل کد را اصلاح کنیم
خوب حالا کمی بهتر به نظر می‌رسد
بیایید کمی margin اضافه کنیم
به پایین این anchor
پس 'margin-bottom' بگذارید ۵ پیکسل باشد
و این بار هم فقط برای نشان دادن چیزی است
چون واقعاً کار نکرده بود
پس دقیقاً همانطور به نظر می‌رسد
و می‌توانید حدس بزنید چرا این اتفاق می‌افتد؟
خب دلیلش این است که anchor
یادآوری: یک عنصر inline است
و بنابراین فاصله عمودی
مثل 'margin-bottom' و 'margin-top' اعمال نمی‌شود
پس برای رفع آن به سادگی نمایش آن را
به block تغییر می‌دهیم
و سپس این دیگر جابجا نمی‌شود
اما به هر حال حالا فاصله خوبی داریم درست است؟
و حالا فقط برای پایان کار بیایید این gap را اضافه کنیم
پس این فاصله است
پس چگونه می‌توانیم این کار را انجام دهیم؟
خب در واقع سه روش مختلف وجود دارد
پس می‌توانیم این تصویر را انتخاب کنیم
و سپس کمی فاصله به سمت راست اضافه کنیم
می‌توانیم این باکس را انتخاب کنیم که این دو عنصر را در خود دارد
یعنی این div و سپس کمی فاصله به سمت چپ اضافه کنیم
یا می‌توانیم از خاصیت دیگری استفاده کنیم
در flex container که قبلاً نشان دادم
که همان property gap است
و این شخصاً مورد علاقه من است
پس بیایید این کار را انجام دهیم
پس 'related-post' اینجا یادآوری: Flex container است
و می‌توانیم به راحتی ببینیم
چون همان عنصری است که display آن روی flex تنظیم شده
و سپس یک gap ۲۰ پیکسلی اضافه می‌کنیم
و
عالی این هم هست
تنها مشکل property gap
در Flexbox این است که فقط آخرین نسخه‌های.
Safari از آن پشتیبانی می‌کنند
پس روی Mac و Safari تا چند هفته پیش
'gap' در واقع پشتیبانی نمی‌شد اما حالا پشتیبانی می‌شود
پس شاید بتوانیم از آن استفاده کنیم
به‌خصوص اگر این آموزش را در آینده دور مشاهده می‌کنید
به هر حال حالا کمی margin هم اضافه می‌کنیم
اینجا به پایین ۳۰ پیکسل
تا کمی فاصله بین این عناصر ایجاد شود
و همچنین باید آن را از آخرین عنصر حذف کنیم
پس طبق معمول همه آن‌ها این را دریافت می‌کنند
خب در واقع این‌طور نیست
پس این عنصر 'margin-bottom' دارد این و این ندارد
پس فکر کنم قبلاً استایلی نوشته بودیم که این کار را انجام می‌داد
پس درست است جایی همه عناصر لیست را انتخاب کرده بودیم
و سپس 'last-child'
margin-bottom را صفر قرار دادیم
خوب
و این هم مشکل را برای ما در اینجا حل کرد
در این وضعیت هم
خوب
و در واقع فکر می‌کنم همین است
برای تبدیل بخش‌های کوچک صفحه به Flexbox
پس Flexbox کاملاً مناسب است
برای این layoutهای کوچک component که همین‌جا ساختیم
و ما بعداً این‌ها را با CSS grid جایگزین نمی‌کنیم
پس در عوض از Flexbox استفاده خواهیم کرد
و CSS grid با هم زمانی که لازم شد
اما بعد بالاخره همان layout را می‌سازیم
که قبلاً با floats انجام داده بودیم اما این بار با Flexbox
پس منتظر آن آموزش باشید