بیایید حالا دقیقاً تعریف کنیم Flexbox چیست
و چه زمانی و چرا به آن نیاز داریم
و همین‌طور درباره برخی اصطلاحات مهم
در مورد Flexbox صحبت کنیم
و در نهایت یک نمای کلی هم داشته باشیم
از تمام ویژگی‌هایی که بخشی هستند
از مشخصات Flexbox
پس یک تعریف تک‌خطی از Flexbox این است که
مجموعه‌ای از ویژگی‌های مرتبط CSS است
که می‌توانیم برای ساختن لایه‌بندی‌های یک‌بعدی استفاده کنیم
وقتی Flexbox چند سال پیش توسعه یافت
ایده اصلی پشت آن
این بود که اساساً به مرورگرها اجازه دهد
فضای خالی داخل یک المان کانتینر
را به صورت خودکار بین عناصر فرزند آن تقسیم کنند
و با این کار مرورگر بخش بزرگی از کاری را برمی‌دارد
که قبلاً توسعه‌دهندگان وب مجبور بودند انجام دهند
مثل تعیین دستی با margin و
و چیزهایی شبیه به آن
تقریباً مثل همان‌طور که در آخرین تمرین کدنویسی‌مان انجام دادیم
پس با Flexbox همه این‌ها به صورت خودکار اتفاق می‌افتد
همچنین Flexbox هم‌ترازی آیتم‌ها با یکدیگر را
داخل یک کانتینر والد بسیار ساده می‌کند
و این موضوع هم به صورت افقی و هم عمودی صدق می‌کند
در واقع ما همین ویژگی را کمی در جلسه قبلی دیدیم درست است؟
و بنابراین Flexbox چندین مشکل رایج
در توسعه CSS را حل می‌کند
مثل وسط‌چین کردن عمودی
و همچنین ایجاد ستون‌های با ارتفاع برابر
این‌ها مشکلات سختی بودند
قبل از اینکه Flexbox معرفی شود
اما حالا با CSS مدرن
این‌ها بسیار ساده برای حل شدن هستند
و چون شما تازه دارید CSS را یاد می‌گیرید
با این تکنولوژی‌های مدرن
دیگر هیچ‌وقت سختی‌های گذشته را تجربه نخواهید کرد
پس از این بابت خودتان را خوش‌شانس بدانید
در واقع چیزی که من گفتم این بود که Flexbox جایگزینی عالی است
برای floatهای قدیمی
و با این کار به ما امکان می‌دهد کدهای HTML و CSS کمتر
و البته تمیزتر بنویسیم
که طبیعتاً باعث می‌شود نگهداری وب‌سایت‌ها
در طولانی‌مدت ساده‌تر شود و خطاهای کمتری رخ دهد
خب حالا که دقیقاً می‌دانیم Flexbox چیست
و چه مشکلاتی را حل می‌کند
بیایید کمی درباره برخی اصطلاحات مهم صحبت کنیم
واقعیت این است که مفاهیم زیادی
پشت Flexbox نیست که لازم باشد برای شروع یاد بگیرید
اما این مواردی هستند که باید بدانید
اول از همه عنصری که می‌خواهیم
روی آن Flexbox را اعمال کنیم
به نام Flex container شناخته می‌شود
همان‌طور که در جلسه قبل هم اشاره کردم
و تنها کاری که باید انجام دهیم تا یک Flex container بسازیم
این است که مقدار ویژگی display آن را flex بگذاریم
و همین!
این همان چیزی است که شروع کار با Flexbox است
وقتی این کار را انجام دهیم تمام فرزندان مستقیم
آن Flex container تبدیل می‌شوند به چیزی که به آن‌ها flex items می‌گوییم
و این نکته واقعاً مهم است که به خاطر بسپاریم
چون ویژگی‌های مختلفی
روی Flex container و روی Flex items اعمال می‌کنیم
جهتی که در آن این Flex items قرار می‌گیرند
اصلی به نام Main axis دارد
که با این فلش اینجا نمایش داده می‌شود
سپس محور عمود بر آن ساده‌تر بگوییم
Cross axis نام دارد
و دانستن این نام‌ها مهم است
چون می‌توانیم جهت محور اصلی (Main axis) را تغییر دهیم
و بنابراین محور عمودی (Cross axis) هم تغییر می‌کند
همچنین می‌توانیم عناصر را در امتداد محور اصلی
و در امتداد محور متقاطع (Cross axis)
به روش‌های مختلف هم‌تراز کنیم
به همین دلیل همیشه باید بدانیم با کدام محور
داریم کار می‌کنیم
پس سعی کنید این مفاهیم را به خاطر بسپارید
تا بتوانید کاملاً متوجه شوید که ویژگی‌های مرتبط با Flexbox
چطور عمل می‌کنند
در واقع این همان چیزی است که در ادامه به آن می‌پردازیم
خب در این اسلاید
قبل از اینکه به بخش عملی برویم
می‌خواهم یک نمای کلی از تمام ویژگی‌های CSS به شما نشان دهم
که بخشی از مشخصات Flexbox هستند
هم برای Flex container و هم برای Flex items
پس برای Flex container مهم‌ترین‌ها عبارتند از gap
ویژگی justify-content و ویژگی align-items
در واقع ما همین حالا درباره دو تای آن‌ها در جلسه قبل صحبت کردیم درست است؟
خب من قصد ندارم اینجا وارد جزئیات شوم
فقط بدانید که اولین مقداری که به صورت bold نمایش داده شده
مقدار پیش‌فرض است
و سایر مقادیر گزینه‌هایی هستند که می‌توانیم تعیین کنیم
و همچنین یک توضیح خیلی کوتاه
برای هر یک از ویژگی‌ها آورده شده است
امید من این است که شما بتوانید از این اسلاید
به عنوان یک مرجع استفاده کنید
و هر زمان که نیاز داشتید سریع مرور کنید
این کمک می‌کند تا درک‌تان از Flexbox
روشن‌تر و قوی‌تر شود
و بتوانید سریع‌تر آن را در عمل پیاده کنید
پس امیدوارم بتوانید از این اسلاید بهره‌ی خوبی ببرید
نوعی راهنمای خلاصه (چیت‌شیت)
برای پرینت گرفتن
یا گرفتن اسکرین‌شات
که همیشه دم دست داشته باشید
وقتی با Flexbox کار می‌کنید
من واقعاً در ابتدای کار همین کار را کردم
وقتی شروع به یادگیری Flexbox کردم
و واقعاً خیلی به من کمک کرد
چون در واقع غیرممکن است که همیشه تمام
این ویژگی‌ها را از حفظ بدانید
و دقیقاً هم بدانید که چه کاری انجام می‌دهند
پس دوباره می‌گویم فکر می‌کنم ایده‌ی خوبی است
که آن اسلاید را پرینت بگیرید
و به‌عنوان یک راهنمای خلاصه نگه دارید
در کنار کیبوردتان
یا هر چیزی که در فضای کاری‌تان استفاده می‌کنید
به هر حال ۳ ویژگی دیگر وجود دارد
که می‌توانیم روی عنصر flex container اعمال کنیم
که عبارت‌اند از: Flex-direction flex-wrap و align-content
و در واقع بعضی از این‌ها
به‌ویژه شماره ۵ و ۶
برای تکنیک‌های پیشرفته Flexbox استفاده می‌شوند
که ما در این دوره بررسی نمی‌کنیم
چون فکر می‌کنم برای مبتدی‌ها کمی گیج‌کننده هستند
پس در این دوره که بیشتر یک دوره مقدماتی CSS است
هدف من این است که شما واقعاً اصول پایه را بفهمید
و بتوانید آن‌ها را خودتان به‌کار ببرید
و با همین اصول پایه
باور کنید می‌توانید ۹۹٪
از تمام سناریوهای رایج را حل کنید
اما حالا کمی جلوتر می‌رویم به ویژگی‌هایی که می‌توانیم
روی خود flex itemها اعمال کنیم
یکی از آن‌ها align-self است
که خیلی مهم است
چون در واقع می‌تواند ویژگی align-items
را بازنویسی (override) کند
بعد این ویژگی‌های دیگر را داریم: Flex-grow
flex-shrink flex-basis و این سه تا با هم
پس ۲۳ و ۴ با هم ویژگی flex را تشکیل می‌دهند
همان‌طور که پایین شماره ۵ می‌بینید
flex شورت‌هند (shorthand) پیشنهادی است
برای flex-grow flex-shrink و flex-basis
خب؟ و دوباره ما
کمی بعدتر در این بخش به سراغ آن‌ها می‌رویم
وقتی که واقعاً بتوانیم آن‌ها را در عمل استفاده کنیم
در نهایت ویژگی order هم وجود دارد
که می‌توانیم از آن استفاده کنیم تا ترتیب نمایش
flex itemها را در صفحه تغییر دهیم
بدون این‌که ترتیبشان در سورس‌کد تغییر کند
خب اما دیگه بس است حالا برگردیم به کدنویسی
و شروع کنیم به یادگیری این یکی یکی ویژگی‌ها