آموزش کامل Flexbox

لایه‌بندی صفحات وب و قرار دادن المان‌های مختلف در کنار همدیگر بصورتی که مرتب بنظر برسند در CSS کار سختی بوده و بسیاری از طراحان صفحات وب نیز از این موضوع شکایت دارند. اما از زمانی که W3C مدل لایه‌بندی Flexbox را در سال ۲۰۱۷ معرفی کرد بسیاری از افراد این شکایات خود را پس گرفته و بیشتر از گذشته در رابطه با این نحوه از لایه‌بندی رضایت خاطر نشان دادند. Flexbox که با نام کامل CSS Flexible Box Layout در حال حاضر در اختیار همگان است به روش‌های ساده‌ای به توسعه‌دهندگان کمک می‌کند تا چینش المان‌ها در صفحات وب را ایجاد کنند.

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

در حال حاضر تمام مرورگرهای مدرن از این قابلیت پشتیبانی کرده و در نمایش از طریق موبایل نیز مشکلی نخواهید داشت.

Flexbox چیست؟

Flexbox یکی از ماژول‌های CSS3 است که کار را در طراحی وب برای طراحان وب بسیار ساده کرده است. در گذشته شما با استفاده از Float و Position می‌بایست المنت‌های خود را در صفحات مرتب سازی می‌کردید اما با معرفی این ماژول کار شما برای چینش المنت‌های صفحه بسیار ساده‌تر شده است.

حال با استفاده از Flexbox می‌توانید المنت‌های خود را به شکل سطر یا ستون در جهت مورد نظر خود مرتب کرده و نمایش دهید.

در طول دوره آموزش Flexbox ما این ماژول را به شکل کامل به شما معرفی کرده و روش استفاده از آن را به شما آموزش خواهیم داد.

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

استفاده از float که در حال حاضر به عنوان یک روش نسبتا منسوخ شده شناخته می‌شود مشکلات و دردسرهای زیادی داشت و شما را نیز محدود میکرد اما با معرفی flexbox دست شما برای چینش المنت‌های داخل یک صفحه بسیار بازتر شده است.

حالا شما می‌توانید بسیار راحت‌تر المنت‌های داخل صفحه را چینش کنید و به وبسایت خود شکل دهید.

استفاده از Flexbox این روز‌ها به حالتی تبدیل شده که نبود آن قابل تصور نیست، شما به سادگی می‌توانید از این ماژول برای چینش المنت‌ها استفاده کنید و از همه مهمتر ساده‌تر وبسایت خود را به شکل واکنش‌گرا (رسپانسیو) در بیاورید.

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

مزیت استفاده از Flexbox

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

یکی از مشکلات رایج float این است که با اضافه کردن اِلمان و محتوای جدید به یک بخش، احتمالا باعث می‌شود که لایه بندی که از قبل آماده کردیم به سادگی بهم بریزد و ما برای حل چنین مشکلاتی مجبور هستیم که از راه‌حل‌های پیچیده یا از ترفندهای مثل CSS Hacks استفاده کنیم که هر کدام باعث پیچیده شدن CSS پیاده‌سازی شده می‌شود.

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

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

واژه‌شناسی

دوست دارم قبل از آنکه به سراغ دوره آموزشی می‌روید ابتدا با واژه‌شناسی فلکس‌باکس آشنا شوید. منظور از واژه‌شناسی مجموعه‌ای از اصطلاحات و عبارت‌هاست که در این ماژول استفاده شده و شما باید بدانید که هر کدام از این موارد به چه معنا هستند:

• Flex container: به المانی گفته می‌شود که تمام موارد Flex داخل آن‌ها قرار دارد. با استفاده از خصوصیت Display در CSS، کانتینر شما می‌تواند flex و یا inline-flex تعریف شود.
• Flex item: هر المان و محتوایی که در داخل Flex container قرار بگیرد را یک Flex item می‌نامیم.
• Axes یا محورها: هر پیاده‌سازی که از فلکس‌باکس در پروژه‌تان داشته باشید شامل دو محور اصلی و محور صلیب‌شکل است. محور اصلی تعیین کننده حالت قرارگیری المان‌ها با یک دیگر بوده و محور صلیب‌شکل نیز عمود بر محور اصلی است.
• Flex-direction: محور اصلی در فلکس باکس را با استفاده از Flex-direction ایجاد خواهیم کرد.
• Justify-content: تعیین کننده چگونگی قرار گرفتن محتوا روی محور اصلی است.
• و... .

عبارت‌های بسیار زیاد دیگری در واژه‌شناسی وجود داشته که برای آشنایی با آن‌ها نیاز دارید تا دوره را به خوبی مشاهده بکنید.

پیش نیاز دوره آموزش Flexbox

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

برای یادگیری کامل CSS به شکل رایگان می‌توانید دوره آموزش CSS را از وبسایت مشاهده کنید و قدم به قدم CSS را یاد بگیرید و بعد از پایان به سراغ این دوره بیایید و شروع به دیدن آموزش Flexbox کنید. 

هدف نهایی دوره

هدف از ارائه دوره رایگان Flexbox این است که شما بتوانید به سرعت پس از یادگیری کامل CSS، با این ویژگی نیز آشنا شوید و در کمتر از یک هفته بتوانید در پروژه‌های مختلف‌تان از FlexBox استفاده نمایید.