×
ribbon

آموزش رایگان Flexbox

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

ارائه دهنده:  وب ‌پروگ  وب ‌پروگ
مدرس دوره:
 98% (470 رای)
 رایگان
  
زمان مورد نیاز برای گذارندن دوره:  11 جلسه
مجموع محتوای آموزشی:  1:52 ساعت ویدئو
 (قابل دانلود می‌باشد)

پیش‌نیاز‌ها

فلکس باکس کلاسی است که توسط css3 برای رفع مشکلات و محدودیت‌هایی در زمینه طراحی و چیدمان آیتم‌ها آورده شده است؛ بنابراین واضح است که برای فراگیری آموزش flexbox باید به کدنویسی به زبان‌های CSS و HTML مسلط باشید. همچنین از آنجایی که پروژه‌ای که قرار است در این دوره انجام دهیم، ایجاد یک سایت رسپانسیو با امکانات متنوع است، توصیه می‌کنیم قبل از شروع آموزش flex در css دوره‌های زیر را بگذرانید:

سرفصل‌های دوره آموزش رایگان Flexbox

فصل اول: آشنایی با FlexBox

در این فصل ابتدا به معرفی فلکس باکس و توضیح چرایی استفاده از آن می‌پردازیم. سپس به سراغ پراپرتی‌ها یا ویژگی‌هایی که این ابزار جذاب در اختیار ما قرار داده است، می‌رویم. از جمله ویژگی‌های کاربردی فلکس باکس عبارت‌اند از: Flex Direction، Flex Wrap، Flex Flow، justify Content، Align & Order.

 

  FlexBox چیست؟
"03:48  
  Flex و Flex Direction
"08:26  
  Flex Wrap و Flex Flow
"04:14  
  Justify Content
"05:32  
  Align و Order
"11:14  
فصل دوم: پروژه FlexBox

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

  معرفی و آماده سازی پروژه
"17:33  
  ایجاد Header
"11:49  
  ایجاد Section ها
"14:32  
  ایجاد Contact و Footer
"13:04  
  Responsive پروژه برای دیوایس ها WideScreen
"06:43  
  پروژه Responsive برای موبایل
"15:53  

درباره دوره

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

CSS مخفف عبارت Cascading Style Sheets است. این‌یک زبان شیوه‌نامه است که برای توصیف ظاهر و قالب‌بندی یک صفحه در یک زبان نشانه‌گذاری استفاده می‌شود. این‌یک ویژگی اضافی برای HTML فراهم می‌کند. CSS به‌طورکلی با HTML برای تغییر سبک صفحات وب و رابط کاربری استفاده می‌شود.

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

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

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: طول یک آیتم فلکس را نسبت به بقیه اقلام یا آیتمهای انعطاف‌پذیر داخل همان کانتینر مشخص می‌کند.
    به کمک فلکس باکس می‌توان طرح‌های بسیار سفارشی را ایجاد کرد که تا زمانی که آن را در پروژه‌های خود به کار نبریم درک دقیقی از آن پیدا نخواهیم کرد.

دوره آموزش فلکس باکس

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

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

درباره استاد

maktabkhooneh-teacher علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون از سال 1398 تاکنون توانسته‌است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد.

مشاهده پروفایل و دوره‌‌های استاد

نظرات کاربران  ( نظر)

صفحه 1 از
1402-09-21
دانشجوی دوره
بسیارعالی ومفید بود. ممنونم
مرضیه درستکار 1402-06-18
دانشجوی دوره
باتشکر تدریس پروژه محور بسیار کاربردی هست
سمیه صفری 1402-05-15
دانشجوی دوره
این دوره بسیار عالی و دقیق و گزینه به گزینه تدریس شده بود. تشکر از استاد عزیز
1401-11-15
دانشجوی دوره
بسیار عالی . ممنون که این دوره رو پروژه محور پیش بردید عالی بود واقعا;
1401-10-13
دانشجوی دوره
بسیار ممنونم از استاد محترم بابت دوره مفید و اموزندشون.بسیار مسلط بودند.ممنون از مکتب خونه
محدثه حسین پور 1401-09-02
دانشجوی دوره
با سلام دوره خیلی خوبیه چون پروژه محور هست. تشکر
مصطفی رحمن زاد 1401-06-11
دانشجوی دوره
با سلام دوره خیلی خوب و کاربردی من که کمی با html و css آشنا بودم تونستم بعد از گذروندن این دوره اولین صفحه ریسپانسیو خودم رو بسازم با تشکر

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

