آموزش جامع فلکس باکس

آموزش جامع فلکس باکس

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

این ماژول، فلکس باکس (Flexbox) نام دارد و این روزها می توان در پروژه های تجاری نیز از آن بهره گرفت.

با توجه به اهمیت فلکس باکس دوره آموزشی جامعی را بصورت تصویری برای کاربران آماده کردیم تا بتوانند هرچه سریع تر و بهتر این روش را فراگرفته و به کار گیرند.

پیش نیاز

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

معرفی دقیق تر دوره

در این دوره مطالب در سه فصل مجزا ارایه شدند و هر فصل هدف خاصی را دنبال می کند.

فصل اول

در این فصل ویژگی های فلکس باکس به طور کامل و دقیق مورد بررسی قرار می گیرد. همینطور تاثیراتی که این ویژگی ها بر روی ویژگی های دیگر CSS دارند بیان می شود.

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

فصل دوم

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

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

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

 

Features List
Features List

 

 

Fixed Sidebar
Fixed Sidebar

 

 

Holy Grail
Holy Grail

 

 

Pricing Table
Pricing Table

 

 

Split Layout
Split Layout

 

 

App Layout
App Layout

 

فصل سوم

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

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

روش هایی که بوسیله آنها می توانیم مرورگرهای قدیمی تر را نیز پشتیبانی کنیم. همچنین مشکلاتی که در برخی از مرورگرهای جدید وجود دارند بررسی می شود و راهکارهای مورد نظر برای آنها ارایه می شود.

ویدیو نمونه

 

دانلود دوره آموزشی

سوالت رو توی پنل بحث و گفتگو مطرح کن.

20 دیدگاه برای “آموزش جامع فلکس باکس

  1. سلام آقای سیدی
    من یه پروژه شروع کردم و دو سه هفته فقط رو ویژوالش کار کردم
    برای ریسپانسیو کردنش از flexbox استفاده کردم ولی ایرادایی داره
    توی دیوایسای مختلف اون چیزی ک من میخوام نمایش داده نمیشه
    حتی از prefixer استفاده کردم ولی ایراد کارم نمیدونم کجاس.
    من توی صفحه اصلی پروژم که سری سکشن یا کانتاینتر تعریف کردم که هر کدوم طول و ارتفاع مشخص دارن
    بنظرتون اصلا درسته که از فلکس استفاده کنم؟
    از بوتسترپ خوشم نمیاد که بخوام ازش استفاده کنم.
    نمیدونم رسوندم منظورمو بهتون یا نه.
    توی مرورگر کروم خودم اون چیزی که من کدشو مینویسم به راحتی جواب میده ینی ریسایز کنم پنجره مرورگرو جواب میده حتی توی فایر فاکس
    ولی وقتی سایت رو روی هاست قرار میدم با گوشیای مختلف چک میکنم درست در نمیاد.حتی با پلاگینای مختلف که که عرض سایت رو توی نمایشگرای مختلف نشون میدن هم امتحان کردم ولی جواب نمیده
    ممنون میشم اگه راهنمایی کنین

  2. سلام
    من تنها ترسم استفاده از flex box اینه که تو مرورگرهای قدیمی ساپورت نمیشه
    یعمی با آموزش شما دیگه همه چی حل میشه؟

    1. سلام، گریدبندی در گارگاه صفحه آرایی آموزش داده میشه، اینجا یک اشاره ای فقط میشه نه بیشتر،

      http://css-tricks.ir/?p=6133

      و البته که فایرفاکس خیلی مناسب برای گرید بندی نیست و باید کم کم به جای گریدبندی قدیمی CSS Grid رو یاد بگیرید.

      http://css-tricks.ir/reference/grid

      حالا اگر میخواید گریدبندی قدیمی رو یاد بگیرید که پروژه های امروزی رو جلو ببرید، کارگاه صفحه آرایی کمکتون میکنه. بعد از اون باید فلکس باکس رو یاد بگیرید.
      و در آینده نزدیک هم که CSS Grid اوضاع پشتیبانیش بهتر شد، اونو باید جایگزین گریدبندی قدیمی بکنید، یعنی در واقع از فلکس باکس و گرید همزمان برای صحفه آرایی استفاده خواهید کرد در آینده.

      فعلا باید از گرید بندی قدیمی (استفاده از float) و از فلکس باکس توی صفحه آرایی هاتون استفاده کنید.

  3. سلام وقت بخیر
    می خواستم بدونم با توجه به اینکه این دوره در سال 95 تولید شده، آیا امکان داره مطالب جدید به این مباحث اضافه شده باشه، که در دوره بیان نشده؟ مثلا ویژگی های جدید.

  4. سلام استاد
    من همه فیلم های آموزش شما رو خریدم و آموزش دیدم. سایت رو هم تقریبا کامب مطالعه کردم.
    تدریس بسیار عالی بود.
    هدف من رفتن به سمت fullstack شدن بر پایه .NET هست. از HTML و CSS و Sass شروع کردم، الان هم دارم با bootstrap آشنا میشم.
    فکر میکنم مرحله بعد باید سراغ javascript برم.
    اما برای مرحله بعد آیا باید Jquery رو یاد بگیرم یا برم سراغ react یا angular یا … (تفاوت اینها رو هم خوب متوجه نشدم)
    اگه ممکن هست می خوام برای من که هدفم fullstack هست، یک نقشه راه برای قسمت frontend ارائه بدید، مثلا اینطوری :
    1- HTML : که markup
    2- CSS شامل float و flex
    3-Sass
    4-Bootstrap
    5- Javascript
    6- ?
    7- ?
    (اگر برای ردیفهای از 6 به بعد یک توضیح یک خطی هم مرقوم بفرمایید خیلی متشکر می شم)

  5. سلام استاد
    توی یه کامت فرموده بودید که احتمالا آموزش جاوا اسکریپ رو هم به زودی شروع می کنید، آیا توی یک یا دوماه آینده می تونیم استفاده کنیم؟

  6. سلام.
    میخواستم بدونم که در دوره آموزش جامع فلکس باکس آیا بحث طراحی بصورت واکنشگرا هم مطرح میشه ؟؟؟میخواستم این دوره را بخرم ولی واکنشگرایی با فلکس باکس خیلی برام مهمه ؟؟؟؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *