وقتشه که مهارت‌های جدید Flexbox خودت رو تمرین کنی
در چالش کدنویسی شماره دو این بخش
و یک بار دیگه
من از قبل کدهای چالش قبلی رو دارم
که ازش به عنوان نقطه شروع برای این چالش استفاده می‌کنیم
و مثل همیشه لینک
به این کد رو می‌تونی جایی در این جلسه پیدا کنی
خوب کاری که حالا انجام می‌دیم
اساساً جایگزین کردن float هاست
و انجام همه چیز با Flexbox
پس کاری که می‌خوام انجام بدی اینه که از Flexbox استفاده کنی
در این موقعیت
همچنین حالا واقعاً می‌تونی از Flexbox استفاده کنی
قبلاً از ترفند display به صورت inline-block استفاده می‌کردیم ولی حالا بیایید اون رو
به Flexbox تغییر بدیم تا کمی بیشتر تمرین کنی
و در نهایت
می‌خوام کل این طرح‌بندی رو بسازی
پس این سه عنصر رو
کنار هم قرار بده با استفاده از Flexbox دوباره
و در این حالت
من واقعاً نمی‌خوام عرض رو مشخص کنی
یا فضاهای Flex این دو ستون رو بذار ببینیم چقدره
پس ۲۴۳
پس یادت باشه
پس دوباره فعلاً نمی‌خوام عرض رو مشخص کنی
یا فضاهای Flex این دو ستون رو به صورت دستی
در عوض باید اجازه بدی Flexbox
عرض این دو ستون رو خودش محاسبه کنه
باشه؟ پس با توجه به هر چیزی که یاد گرفتی
در چند ویدیوی گذشته
امیدوارم از حل این چالش لذت ببری
و وقتی تموم شد دوباره اینجا می‌بینمت
خوب وقتی تمام شد به من برگرد
خوش برگشتی
و امیدوارم که این چالش رو با موفقیت انجام دادی
خب این هم نحوه انجام من
پس از اینجا با این قیمت شروع می‌کنیم
و برچسب ارسال رایگان مثل همیشه
اولین سوال اینه که
کدوم عنصر باید Flex container باشه؟
خب بیایید در مارک‌آپ خودمون ببینیم
اینجا قیمت و ارسال هست
و فعلاً فکر کنم ما هیچ
Flex container مناسبی نداریم درسته؟
چون ما فقط می‌خوایم این دو عنصر
Flex items باشن ولی اون‌ها کلی هم‌تراز دیگه هم دارن
که داخل همون div قرار دارن
یعنی داخل همون container
پس کاری که باید انجام بدیم اینه که این دو تا رو
داخل یک عنصر container جدید قرار بدیم
پس div class
و این یکی رو بزاریم product-price صدا کنیم
باشه؟
و بعد از این دو اون رو می‌بندیم
خوب اسم کلاسمون رو اینجا کپی کنیم
و بعد همینجا استفاده کنیم
پس اول از همه
بیایید اون float ها رو لغو کنیم
و این یکی هم
و همچنین این margin-top که به صورت دستی گذاشتیم
حالا دیگه نیازی به اون نیست درست است؟
و همچنین یه clear داشتیم جایی
آه بله همینجا
پس این یکی هم دیگه لازم نیست
و حالا باید خیلی ساده باشه
پس product-price
که عنصریه که این دو تا رو در خودش داره
نباید کل container Flex بشه
پس display: Flex
و بلافاصله کنار هم قرار می‌گیرن
بعد می‌خوایم هر کدوم رو
به یکی از سمت‌ها هل بدیم درست؟
و برای این کار می‌تونیم از همون ترفندی استفاده کنیم
که برای heading و navigation در هدر سایت استفاده کردیم
و اون هم استفاده از justify-content بود
و بعد space-between
و تمام
و حالا در نهایت باید این دو تا رو عمودی هم تراز کنیم
چون اون ۸ پیکسل که داشتیم رو حذف کردیم
پس حالا دوباره
بیایید این کار رو خودکار انجام بدیم
با استفاده از align-items و تنظیمش روی center
خب چیزی اینجا عجیب به نظر میاد
بیایید بررسی کنیم
شاید یه padding یا margin اضافی باشه
آه بله واقعاً هست
پس اینجا shipping یه margin پایین داره
و اگر اون رو حذف کنیم
ظاهرش طبیعی می‌شه درست؟
پس حالا می‌بینی این منطقیه
پس اون رو از کدمون حذف کنیم
و شاید روی همین Flex container قرار بدیم
پس بله همینجا
بیایید از اینجا حذفش کنیم
و همینجا قرار بدیم
باشه عالی
پس حالا منطقی‌تره
و معمولاً با این مشکل مواجه نمی‌شیم
چون معمولاً فقط کدنویسی می‌کنیم
و کارها رو دستی تنظیم نمی‌کنیم
از صفر شروع می‌کنیم و با چیزی که قبلاً
نوشتیم کاری نداریم
خب حالا وقتشه از فلکس‌باکس روی این بخش‌ها استفاده کنیم
که باید حتی ساده‌تر هم باشه
بذار ببینیم
اینجا رنگ‌ها رو داریم
پس رنگ در واقع هرکدوم از این شش المانه
بنابراین فلکس‌container باید والد اینا باشه
بذار ببینیم اینجا چی داریم
اینجا رنگ‌ها رو داریم
و بذار اسمشون رو بذاریم product-colors
دقیقاً مثل بقیه المان‌ها
مثل product-price و product-description
پس بذاریمشون product-colors
خب اینو اینجا بیاریم
و برای شروع بیایم این استایل رو از اینجا حذف کنیم
حالا دوباره بلاک المنت شدن
و هرکدوم کل خط رو گرفتن
ولی الان والد رو فلکس می‌کنیم
و حالا اینا فلکس آیتم شدن و کنار هم نشستن
درسته؟
بعلاوه می‌تونیم اینو بهتر هم کنیم
چون حالا می‌تونیم مارجین رو از هرکدوم حذف کنیم
و به جاش از ویژگی gap استفاده کنیم
اینطوری تعریف نحوه چیدمان
همه‌اش تو فلکس‌container انجام میشه
که باعث میشه کدمون خیلی قابل فهم‌تر بشه
خب ۱۰ پیکسل
و همین شد
عالیه حالا فقط باید فلکس‌باکس رو اعمال کنیم
روی این لایه‌بندی هم
یعنی لایه‌بندی این سه ستون
الان هرکدومشون یه عرض مشخص دارن
که دستی تعریف کردیم
و فلوت هم دارن
ولی بیایم اینو خاموش کنیم با دستور کامنت
یا کنترل اسلش و فلوت رو حذف کنیم
همین کار رو برای اون container دیگه هم بکنیم
که اسمش هست product-details
همه اون استایل‌ها رو از اینجا حذف کنیم
و حالا طبیعیه که ظاهرش بهم ریخته شده
و هنوز روی عکس فلوت داریم
پس اونم حذف کنیم
بله همینجاست
و حالا در واقع کل لایه‌بندی رو از دست دادیم
ولی خب خیلی راحت میشه دوباره برش گردوند
یادتونه تو جلسه قبل
یا در واقع توی آخرین چالش
ما یه container ساختیم؟
همین containerه
که هم عکس رو داره هم ستون اطلاعات محصول رو
پس اینجا و همینطور بخش جزئیات محصول
خب این منطقیه که فلکس‌container ما باشه درسته؟
پس display: Flex می‌زنیم و تمام
حالا این المان‌ها دوباره
کنار هم قرار گرفتن و فقط لازمه
به این دوتا عرض مساوی بدیم
قبلاً این کارو دستی می‌کردیم
با تعریف یه مقدار مشخص ولی حالا
که فلکس‌باکس داریم میشه خیلی بهتر عمل کرد
کاری که باید بکنیم اینه که خاصیت flex رو بذاریم
روی یک برای این المان
یعنی تا جایی که میشه بزرگ میشه
ولی این وقتی معنا پیدا می‌کنه که برای اون یکی هم همینو بدیم
یعنی product-details
پس اینو هم بزنیم
دوباره flex: 1 و حالا
چون هر دو مقدار یک دارن
باید دقیقاً هم‌اندازه باشن
و به نظر همینطوره
بذار چک کنیم
خب product-info داریم ۲۴۳۵
و این یکی هم ۲۴۳۵ هست
پس دقیقاً برابرن
و همه اینا به لطف قدرت فلکس‌باکس
بدون اینکه بخوایم خودمون دستی
این عرض‌ها رو حساب کنیم
که یادتونه یه مقدار دردسرساز بود
و کلی کار بی‌خود اضافه داشت
خب پس در واقع کارمون همین‌جا تمومه
ولی بذار یه کم بهترش کنیم
الان داریم این فاصله‌ها رو تعریف می‌کنیم
اینجا و اینجا با استفاده از margin
یعنی margin-right روی product-info
و margin-right روی product-image
ولی اگه یه روزی بخوایم اینو تغییر بدیم چی؟
باید بریم دنبالشون تو همه المان‌ها
و یکی یکی دستی تغییرشون بدیم
که خب این کار اصلاً درست نیست
پس بهتره اینا رو از اینجا حذف کنیم
یعنی دیگه margin-right نداریم
و اینجا هم همینطور
حالا می‌تونیم فاصله رو با gap مشخص کنیم
یعنی همین ۴۰ پیکسل رو روی فلکس‌container بذاریم
اینجا دوباره با خاصیت gap انجامش می‌دیم
و اینجوری کد خیلی تمیزتر میشه
خیلی بهتر و راحت‌تر برای کار کردن
حالا به نظر یه چیزی فرق کرده
بیایم دوباره بررسی کنیم
انگار این ستون یه مقدار کوچیک‌تر شده پس بررسی کنیم
آره در واقع این یکی ۲۲۳ شده
و اون یکی هم کوچیک‌تر شده
خب بیایم ببینیم اینجا چه خبره
یه ترفند خوب توی DevTools هست
که می‌تونیم استفاده کنیم برای فهمیدن
چی داره توی Flexbox اتفاق میفته
اونم اینه که ماوس رو ببریم روی Flex container
حتی می‌تونیم اینجا کلیک کنیم
که یه اوورلی قشنگ بهمون نشون میده با فاصله‌ها (gaps)
و همینطور کل Flex container و Flex itemها
الان چیزی که من می‌بینم اینه که
یه فاصله اضافه اینجا ساخته شده
آخرش جایی که نباید باشه
می‌بینم دلیلش اینه که
یه pseudo-element اینجا آخرش هست
پس Flexbox اینو مثل یه المنت واقعی می‌بینه
و براش یه فاصله دیگه می‌ذاره
حتی با اینکه ما آخرش معمولاً اینو نمی‌خوایم
ولی خب الان طوریه که انگار
این pseudo-element آخرین المنته
واسه همین Flexbox یه فاصله اضافه بین این دوتا درست کرده
این مشکل هم دوباره به خاطر یه کد قدیمی پیش اومده
که همون clearfix معروفه
یادتونه؟ clearfix
میاد یه pseudo-element درست می‌کنه
که ما اینجا دیگه نمی‌خوایمش
خب پس درست شد
همه‌چی برگشت به حالت عادی
و با این حساب این چالش هم تموم شد
و در واقع این بخش مقدماتی Flexbox هم
به پایان رسید
خب از اینجا به بعد می‌ریم سراغ CSS Grid
ولی قبل از اینکه برید اون بخش
مطمئن بشید که Flexbox رو کامل کامل فهمیدید
یا حداقل اون پراپرتی‌هایی که من تو این چند جلسه نشون دادم
اگه هنوز حسابی گیج هستید توی Flexbox
نباید برید سراغ CSS Grid
چون اون وقت دیگه بیشتر قاطی می‌کنید
چون این دوتا یه جورایی شبیه‌ان
پس خیلی بیشتر گیج می‌شید
اگه هنوز پایه‌های Flexbox رو خوب نگرفتید
اگه اینطوره
سعی کنید خودتون پروژه کوچیک بسازید
و کد بزنید به صورت مستقل
تا این مفاهیم رو بیشتر تمرین کنید
واقعاً نمی‌تونم به اندازه کافی تاکید کنم
که نباید همین‌جوری برید جلو
بدون اینکه این پایه‌های Flexbox رو درست فهمیده باشید
باشه؟ امیدوارم این واضح بوده باشه
و وقتی واقعاً آماده شدید برای قدم بعد
بریم سراغ بخش CSS Grid این دوره کنم تا راحت بذاری روی ویدیو؟