سوالات پرتکرار

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

سوالات پرتکرار

اگر لینک دانلود یا پخش ویدئو مشکل داشت چه باید کرد؟
در صورتی که با هر گونه مشکلی رو به رو شدید می توانید از طریق صفحه ارتباط با ما به ما اطلاع دهید تا ما سریعا مشکل را پیگیری و برطرف نماییم.

سوالات پرتکرار

آیا امکان دریافت فیلم های یک درس به صورت سی دی یا دی وی دی وجود دارد؟
در حال حاضر امکان ارسال دروس به صورت سی دی یا دی وی دی وجود ندارد.

کاربرد دوره آموزش Flexbox در css چیست؟

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

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

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

با استفاده از فلکس باکس می‌توانید کارهای زیر را به‌راحتی و بدون دردسر انجام دهید:

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

در دوره آموزش Flexbox در css به‌جای آموزش پراپرتی‌های فلکس باکس، موارد کاربردی آن را در قالب پروژه و به‌صورت عملی به شما آموزش می‌دهیم؛ بنابراین این دوره یک دوره کاملاً کاربردی است که تمام نکات مربوط به فلکس باکس را در حین انجام پروژه به شما عزیزان آموزش می‌دهد. 

دوره آموزش Flexbox در css مناسب چه کسانی است؟

کسانی که به HTML & CSS مسلط‌اند و می‌خواهند مهارت‌های خود را ارتقا دهند.
کسانی که به ساخت وب‌سایت‌های واکنش‌گرا و جذاب علاقه‌مندند.
کسانی که قصد دارند تجربه کاربری سایت خود را بهبود بخشند.
برنامه‌نویسانی که در اوایل مسیر طولانی طراحی سایت قرار دارند.
 

منابع مکمل برای فراگیری دوره آموزش Flexbox در css چیست؟

آموزش HTML & CSS و همچنین فلکس باکس مهارت‌های ابتدایی طراحی سایت است. اگر قصد دارید در این زمینه به پیشرفت‌های چشمگیری دست پیدا کنید و مهارت‌های طراحی سایت خود را افزایش دهید، از دوره‌های آموزشی زیر می‌توانید به‌عنوان منابع مکمل بهره ببرید:

  • آموزش Grid Layout پروژه محور
  • آموزش طراحی سایت با CSS پیشرفته و Sass
  • آموزش  Bootstrap 4
  • آموزش جاوا اسکریپت (Javascript)
     

بعد از فراگیری دوره آموزش Flexbox در css چه مهارت‌هایی کسب خواهید کرد؟

طراحی یک سایت رسپانسیو
طراحی بخش‌های مختلف یک سایت از جمله هدر، فوتر، navbar، ارتباط با ما و غیره.
قراردادن background image و ویو پورت
هم‌ترازسازی عناصر
تنظیم فونت، سایز و رنگ متن‌ها
کار با مدیا کوئری‌ها 
آشنایی با انواع کلاس‌های فلکس باکس
 

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

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

 

آموزش برنامه نویسی اندروید

آموزش رایگان html و css

صفحات پربازدید
poster
  
برگزار کننده:  وب ‌پروگ
  
زمان مورد نیاز برای گذارندن دوره:  11 جلسه
مجموع محتوای آموزشی:  1:52 ساعت ویدئو
 (قابل دانلود می‌باشد)