دوره آموزش Flexbox

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

Flexbox شامل چندین ویژگی کلیدی است که هر کدام وظیفه خاصی در چینش و مدیریت عناصر دارند. در این بخش به توضیح مفاهیم Flex، Flow، Flex-direction، و Flex-wrap پرداخته می‌شود.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی justify-content در CSS Flexbox برای تنظیم نحوه توزیع فضای اضافی در اطراف و بین آیتم‌های Flex در امتداد محور اصلی استفاده می‌شود. این ویژگی به شما اجازه می‌دهد تا ترازبندی و موقعیت‌دهی آیتم‌های Flex را در محور اصلی به صورت دقیق کنترل کنید.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی align-items در CSS Flexbox برای تنظیم نحوه ترازبندی آیتم‌های Flex در امتداد محور عمودی (محور y) در داخل Flex Container استفاده می‌شود. این ویژگی به شما اجازه می‌دهد تا نحوه چیدمان آیتم‌های Flex را به صورت عمودی کنترل کنید و ترازبندی آنها را نسبت به Flex Container تنظیم کنید.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی align-content در CSS Flexbox برای تنظیم نحوه توزیع فضای اضافی بین و اطراف خطوط آیتم‌های Flex در داخل Flex Container استفاده می‌شود. این ویژگی زمانی تأثیر دارد که محتویات Flex Container در بیش از یک خط قرار گیرند (یعنی وقتی که از flex-wrap: wrap; یا flex-wrap: wrap-reverse; استفاده می‌کنید)

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی order در CSS Flexbox به شما امکان می‌دهد تا ترتیب نمایش آیتم‌های Flex را بدون تغییر در ترتیب کد HTML تنظیم کنید. به‌طور پیش‌فرض، آیتم‌های Flex به ترتیب ظاهر شدن در کد HTML نمایش داده می‌شوند، اما با استفاده از ویژگی order می‌توانید ترتیب نمایش آن‌ها را تغییر دهید.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی‌های flex-shrink و flex-grow در CSS Flexbox به شما این امکان را می‌دهند تا کنترل دقیقی بر روی نحوه تغییر اندازه (انقباض و انبساط) آیتم‌های Flex در هنگام توزیع فضای موجود در Flex Container داشته باشید. این ویژگی‌ها تعیین می‌کنند که یک آیتم Flex چگونه باید به تغییرات اندازه کانتینر واکنش نشان دهد.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی flex-basis در CSS Flexbox به شما امکان می‌دهد اندازه اولیه یک آیتم Flex را قبل از توزیع فضای موجود در Flex Container تعیین کنید. این ویژگی اندازه‌گیری اولیه‌ای است که آیتم باید براساس آن در محور اصلی (main axis) تنظیم شود. flex-basis می‌تواند با مقادیر width یا height ترکیب شود، اما زمانی که از flex-basis استفاده می‌کنید، اولویت با آن است.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ویژگی align-self در CSS Flexbox به شما این امکان را می‌دهد که ترازبندی یک آیتم Flex را به صورت مستقل از سایر آیتم‌ها در محور عمودی (محور y) تنظیم کنید. این ویژگی هر یک از آیتم‌های Flex را قادر می‌سازد تا ترازبندی خود را تنظیم کنند، حتی اگر align-items در کانتینر تنظیم شده باشد.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

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

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

در این بخش، به ساخت اولین هدر سایت خواهیم پرداخت.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

در این بخش، به ادامه ساخت اولین هدر سایت خواهیم پرداخت.

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت دومین هدر سایت

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ادامه ساخت دومین هدر سایت

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت منو

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت بخش آخرین اخبار وبلاگ

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت بخش آخرین مقالات

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت بخش آخرین کتابها

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت بخش دوره های پرطرفدار

برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.

ساخت بخش فوتر