آموزش فلکس باکس (Flexbox) در 30 روز


آموزش Flexbox در CSS: شروع کار با باکس‌های منعطف

سلام دوستان! امیدوارم هرجا که هستید، حالتون عالی باشه و آماده‌ی یادگیری یکی از جذاب‌ترین مباحث CSS باشید. در این سری از پست‌ها، قصد داریم به بررسی Flexbox یا همان باکس‌های منعطف در CSS بپردازیم. این آموزش‌ها بر اساس مطالب و تصاویر ارزشمند مقاله‌ی آموزشی “آموزش Flexbox در 30 روز” نوشته‌ی Samantha Ming (با اجازه‌ی قبلی از ایشان) تهیه شده‌اند تا به شما کمک کنند سریع‌تر و راحت‌تر به Flexbox مسلط شوید و از آن در پروژه‌های خود استفاده کنید.



Flexbox چیست و چرا مهم است؟

Flexbox یا همان باکس‌های منعطف، یکی از مهم‌ترین ابزارهای CSS برای ایجاد Layout یا چیدمان صفحه است. قبل از ظهور Flexbox، چیدمان عناصر به‌ویژه چیدمان عمودی، کار بسیار دشواری بود و به قول خارجی‌ها “Tricky” محسوب می‌شد! طراحان مجبور بودند از ترفندهای مختلفی مثل استفاده از float یا position استفاده کنند که اغلب نتیجه‌ی مطلوبی نداشت و کدها را پیچیده می‌کرد. اما امروزه با وجود Flexbox (و البته در کنار ابزارهای دیگری مثل CSS Grid)، می‌توانیم به راحتی چیدمان‌های حرفه‌ای و واکنش‌گرا ایجاد کنیم.



کاربردهای Flexbox در CSS

Flexbox برای چه چیزهایی مناسب است؟ این ابزار قدرتمند به شما کمک می‌کند:

  • عناصر را در جهت‌های افقی یا عمودی تراز کنید.
  • فضاهای خالی بین عناصر را به صورت منعطف تقسیم کنید.
  • عناصر را درون یک کانتینر به صورت پویا تنظیم کنید، به‌طوری که اندازه‌ها بر اساس فضای موجود تغییر کنند.
  • چیدمان‌های واکنش‌گرا (Responsive) را بدون نیاز به کدهای اضافی پیاده‌سازی کنید.


شروع کار با Flexbox در CSS

برای شروع کار با Flexbox، کافی‌ست یک کانتینر Flex ایجاد کنید. این کار با تنظیم خاصیت display: flex; روی عنصر والد انجام می‌شود. به محض این کار، تمام عناصر فرزند داخل این کانتینر به آیتم‌های Flex تبدیل می‌شوند و رفتارشان بر اساس تنظیمات Flexbox تغییر می‌کند. به عنوان مثال، می‌توانید با استفاده از justify-content عناصر را در جهت اصلی (مثلاً افقی) تراز کنید یا با align-items آن‌ها را در جهت عمودی تنظیم نمایید.



چرا Flexbox را یاد بگیریم؟

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