خب حالا که کمی بیشتر درباره Flexbox می‌دانیم
بیایید آن را در عمل هم استفاده کنیم
و در این درس کمی بیشتر یاد می‌گیریم
چطور آیتم‌های فلکس را تراز کنیم
و همچنین چطور بین آن‌ها فاصله ایجاد کنیم
امیدوارم که برگه راهنمای درس قبل را چاپ کرده باشید
ولی در هر صورت بیایید شروع کنیم
پس در اولین درس ما درباره Flexbox
قبلاً درباره این دو ویژگی صحبت کردیم
یعنی align-items و justify-content
که هر دو ویژگی برای کانتینر فلکس هستند
و حالا بعد از درس قبل
می‌دانیم که justify-content در اصل
برای تراز کردن آیتم‌ها در محور اصلی است
و این همان اینجا است درست است؟
و به طور پیش‌فرض این محور به صورت افقی است درست است؟
پس اگر آن را روی center بگذاریم می‌بینید
که آیتم‌ها به صورت افقی وسط چین شده‌اند درست است؟
و دوباره به طور پیش‌فرض محور اصلی همین است
یعنی در مسیری که الان ماوس را حرکت می‌دهم
بعد ویژگی align-items داریم که آیتم‌ها را
در محور عرضی تراز می‌کند که به طور پیش‌فرض عمودی است
و به همین دلیل اگر center بگذاریم
این عناصر به صورت عمودی وسط چین می‌شوند
و برای مثال اگر آن را روی flex-start بگذاریم
همه به بالای کانتینر منتقل می‌شوند
و دوباره همه چیز درباره تراز عمودی به طور پیش‌فرض است
حالا گفتم که می‌توانیم جهت این محورها را تغییر دهیم
ولی فعلاً بیشتر گیج نشویم
پس اینجا را روی center بگذاریم
و اینجا را روی پیش‌فرض یعنی flex-start
همینطور ساده است درست است؟
این‌ها دو تا از مهم‌ترین ویژگی‌ها هستند
که روی کانتینر فلکس اعمال می‌شوند و یکی دیگر gap است
ولی آن را برای پایان این درس می‌گذاریم
و حالا ادامه می‌دهیم درباره تراز آیتم‌ها
ولی این بار با استفاده از ویژگی align-self
که روی آیتم‌های فلکس اعمال می‌شود
پس در اصل استفاده از align-items روی کانتینر فلکس
باعث می‌شود همه آیتم‌های فلکس
همان تراز را داشته باشند
در این حالت همه به مرکز تراز شده‌اند
ولی در خیلی از موارد می‌خواهیم این را فقط برای یک عنصر تغییر دهیم
و برای این کار از ویژگی align-self استفاده می‌کنیم
پس برای مثال اولین عنصر را انتخاب می‌کنیم
این همان el... 1 است
و حالا فرض کنیم می‌خواهیم
این یکی به بالای کانتینر برود
پس می‌گوییم align-self
و مقادیر همانند قبل هستند
یعنی flex-start و با این کار فقط همین عنصر
به بالاترین قسمت منتقل شد
بیایید یکی دیگر را امتحان کنیم
برای مثال عنصر شماره چهار
و می‌گوییم align-self
این بار می‌خواهیم آن را stretch کنیم
پس stretch همان پیش‌فرض است اگر تعیین نکرده باشیم
فرضاً به صورت جهانی روی کانتینر فلکس درست است؟
و حالا این عنصر هم کشیده شده است
دقیقا مثل CSS اینجا
خوب حالا روی عنصر پنج
می‌گذاریم تا کمی فاصله بین آن‌ها ایجاد کنیم
پس حالا این یکی از بالا تا پایین کشیده می‌شود
و دوباره اگر ارتفاع این عنصر را تغییر دهیم
طبعاً ارتفاع عنصر صورتی هم
به حداکثر ممکن کشیده می‌شود
ولی آن را برمی‌گردانیم
و بله این یکی از مهم‌ترین
ویژگی‌هایی است که می‌توانیم روی آیتم‌های فلکس استفاده کنیم
حالا خیلی سریع هم درباره
ویژگی order صحبت می‌کنیم چون همینجا هستیم
تغییر ترتیب نمایش آیتم‌های فلکس
روی صفحه می‌تواند بسیار مفید باشد
وقتی می‌خواهیم یک طراحی بزرگ را
برای صفحه موبایل کوچک‌تر کنیم
مقدار پیش‌فرض همه عناصر همیشه صفر است
پس اگر بخواهیم یک عنصر
به اولین موقعیت برود کافی است
عددی کمتر از صفر به آن بدهیم
برای مثال عنصر شماره شش را امتحان کنیم
اینجا شماره شش جا افتاده است
و دوباره به طور پیش‌فرض order همه صفر است
پس ممکن است فکر کنید ترتیب
یکی بعد دو بعد سه چهار پنج شش هفت هشت است
ولی اینطور نیست
به طور پیش‌فرض همه صفر هستند
و اگر بخواهیم یکی را به اولین موقعیت ببریم
کافی است عددی کمتر از صفر بدهیم
مثلاً منفی یک
و حالا عنصر languages که شماره شش است
همانطور که می‌بینیم به جلو منتقل شد
در ابتدای ردیف
پس حالا اولین عنصر شد
و همینطور اگر بخواهیم
یک عنصر را به انتها ببریم
این روش کاربرد دارد
پس بیایید این یکی را امتحان کنیم.
و اگر مقداری بزرگ‌تر از صفر مشخص کنیم،
یعنی بزرگ‌تر از همه عناصر دیگر،
پس به سادگی به انتهای صف منتقل می‌شود.
و بنابراین آخرین عنصر خواهد شد.
و حالا این عنصر صورتی باید آخرین شود،
و واقعاً هم همینطور است.
و اگر بخواهیم عنصر دیگری را آخر کنیم،
مثلاً این یکی،
کافی است یک عدد دیگر بزرگ‌تر بدهیم.
مثلاً عدد ۲.
پس این همان عنصر است.
و حالا آن عنصر آخرین شده است.
خوب، اما بیایید آن را غیرفعال کنیم،
و بله، بقیه را می‌توانیم فقط برای سرگرمی نگه داریم.
پس این همان اصول اولیه تراز کردن است.
و این‌ها پایه‌های اصلی تراز کردن عناصر هستند.
در اینجا در justify-content
مقادیر دیگری هم وجود دارد که می‌توانید امتحان کنید.
و دوباره، همه آن‌ها در همان برگه راهنما هستند
که در پایان درس قبلی به شما نشان دادم.
اما برجسته‌ترین آن‌ها center است،
و می‌توان گفت space-between یا space-around،
همان‌طور که در اولین درس Flexbox نشان دادم.
عالی، پس حالا اصول تراز کردن عناصر را می‌دانیم،
چه به صورت عمودی و چه افقی.
و حالا کمی درباره
اضافه کردن فاصله بین آن‌ها صحبت کنیم.
ایجاد فاصله به صورت دستی، چون قبلاً دیدیم
چطور می‌توانیم از Flexbox برای ایجاد فاصله خودکار
بین عناصر فلکس با استفاده از justify-content استفاده کنیم، درست است؟
اما حالا درباره ایجاد فاصله دستی صحبت می‌کنم،
که در بسیاری از مواقع حتی مهم‌تر است.
در عمل، خیلی وقت‌ها ما علاقه‌مندیم
که فاصله بین عناصر فلکس را به صورت دستی تعریف کنیم.
و در حال حاضر دو روش برای این کار وجود دارد.
روش اصلی این بود که به سادگی margin اضافه کنیم
به آیتم‌های فلکس، مثل این.
پس اساساً همه عناصر را اینطور انتخاب می‌کنیم،
که همه هشت عنصر را انتخاب می‌کند،
و سپس می‌توانیم یک margin اضافه کنیم
به سمت راست، مثلاً ۴۰ پیکسل.
پس به آن فاصله بدهیم، شاید کمی کمتر از این مقدار.
خوب، و هنوز هم از کانتینر خارج می‌شود،
پس در واقع این دو عنصر آخر را حذف می‌کنیم،
که کمی کمک می‌کند.
و حالا کمی بهتر به نظر می‌رسد، می‌توانیم همچنین
اندازه فونت را کمی کوچک‌تر یا روی ۳۲ تنظیم کنیم.
و با این کار، اساساً ۳۰ پیکسل فاصله بین همه این عناصر ایجاد شد، درست است؟
با این حال، برای درست کردن این وضعیت،
باید margin سمت راست آخرین عنصر را حذف کنیم،
که کمی دردسر دارد.
پس این یک مرحله اضافی است،
و همچنین خیلی بهتر است که تعریف gap
بین این عناصر همین‌جا در کانتینر باشد.
پس اساساً همه تعریف‌ها را داریم
از اینکه آیتم‌های فلکس چگونه نمایش داده شوند
همان‌جا در عنصر کانتینر.
و دوباره، این واقعاً خیلی بهتر است.
ممکن است در این مرحله منطقی به نظر نرسد،
اما با تمرین خواهید دید
که این در واقع یک روش خوب است
و مفید است که همه این‌ها
در کانتینر فلکس باشند. 16600:09:30,810... > 00:09:34,770 و به همین دلیل یک ویژگی جدید به Flexbox اضافه شد،
که Gap نام دارد.
پس می‌توانیم اینجا آن را حذف کنیم،
و دوباره به ابتدای حالت اولیه برمی‌گردیم،
و سپس به سادگی ویژگی gap را اضافه کنیم
و آن را روی ۳۰ پیکسل تنظیم کنیم.
و تمام.
پس اساساً همان فاصله قبلی را داریم.
اما حالا این فاصله درست در کانتینر فلکس است.
و اگر آن را بررسی کنیم،
می‌بینیم هیچ‌کدام margin ندارند،
پس نیازی به حذف margin از آخرین عنصر نیست.
از آخرین عنصر نیست.
خوب، و فکر کنم این همه اصول تراز کردن و ایجاد فاصله است.
و همه این‌ها
به مرور واضح‌تر خواهد شد،
زمانی که از این جعبه‌های انتزاعی به
مثال واقعی یا پروژه برویم، درست است؟
اما فعلاً روی این دمو کوچک کار می‌کنیم،
و در درس بعد درباره
یکی از مهم‌ترین ویژگی‌ها صحبت خواهیم کرد،
که ویژگی flex است.
پس همراه باشید، و بعد از آن
بالاخره به پروژه خود برمیگردیم