آشنایی با Flexbox در CSS

آنچه یاد خواهید گرفت:

• درک مفاهیم اصلی پشت Flexbox در CSS
• اعمال ویژگی‌های Flexbox در کانتینرهای والد و آیتم‌های فرزند
• استفاده از ویژگی‌هایی مانند flex-direction و justify-content و align-items و غیره
• کنترل رفتار طرح‌بندی با flex-grow و flex-shrink و flex-basis
• یادگیری ریاضیات پشت نحوه توزیع فضا در Flexbox
• درک نحوه ساده‌سازی طراحی واکنش‌گرا با Flexbox
• استفاده از ویژگی‌های shorthand برای نوشتن CSS تمیز و کارآمد

پیش‌نیازهای دوره

• درک اولیه از HTML و CSS
• نیاز به یک مرورگر وب دارید. در اینجا از گوگل کروم استفاده می‌کنیم و گاهی اوقات از ابزارهای توسعه کروم بهره می‌بریم.
• نیاز به یک ویرایشگر کد دارید. در این دوره از ویژوال استودیو کد همراه با پلاگین Live Server استفاده می‌شود.

توضیحات دوره

این دوره طراحی شده تا بتوانید طرح‌بندی صفحات وب HTML خود را با استفاده از قدرت CSS Flexbox ارتقا دهید. Flexbox، مدلی از طرح‌بندی است که کنترل دقیق‌تری بر ترازبندی، فاصله‌گذاری و واکنش‌گرایی صفحات فراهم می‌کند.

در این دوره، نحوه عملکرد هر ویژگی Flexbox را از طریق نمایش‌های واضح آموزش می‌دهیم، که هم ویژگی‌های مربوط به کانتینر والد و هم ویژگی‌های آیتم‌های فرزند را در بر می‌گیرند.

ویژگی‌های اعمال شده روی کانتینر flex والد:

• flex-direction - تعیین جهت قرارگیری آیتم‌ها (سطری یا ستونی)
• flex-wrap - کنترل اینکه آیتم‌ها در یک خط باقی بمانند یا wrap شوند.
• flex-flow - ترکیب flex-direction و flex-wrap با یک shorthand
• justify-content - ترازبندی آیتم‌ها در طول محور اصلی (مثلاً چپ، وسط و space-around)
• align-items - ترازبندی آیتم‌ها در طول محور عرضی
• align-content - کنترل فاصله‌گذاری بین خطوط مختلف آیتم‌ها

ویژگی‌های اعمال شده روی آیتم‌های flex جداگانه:

• flex-basis - تعیین اندازه اولیه آیتم قبل از توزیع فضا
• flex-grow - توزیع فضای باقیمانده بین آیتم‌های flex
• flex-shrink - کنترل کوچک‌تر شدن آیتم‌ها در صورت محدود بودن فضا
• flex - یک shorthand برای تنظیم flex-grow و flex-shrink و flex-basis
• order - تغییر ترتیب ویژوال آیتم‌ها
• align-self - بررسی Override شدن ترازبندی برای یک آیتم خاص

برای درک عمیق‌تر، این دوره همچنین شامل مقالات پشتیبان است که مفهوم ریاضیات پایه‌ پشت نحوه توزیع و کاهش فضای flex-grow و flex-shrink در سناریوهای مختلف را توضیح می‌دهد.

در پایان دوره، نه تنها نحوه استفاده از Flexbox را درک می‌کنید، بلکه دلیل رفتار آن را هم خواهید فهمید، که اعتماد‌به‌نفس و کنترل بیشتری هنگام ایجاد طرح‌بندی‌های انعطاف‌پذیر به شما ارائه می‌دهد.

این دوره برای چه کسانی مناسب است؟

• مبتدیان کامل در CSS Flexbox
• توسعه‌دهندگانی که می‌خواهند درک عمیق‌تری از مفاهیم مرتبط با مدل طرح‌بندی Flexbox داشته باشند.
• توسعه‌دهندگانی که قصد دارند Flexbox را به عنوان مدل طرح‌بندی برای ساخت صفحات واکنش‌گرا به کار ببرند.