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

سرفصل‌ها

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

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

آشنایی با justify-content

3
00:04:55

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

کار با align-items

4
00:01:04

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

آشنایی با align-content و flex-flow و flex-wrap

5
00:05:58

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

دستورهای order‌ و flex-shrink و flex-grow و flex-basic و flex

6
00:10:07

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

قسمت پایانی - پروژه گالری تصاویر با Flexbox

7
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
42 نفر
شرکت کرده‌اند
1 نظر
ثبت شده است
امتیاز (4 رای)
کد دوره:
622816
آخرین بروزرسانی:
1400-11-6
وضعیت دوره:
تکمیل شده
تعداد جلسات:
7
مدت زمان:
00:38:59
حجم کل:
0.19 گیگابایت
سطح:
تمام سطوح
مسعود صالحی
مدرس: مسعود صالحی
1443 کارما
بیش از ۲ سال عضویت در روکسو بیش از ۲ سال عضویت در روکسو
دارای 1000 کارما دارای 1000 کارما
دارای 10 پاسخ صحیح دارای 10 پاسخ صحیح
نظرات دریافتی:‌ بیش از 50 نظرات دریافتی:‌ بیش از 50
ارسال کننده پاسخ با 25 رای ارسال کننده پاسخ با 25 رای

دیدگاه‌های شما (1 دیدگاه)

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

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

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

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

اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو