cssblog.ir logo

بدون شک یکی از مواردی که در سال های اخیر وارد حوزه طراحی صفحات وب شده و بطور کلی مسائل مربوط به خود را متحول کرده است، flexbox می‌باشد. قبل از ورود فلکس به زبان CSS ما همواره در پیاده سازی رابط‌های کاربری پیچیده، داینامیک و Grid ها با چالش هایی روبرو بودیم که نهایتا به استفاده‌های متنوعی از خاصیت‌های از float یا position ختم می‌شدند. اما با فراگیر شدن flexbox و افزایش پشتیبانی آن توسط مرورگرهای متداول، اکنون ما می‌توانیم رابط‌های کاربری پیچیده و کاملا داینامیک (وابسته نبودن به مقادیر فیکس) را به راحتی بسازیم و با خیال راحت در سایزها و دستگاه‌های مختلف از آنها استفاده کنیم. 

مدرس:‌ مسعود شقاقی

فهرست مطالب دوره

۰

مقدمه دوره آموزش flexbox

۰۰:۴۱
۱

تاثیر استفاده از display: flex

معرفی display: flex و بررسی تاثیر استفاده از آن

۰۳:۰۵
۲

تعیین جهت با استفاده از flex-direction

معرفی خاصیت flex-direction و نحوه استفاده از آن

۰۱:۵۲
۳

خاصیت wrap در فلکس باکس با استفاده از flex-wrap

عمل wrap (شکستن ردیف‌ها وقتیکه فضای کافی وجود ندارد) با استفاده از خاصیت flex-wrap

۰۲:۲۱
۴

استفاده از خاصیت flex-flow

معرفی خاصیت flex-flow و استفاده آن از برای تعیین جهت و wrap بصورت همزمان

۰۱:۳۱
۵

محورهای اصلی و فرعی در فلکس باکس

معرفی محورهای اصلی و فرعی در فلکس باکس و خاصیت های justify-content و align-items

۰۸:۵۷
۶

تعیین اندازه آیتم های فلکس باکس با استفاده از flex-basis

خاصیت flex-basis و استفاده از آن جهت تعیین اندازه (عرض یا ارتفاع)‌ عناصر

۰۳:۴۱
۷

تعیین انعطاف پذیری عناصر با استفاده از grow و shrink

تعیین میزان انعطاف پذیری عناصر با استفاده از خاصیت های flex-grow و flex-shrink

۰۷:۴۲
۸

تعیین ترتیب آیتم ها در فلکس باکس

تعیین ترتیب نمایش آیتم های قرارگرفته داخل فلکس باکس با استفاده از CSS

۰۳:۰۲
۹

تراز یک آیتم بصورت جداگانه (align-self)

۰۳:۱۳
۱۰

موقعیت دهی وسطه وسط!

تراز وسط عمودی و افقی با استفاده از flex

۰۳:۱۳
۱۱

مختصر نویسی (shorthand) چند خاصیت flex با هم

خاصیت shorthand فلکس (flex) شامل چه property هایی می‌شود؟

۰۲:۲۵
۱۲

پایان

۰۰:۵۴

هزینه دوره

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

۲۲,۰۰۰ ۲۰,۰۰۰ تومان
خرید

میزان پیشرفت شما

شما تاکنون هیچ قسمتی از این دوره را به اتمام نرسانده‌اید

شما <% completed.length %> قسمت از <% totalLessons %> قسمت این دوره را به اتمام رسانده‌اید

تبریک! شما تمام قسمت های این دوره را به اتمام رسانده‌اید.

نیازمندی های پیشنهادی

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

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند

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

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