آموزش جامع فلکس باکس (Flex Box) – سایت تیمی

فلکس باکس چیست؟

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

فلکس باکس عمدتاً برای ساختن CSS3 استفاده می‌شود که بتواند عرض و ارتفاع اقلام خود را به بهترین شکل برای همه فضاهای موجود تغییر دهد و این مدل بر مدل بلوک ترجیح داده می‌شود. در دوره آموزش فلکس باکس ما با جنبه‌های مختلف این طرح‌بندی آشنا خواهیم شده و به‌صورت پروژه محور آن را به کارخواهیم برد.

مزایای فلکس باکس

همان‌طور که گفتیم فلکس باکس یک الگوی چیدمان یک‌بعدی است که طراحی پوسته‌های انعطاف‌پذیر و مؤثر را آسان می‌کند. استفاده از flexbox تضمین می‌کند که عناصر به‌درستی قرارگرفته و قابل پیش‌بینی هستند. اقلام فلکس در داخل یک کانتینر فلکس در امتداد یک خط فلکس قرار می‌گیرند. به‌طور پیش‌فرض، تنها یک خط انعطاف‌پذیر در هر کانتینر فلکس وجود دارد.

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

ویژگی‌های فلکس باکس

فلکس باکس ویژگی‌های زیاد و منحصربه‌فردی دارد که ازجمله مهم‌ترین آن‌ها می‌توان به موارد زیر اشاره کرد:

• انعطاف‌پذیری زیادی داده می‌شود.
• قابلیت چیدمان اقلام
• فاصله‌گذاری مناسب
• ترتیب و ترتیب اقلام
• ساخت Bootstrap 4 در بالای طرح انعطاف‌پذیر

قبل از مدل flexbox، ما 4 حالت چیدمان داشتیم:

• Block: برای ایجاد بخش در صفحات وب استفاده می‌شود.
• Inline: برای متن استفاده می‌شود.
• table: برای داده‌های جدول دوبعدی استفاده می‌شود.
• Positioned: برای موقعیت صریح یک عنصر استفاده می‌شود.

2 جزء اصلی Flexbox وجود دارد:

• کانتینر فلکس: به دیو اصلی که شامل بخش‌های مختلف است، فلکس کانتینر می‌گویند.
• آیتم فلکس: آیتم داخل کانتینر “div” آیتم‌های انعطاف‌پذیر هستند.

در دوره آموزش فلکس باکس به‌صورت تخصصی این موارد پوشش داده‌شده است.

مبانی و اصطلاحات دوره آموزش فلکس باکس

برای دوره آموزش فلکس باکس لازم است که قبل از دیدن دوره و به‌عنوان یک پیش‌نیاز با اصلاحات رایج در آن آشنا شوید. پس بیایید خود را با اصطلاحات اساسی که در فلکس باکس رایج است آشنا کنیم.

• محور اصلی یا main-axis: محور اصلی، محور اولیه کانتینر فلکس است که در امتداد آن آیتم فلکس تراز می‌شوند.
• main-start| main-end: آیتم انعطاف‌پذیر در داخل کانتینر قرار می‌گیرند یا تنظیم می‌شوند که از شروع اصلی شروع می‌شود و تا انتهای اصلی می‌رود.
• محور متقاطع یا cross-axis: محور متقاطع به محور عمود بر محور اصلی گفته می‌شود و جهت آن به جهت محور اصلی بستگی دارد.

خواص فلکس باکس

فلکس باکس خواص زیادی دارد که از مهم‌ترین آن‌ها می‌توان به موارد زیر اشاره کرد:

• display: برای تعیین نوع کادر مورداستفاده برای یک عنصر html استفاده می‌شود.
• flex-direction: هنگامی‌که آیتم‌ها از تمام فضای موجود در محور اصلی استفاده نمی‌کنند، برای تراز کردن آیتم‌های انعطاف‌پذیر به‌صورت افقی استفاده می‌شود.
• align-items: هنگامی‌که آیتم‌ها از تمام فضای موجود در محور اصلی استفاده نمی‌کنند، برای تراز کردن آیتم‌های انعطاف‌پذیر به‌صورت افقی استفاده می‌شود.
• flex-wrap: مشخص می‌کند که آیا آیتم‌های فلکس باید بسته شوند یا نه اگر فضای کافی برای آن‌ها در یک خط فلکس وجود ندارد.
• align-content: برای اصلاح رفتار ویژگی flex-wrap استفاده می‌شود. شبیه آیتم‌های align است، اما به‌جای تراز کردن آیتم‌های انعطاف‌پذیر، خطوط انعطاف‌پذیر را تراز می‌کند.
• flex-flow: یک ویژگی مختصر برای flex-direction و flex-wrap مشخص می‌کند.
• Order: ترتیب یک آیتم انعطاف‌پذیر را نسبت به بقیه اقلام انعطاف‌پذیر داخل همان کانتینر مشخص می‌کند.
• align-self: در موارد فلکس استفاده می‌شود. ویژگی align-item کانتینر را لغو می‌کند.
• Flex: طول یک آیتم فلکس را نسبت به بقیه اقلام یا آیتمهای انعطاف‌پذیر داخل همان کانتینر مشخص می‌کند.
  به کمک فلکس باکس می‌توان طرح‌های بسیار سفارشی را ایجاد کرد که تا زمانی که آن را در پروژه‌های خود به کار نبریم درک دقیقی از آن پیدا نخواهیم کرد.

آموزش جامع فلکس باکس (Flex Box)

یکی از بهترین دوره‌های آموزش فلکس باکس به زبان فارسی دوره فلکس باکس سایت تیمی است که به‌صورت تخصصی و با زبانی شیوا و رسا به تفهیم مسائل مربوط به فلکس باکس می‌پردازد.

در دوره آموزش فلکس باکس شما کار با جنبه‌های مختلف این نوع طرح‌بندی را یاد خواهید گرفت. همچنین برخی از ویژگی‌های flexbox را که در کار با عناصر flex مفید هستند و نحوه استفاده از آن‌ها برای دستیابی به نتایج مختلف در CSS را یاد می‌گیرید.