آموزش Flexbox (فلکس باکس) پروژه محور

سرفصل‌ها
مقدمه و معرفی
فصل 1

چرا باید از فلکس باکس استفاده کنیم و چه تفاوتی بین Flex box و CSS Grid وجود دارد؟ فلکس باکس برای طراحی های رسپانسیو بکار می رود.

کار با display و flex-direction
فصل 2

در این بخش به ایجاد المان والد می پردازیم و سپس با استفاده از Flex المان ها را در کنار یکدیگر قرار می دهیم. سپس با دستور flex-direction جهت نمایش المان ها را مشخص می کنیم.

ترازبندی با استفاده از Flex
فصل 3
جلسه1:آشنایی با justify-content
00:04:55

این دستور برای تنظیم شیوه قرارگیری المان ها استفاده می شود. در این بخش با مثال های متنوع شیوه کار با آن را توضیح داده ایم.

جلسه2:کار با align-items
00:01:04

این دستور برای تنظیم جهت قرارگیری المان ها استفاده می شود.

جلسه3:آشنایی با align-content و flex-flow و flex-wrap
00:05:58

در این بخش به ترکیب دستورهای flex می پردازیم. همچنین جهت دهی و زیر هم بودن المان ها را با استفاده از دستور align-content بررسی می کنیم.

مرتب سازی با استفاده از Flex order
فصل 4
جلسه1:دستورهای order‌ و flex-shrink و flex-grow و flex-basic و flex
00:10:07

با استفاده از دستورهای flex-shrink و flex-grow و flex-basic ابعاد و اندازه یک المان و میزان فضایی که اشغال می کند را تعیین می کنیم. از طرفی تمام این سه دستور را می توان با یک دستور تحت عنوان flex جایگزین کرد.

پروژه گالری تصاویر با Flex box
فصل 5
جلسه1:قسمت پایانی - پروژه گالری تصاویر با Flexbox
00:05:41

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

توضیحات دوره

Flexbox CSS با تلفظ فلکس باکس، یک مدل طراحی UI است که برای توسعه دهنده قابلیت طراحی ساده ستون ها و بلوک ها را فراهم می کند. به عبارت دیگر با استفاده از فلکس باکس (Flexbox) می توانید به صورت عمودی (Vertically) یا افقی (Horizontally) ستون ها یا ردیف هایی را تولید کرده و در صفحه به نمایش بگذارید.

کلمه Flex مخفف Flexibility یا همان انعطاف پذیری است و با استفاده از فلکس باکس میتوان صفحات رسپانسیو (واکنش گرا) یا Responsive بسیار حرفه ای تولید کرد.

امروزه تمام مرورگرهای مدرن (بیش از ۹۹ درصد) از قابلیت فلکس باکس پشتیبانی می کنند. از طرفی اکثر موبایل ها (۱۰۰ درصد) نیز از این امکانات برخوردار هستند.

Flexbox چیست؟

فلکس باکس یکی از ماژول های CSS3 است که به توسعه دهنده امکان لایه بندی و چینش المان ها را می دهد. پیش از این اکثر برنامه نویسان برای تعیین موقعیت یک المان، معمولا از دستورها position یا width و یا float استفاده می کردند که به کار بردن همزمان این دستورها کاری دشوار و طاقت فرسا بود. در نهایت در سال ۲۰۱۷ قابلیت فلکس باکس توسط W3C ارائه و با استقبال توسعه دهنده رو به رو شد.

پیش نیاز دوره

برای استفاده از این دوره باید به مفاهیم HTML‌ و CSS تسلط کافی را داشته باشید. دوره آموزشی مقدماتی تا پیشرفته HTML و CSS (پروژه محور) در اختیار شماست تا این تخصص را بدست آورید.

چرا باید از Flexbox استفاده کنیم؟

در حالت عادی، اگر چنانچه بخواهید یک المان را در صفحه موقعیت دهی کنید، کارهای بسیار زیادی را باید انجام دهید (مثل تعیین position و float). تازه اگر این پیاده سازی ها برای تمام المان ها به درستی انجام شود، چالش اصلی، یعنی ریسپانسیو بودن آنها، پیش روی شماست.

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

