×
ribbon

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

مدل flexbox یا جعبه انعطاف پذیر در CSS یک مدل چیدمان تک بعدی است که دارای طرح بندی... بیشتر
4.5 (36 امتیاز)
4,206دانشجو
وب ‌پروگ

علی شیخ

مشخصات دوره
محتوای دوره
پیش‌نیاز‌ها
توضیحات دوره
دیدگاه کاربران
درباره مدرس

محتوای دوره

2 فصل11 جلسه1:52 ساعت ویدیو
فصل اول: آشنایی با FlexBox
  FlexBox چیست؟
مشاهده
"03:48
  Flex و Flex Direction
مشاهده
"08:26
  Flex Wrap و Flex Flow
مشاهده
"04:14
  Justify Content
"05:32
  Align و Order
"11:14
فصل دوم: پروژه FlexBox

پیش‌نیاز‌ها

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

توضیحات دوره

مدل 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 را یاد می‌گیرید.

اطلاعات بیشتر

امتیاز و نظرات کاربران

4.5

از مجموع 36 امتیاز

11نظر

3 روز پیش

عالی

دانشجوی دوره

11 روز پیش

بسیار عالی و کاربردی بود.ممنون.

دانشجوی دوره

1 سال پیش

بسیار عالی و کاربردی با تشکر از استاد

دانشجوی دوره

1 سال پیش

واقعا خیلی ساده و قشنگ تدریس شده ممنونم ازتون

دانشجوی دوره

2 سال پیش

بسیارعالی ومفید بود. ممنونم

دانشجوی دوره

2 سال پیش

باتشکر تدریس پروژه محور بسیار کاربردی هست

مرضیه درستکار

2 سال پیش

این دوره بسیار عالی و دقیق و گزینه به گزینه تدریس شده بود. تشکر از استاد عزیز

سمیه صفری

3 سال پیش

بسیار عالی . ممنون که این دوره رو پروژه محور پیش بردید عالی بود واقعا;

دانشجوی دوره

3 سال پیش

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

پیمان بدری

3 سال پیش

با سلام دوره خیلی خوبیه چون پروژه محور هست. تشکر

محدثه حسین پور

3 سال پیش

با سلام دوره خیلی خوب و کاربردی من که کمی با html و css آشنا بودم تونستم بعد از گذروندن این دوره اولین صفحه ریسپانسیو خودم رو بسازم با تشکر

مصطفی رحمن زاد

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

درباره استاد

علی شیخ
19دوره
46,065دانشجو

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

اطلاعات بیشتر

دیگر دوره‌های علی شیخ

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

آیا ممکن است برخی جلسات یک درس ناقص باشند؟

معمولا تمامی جلسات هر درس به‌طور کامل ضبط می‌شوند؛ اما گاهی به دلیل برخی ناهماهنگی‌ها ممکن است یک یا چند جلسه ضبط نشده باشد. جزئیات این موارد در توضیحات هر درس درج شده است.

اگر لینک دانلود یا پخش ویدئو مشکل داشت، چه کاری باید انجام داد؟

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

آیا می‌توان ویدئوهای یک درس را به‌صورت سی‌دی یا دی‌وی‌دی از شما تهیه کرد؟

در حال حاضر امکان ارسال دروس به‌صورت سی‌دی یا دی‌وی‌دی وجود ندارد و همه محتواها به شکل آنلاین ارائه می‌شوند.

مهارت‌هایی که می‌آموزید