دوباره خوش اومدید
خب من بارها از فِلِکس‌باکس (Flexbox) اسم بردم
اما حالا بالاخره وقتشه که برای اولین بار ازش استفاده کنیم
به صورت واقعی
قبل از اینکه توضیح بدم فِلِکس‌باکس دقیقاً چیه
و چطور کار می‌کنه می‌خوام اول
یه مقدار به صورت عملی ازش استفاده کنیم
تا با اصول پایه‌ای فِلِکس‌باکس آشنا بشیم
در واقع زمینه‌ی این پروژه برای یادگیری ایده‌آل نیست
پس کمی به صورت جداگانه یادش می‌گیریم
خب الان شما به چندتا فایل نیاز دارید
که توی فایل‌های شروع این بخش هستن
بیاید بریم اینجا
یادتون باشه این همون پوشه‌ایه که از گیت‌هاب دانلود کردیم
و بعدش اینجا توی پوشه‌ی فایل‌های شروع همین بخش
پس CSS layouts
فایل flexboxhtml رو بردارید
و همینطور فایل css-gridhtml
و بعد کپی‌شون کنید
داخل پوشه‌ای که الان دارید توش کار می‌کنید
برای من این پوشه روی دسکتاپ هست
این یکی
پس بذاریدشون اینجا
و مطمئن بشید که واقعاً داخل
پوشه‌ای باشه که الان توی VS Code دارید کار می‌کنید
وگرنه هیچ‌کدوم از چیزایی که نشون می‌دم کار نمی‌کنه
حالا اگه بریم سمت نوار کناری
اینجا می‌بینیم که فایل flexboxhtml اضافه شده
این در واقع یه فایل شروعه
تا بتونیم خیلی سریع فقط اصول پایه‌ای
فِلِکس‌باکس رو جداگانه یاد بگیریم
خب
برای اینکه بتونیم توی مرورگر بهشون دسترسی پیدا کنیم
بیاید دوباره برگردیم به indexhtml
که همین صفحه‌ایه که اینجاست درسته؟
و بعد بالای صفحه توی منو
یادتونه که ما چندتا لینک اونجا تنظیم کرده بودیم
یکی‌ش نوشته Flexbox و CSS Grid
خب من الان همین HTMLها رو به اون لینک‌ها وصل می‌کنم
فعلاً این لینک به جایی وصل نیست
ولی الان می‌خوام ببرمش به flexboxhtml
و همین کارو هم برای CSS Grid انجام می‌دم
خب حالا اگه بیایم اینجا
روی Flexbox کلیک کنیم
می‌ره به همون فایل flexboxhtml که مشخص کردیم
پس همچنان اینجاست
و بعدش /flexboxhtml
خوبه
این دوباره همون فایله که اینجاست
اینجا یه کد شروع دارم
در اصل یه المان کانتینر (container) داریم که شامل
هشت المان مختلفه
و هرکدوم یه رنگ پس‌زمینه متفاوت دارن
که من بالا تعریف کردم
خب
حالا بیاید اینجا
روی این المان به اسم container
و شروع کنیم به استفاده از Flexbox
و واقعاً خیلی ساده‌ست
تنها کاری که برای شروع باید بکنیم
اینه که ویژگی display رو استفاده کنیم
و روی flex تنظیمش کنیم برای یه المان کانتینر
و منظورم از المان کانتینر
هر المانیه که چندتا المان فرزند داخلش داشته باشه
مثل همین یکی اما
البته می‌تونه هر اسم دیگه‌ای هم داشته باشه
خب ما قبلاً ویژگی display رو می‌شناختیم
ولی الان یه مقدار جدید یاد گرفتیم
و دوباره می‌گم این مقداریه که باید
به flex تنظیمش کنیم
یه بار ذخیره کنید و ببینیم چی می‌شه
بلافاصله ظاهر تغییر کرد درسته؟
حالا همه‌ی این المان‌ها کنار هم قرار گرفتن
بدون اینکه مجبور باشیم از float یا چیز دیگه‌ای استفاده کنیم
و این المان‌ها رو ما آیتم‌های فِلِکس (flex items) می‌نامیم
چون فرزندهای کانتینر فِلِکس هستن
پس دوباره این المان می‌شه کانتینر فِلِکس (flex container)
و این هشت فرزند می‌شن آیتم‌های فِلِکس
خوبه؟
اینجا هر کدوم از این المان‌ها دقیقاً
به اندازه‌ی محتوای متن خودشون فضا می‌گیرن
و می‌بینید
که در واقع اینجا فضای کافی نداریم
پس بیاید کمی فضای بیشتری بدیم
یه چیزی مثل این
یا شاید برای راحت‌تر شدن
بتونیم متن رو کمی کوچیک‌تر کنیم
و حالا می‌بینید که هرکدوم
از آیتم‌های فِلِکس فضای خیلی کمتری نیاز دارن
راستی این فضای خاکستری که اینجا بعد از آخرین آیتم می‌بینید
در واقع رنگ پس‌زمینه‌ی باقی مونده‌ی کانتینر خالیه
پس همون رنگ این قسمت اینجاست
این رنگ اینجاست
خب
ببینیم الان فضای کافی داریم یا نه
آره خوب به نظر میاد
میشه یکم بیشترش هم کرد مثلاً ۳۴
و آره حالا همه‌چی خوبه
دوباره می‌گم به صورت افقی هر کدوم از این المان‌ها دقیقاً
به اندازه‌ی محتوای متنی خودشون فضا اشغال می‌کنن::: Writing id="99822" variant="standard" title="ترجمه خط به خط با حفظ تایم‌کدها (خطوط 101 تا 183)">
اما در حالت عمودی کمی متفاوت است
پس به‌صورت پیش‌فرض در حالت عمودی
همه‌ی آیتم‌های فلکس به اندازه بلندترین عنصر ارتفاع می‌گیرند
که در این حالت ۱۵۰ پیکسل است
چون ما این سومی را تنظیم کرده‌ایم
پس عنصر سبز با ارتفاع ۱۵۰ پیکسل
و اگر این را تغییر دهیم به ۲۵۰
می‌بینید که همه‌ی آن‌ها بلندتر می‌شوند
و اگر این کلاً وجود نداشت در نهایت
همه‌ی آن‌ها فقط ارتفاعی می‌گرفتند
که صرفاً فضای لازم برای محتوای خودشان باشد
اما بیایید این را دوباره برگردانیم
چون می‌تواند برای نمایش چند مورد مختلف مفید باشد
چیزهای مختلف
پس برای نشان دادن اینکه فلکس‌باکس چقدر قدرتمند است
اجازه دهید به شما یکی از
کاربردی‌ترین ویژگی‌های آن را نشان دهم
که همان مرکز کردن عمودی است
پس برای اینکه همه‌ی این آیتم‌ها عمودی وسط‌چین شوند
فقط کافی است بگوییم
align
items,
و سپس center حالا ببینیم چه می‌شود
و واقعاً حالا آن‌ها عمودی در مرکز قرار گرفتند
دقیقاً همانطور که انتظار داشتیم
پس کانتینر فلکس هنوز هم ارتفاع
بلندترین عنصر را دارد
که همچنان همان ۱۵۰ پیکسل است
اما حالا بقیه فقط فضایی می‌گیرند
که برای متن یا به طور کلی محتوا نیاز دارند
و سپس در مرکز عمودی تراز می‌شوند
بیایید یک مورد دیگر را امتحان کنیم
برای قرار دادن آن‌ها در ابتدای بالا
از flex-start استفاده می‌کنیم و برای پایین بردنشان
از flex-end استفاده می‌کنیم
خیلی خب و به صورت پیش‌فرض
مقدار align-items برابر stretch است
و حالا دقیقاً همان نتیجه‌ای را می‌بینیم
که در ابتدا داشتیم
پس stretch اساساً یعنی همه‌ی عناصر
به طور خودکار تا ارتفاع بلندترین عنصر کشیده می‌شوند
خیلی خب اما بیایید دوباره آن را روی center بگذاریم
چون این یکی از مهم‌ترین کاربردهای
Flexbox است
تصور کنید چقدر سخت بود اگر می‌خواستیم این کار را
بدون Flexbox انجام دهیم
باید تک‌تک این عناصر را دستی انتخاب می‌کردیم
به جز سبز و بعد سعی می‌کردیم
یک مقدار margin بالا حدس بزنیم تا آن‌ها
به نظر بیایند که در مرکز تراز شده‌اند
اما اینجا همه‌چیز به‌طور خودکار انجام می‌شود
و البته می‌توانیم آن‌ها را افقی هم وسط‌چین کنیم
پس اساساً همه‌ی این آیتم‌ها را درون
فلکس کانتینر مرکز کنیم
این کار را با justify-content انجام می‌دهیم
و آن را روی center تنظیم می‌کنیم
و می‌بینید که حالا فضای این طرف و آن طرف یکسان است
و در آن طرف هم همینطور
و این یعنی حالا آن‌ها درون کانتینر
وسط‌چین شده‌اند
اما در واقع این ویژگی
یعنی justify-content
که بخشی از مشخصات Flexbox است
چند گزینه‌ی دیگر خیلی مفید و خوب هم
به ما می‌دهد
مثلاً می‌توانیم بگوییم space-between
و ببینیم چه اتفاقی می‌افتد
پس می‌بینید که اساساً فضای باقی‌مانده حالا
به‌طور مساوی بین همه‌ی این عناصر پخش شده است
پس اساساً حالا فضایی دارند
که بین همه‌ی آن‌ها برابر است
پس اینجا و اینجا و اینجا می‌بینید
و واقعاً در همه جا دقیقاً یکسان است
و در واقع خیلی عمیق‌تر خواهیم رفت
داخل همه‌ی این ویژگی‌ها
و البته ویژگی‌های بیشتری هم هستند
اما فعلاً فقط می‌خواستم یک مرور خیلی سریع به شما بدهم
از اینکه چطور می‌توانیم شروع کنیم به استفاده از Flexbox
پس شاید و امیدوارم
شما شروع کرده باشید به دیدن اینکه چقدر قدرتمند است
و حالا که اصول اولیه را می‌دانیم
بیایید یک نمای کلی داشته باشیم
از همه‌ی ویژگی‌هایی که بخشی از
مشخصات Flexbox در درس بعدی هستند