مزیت های Flexbox

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

اصطلاحات

قبل از ورود به دوره آموزشی با اصطلاحات زیر آشنا شوید:

Flex container: المان والدی که تمام آیتم‌های Flex درون آن قرار می گیرند.

Flex item: هر المان فرزندی که درون Flex container نگهداری می شود و تمایل دارد به صورت Flex نمایش داده شود. هر متنی درون این المان نیز به صورت Flex می باشد.

Axes: محورهای نمایشی المان که می تواند در راستای محور y یا عمودی (ستونی) و یا در راستای محور x – افقی (ردیف) باشد.

Flex-direction: جهت نمایش عناصر را مشخص می کند که معمولا در چهار وضعیت row و row-reverse و column و column-reverse استفاده می شود.

Justify-content: این ویژگی حالت قرارگیری المان ها در راستای محور موردنظر را تعیین می کند و معمولا ارگومان هایی مانند flex-start یا flex-end یا space-between و space-around و space-evenly را دریافت می کند.

Align-items: شیوه نمایش تمام آیتم هایی که در راستای محور موردنظر تعیین می کند.

Align-content: نحوه راستچین یا چپ چین و فواصل بین المان ها را تعیین می کند.

Align-self: وضعیت هر المان را به صورت اختصاصی (مجزا) بررسی می کند.

Order: ترتیب قرارگیری المان ها در کنار یکدیگر را تعیین می کند.

Flex: نوع نمایش المان ها را به همراه محور قرارگیری آنها، تعیین می کند.

دوره رایگان
این دوره رایگان است
گارانتی بازگشت وجه روکسو
این دوره ۱۰۰٪ گارانتی کیفیت و بازگشت وجه دارد. مشاهده شرایط و مراحل
اینترنت نیم بها در روکسو
هزینه حجم اینترنت شما برای دانلود و تماشای ویدئوهای این دوره نیم‌بها محاسبه می‌شود.
استفاده بیش از یک نفر از این محصول غیرقانونی و از لحاظ شرعی حرام می‌باشد.
میزان پیشرفت دوره:
٪100
281 نفر
شرکت کرده‌اند
3 نظر
ثبت شده است
امتیاز (16 رای)
کد دوره:
302520
آخرین بروزرسانی:
1402-5-20
وضعیت دوره:
تکمیل شده
تعداد جلسات:
7
مدت زمان:
00:38:59
حجم کل:
0.19 گیگابایت
سطح:
تمام سطوح
مسعود صالحی
مدرس: مسعود صالحی
1725 کارما
بیش از ۲ سال عضویت در روکسو بیش از ۲ سال عضویت در روکسو
دارای 1000 کارما دارای 1000 کارما
نظرات دریافتی:‌ بیش از 50 نظرات دریافتی:‌ بیش از 50
دارای 25 پاسخ صحیح دارای 25 پاسخ صحیح
ارسال کننده پاسخ با 25 رای ارسال کننده پاسخ با 25 رای
دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

m.alisorush8080@gmail.com
محمد
03 شهریور 1401
پروسه ثبت نام در این سایت بیرون از ایران درست کار نمیکنه چون شماره تماس ضروری است ولی لطف نموده این مشکل را حل نمایید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

تیم مدیریت روکسو
تیم مدیریت روکسو
13 شهریور 1401

ثبت‌نام برای کاربران خارج از کشور در حال حاضر به صورت مستقیم انجام نمیشه و به زودی این مسئله حل خواهد شد. در حال حاضر کافیه با اکانت تلگرام roxo24 در تماس باشید تا ثبت‌نام شما به صورت غیرمستقیم و توسط تیم فنی روکسو انجام بشه.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

m.ani.nazary.com@gmail.com
مانی نظری
24 تیر 1401

ممنون خیلی خوب بود.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

abuser922@gmail.com
امیرمحمد نوری
15 آذر 1400
خیلی عالی خلاصه ممنون استفاده شد 💔❣

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

پیگیری مطالب جذاب و تخفیف‌ها
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو