آموزش راهنمای جامع CSS Flexbox با پروژه کامل 2025 - آخرین آپدیت

سرفصل ها و درس ها

اصول اولیه فلکس‌باکس flexbox basics

• معرفی دوره و آنچه یاد خواهید گرفت course introduction and what you're going to learn

• ایجاد اولین کانتینر فلکس‌باکس creating our first flexbox container

• درک محورهای اصلی و متقاطع understanding main and cross axes

• درباره ویژگی flex flow بیشتر بدانید more about flex flow property

• یادگیری ویژگی flex wrap learning the flex wrap property

کنترل تراز عناصر با استفاده از فلکس‌باکس CSS controlling the alignment of elements using css flexbox

• تراز عناصر با ویژگی justify content aligning elements with justify content property

• بیشتر درباره justify content more about justify content

• تراز عناصر با ویژگی align items aligning elements with align items property

• تراز یک عنصر با ویژگی align self aligning a single element with align self property

• تراز چند خط با ویژگی align content aligning multiple lines with align content property

• یادگیری ویژگی order learning the order property

کنترل اندازه عناصر با استفاده از فلکس‌باکس controlling the sizing of elements using flexbox

• flex grow flex grow

• flex shrink flex shrink

• flex basis flex basis

استفاده از فلکس‌باکس در عمل و ساخت دو منو use flexbox in action and build two menus

• بررسی اجمالی بخش و فایل‌های شروع section overview and starting files

• ساخت یک منوی ساده با فلکس‌باکس building a simple menu with flexbox

• ساخت یک منوی پیشرفته با فلکس‌باکس building an advanced menu with flexbox

پروژه مبتنی بر فلکس‌باکس ما our flexbox-based project

• مروری بر پروژه نهایی ما overview of our final project

• ساخت طرح‌بندی holygrail building the holygrail layout

• ساخت هدر با استفاده از فلکس‌باکس building our header using flexbox

• ساخت و استایل‌دهی به بخش پست‌ها building and styling our posts section

• افزودن فلکس‌باکس به پست‌های ما adding flexbox to our posts

• ساخت و استایل‌دهی به بخش تماشا building and styling the watch section

• افزودن فلکس‌باکس به بخش تماشا adding flexbox to the watch section

• ساخت و استایل‌دهی به بخش دانلود building and styling the download section

• افزودن فلکس‌باکس به بخش دانلود adding flexbox to the download section

• ساخت گالری ما با طرح‌بندی عمودی masonry با استفاده از فلکس‌باکس building our gallery with the horizontal masonry layout using flexbox

• افزودن افزونه lightbox گالری به گالری ما adding gallery lightbox plugin to our gallery

• ساخت سایدبار با استفاده از فلکس‌باکس building our sidebar using flexbox

• ساخت منو و فوتر ما building our menu and our footer

بخش پاداش Bonus Section

• درس پاداش Bonus Lecture