طراحی واکنش‌گرا

📐 دوره جامع Flexbox 🎯

مهارت طراحی حرفه‌ای و واکنش‌گرای وب را با Flexbox بیاموزید. تبدیل شوید به یک طراح فرانت‌اند حرفه‌ای با این دوره کامل که تمام تکنیک‌های Flexbox را پوشش می‌دهد.

۱۸+ ساعت آموزش

۷۵+ تمرین عملی

۱۲ پروژه واقعی

۴.۸ رضایت دانشجویان

🎨 آموزش تعاملی Flexbox

روی هر درس کلیک کنید تا باز شود و محتوای آموزشی را مشاهده کنید. تمام درس‌ها شامل مثال‌های تعاملی و تمرین‌های عملی هستند.

مقدمه و مفاهیم پایه Flexbox

آشنایی با container و item، محور اصلی و فرعی

۲۰ دقیقه

Flexbox چیست و چرا مهم است؟

Flexbox یک ماژول CSS است که برای طراحی چیدمان‌های یک‌بعدی (ردیف یا ستون) استفاده می‌شود. این تکنولوژی طراحی واکنش‌گرا را بسیار ساده می‌کند.

مفهوم کلیدی

Flexbox از دو عنصر اصلی تشکیل شده است: Flex Container (پدر) و Flex Items (فرزندها). تمام ویژگی‌های Flexbox روی container اعمال می‌شوند.

تمرین تعاملی

flexbox.css

/* 1. ایجاد یک Flex Container */
.container {
    display: flex; /* این خط یک Flex Container می‌سازد */
    background: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    gap: 10px; /* فاصله بین آیتم‌ها */
}

/* 2. استایل‌دهی به Flex Items */
.item {
    background: #2ecc71;
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    flex: 1; /* تمام آیتم‌ها فضای برابر می‌گیرند */
}

/* 3. تغییر جهت Flex Container */
.container.row {
    flex-direction: row; /* پیش‌فرض - آیتم‌ها در یک ردیف */
}

.container.column {
    flex-direction: column; /* آیتم‌ها در یک ستون */
}

/* 4. تراز کردن آیتم‌ها در محور اصلی */
.container.justify-center {
    justify-content: center; /* وسط‌چین در محور اصلی */
}

.container.justify-between {
    justify-content: space-between; /* فاصله برابر بین آیتم‌ها */
}

.container.justify-around {
    justify-content: space-around; /* فاصله برابر اطراف آیتم‌ها */
}

/* 5. تراز کردن آیتم‌ها در محور فرعی */
.container.align-center {
    align-items: center; /* وسط‌چین در محور فرعی */
    height: 200px; /* برای نمایش بهتر ارتفاع می‌دهیم */
}

نمایش زنده:

آیتم ۱

آیتم ۲

آیتم ۳

تمرین:

یک Flex Container بسازید که آیتم‌هایش در یک ستون چیده شوند و در وسط صفحه قرار گیرند. سپس فاصله‌ی ۱۵ پیکسل بین آیتم‌ها قرار دهید.

از flex-direction: column; برای جهت ستونی و justify-content: center; برای وسط‌چین و gap: 15px; برای فاصله استفاده کنید.

نکات طلایی:

display: flex; یک عنصر را به Flex Container تبدیل می‌کند
محور اصلی می‌تواند افقی (row) یا عمودی (column) باشد
justify-content برای تراز در محور اصلی استفاده می‌شود
align-items برای تراز در محور فرعی استفاده می‌شود
gap فاصله بین آیتم‌ها را تنظیم می‌کند (پشتیبانی مدرن مرورگرها)

آزمون پایان جلسه - مفاهیم پایه

سوال ۱: برای تبدیل یک عنصر به Flex Container از چه ویژگی CSS استفاده می‌کنیم؟

الف

flex: 1;

display: flex;

flex-direction: row;

سوال ۲: کدام ویژگی برای تراز کردن آیتم‌ها در محور اصلی (Main Axis) استفاده می‌شود؟

الف

align-items

justify-content

flex-wrap

سوال ۳: برای چیدمان آیتم‌ها در یک ستون از کدام مقدار استفاده می‌کنیم؟

الف

flex-direction: row;

flex-direction: column;

flex-direction: reverse;

نتایج آزمون

کنترل سایز و ترتیب آیتم‌ها

flex-grow, flex-shrink, flex-basis و order

۲۵ دقیقه

کنترل دقیق ابعاد و موقعیت آیتم‌ها

در این درس یاد می‌گیرید چگونه سایز آیتم‌ها را به صورت پویا کنترل کنید و ترتیب نمایش آنها را تغییر دهید.

ویژگی‌های flex item

flex-grow نسبت رشد آیتم

flex-shrink نسبت جمع‌شدن آیتم

flex-basis سایز اولیه آیتم

order ترتیب نمایش

align-self تراز فردی آیتم

مثال عملی flex-grow

2 (دو برابر)

آیتم وسط دو برابر فضای بیشتری می‌گیرد

کنترل پیشرفته آیتم‌ها

flex-items.css

/* 1. کنترل رشد آیتم‌ها با flex-grow */
.item-grow-1 { flex-grow: 1; }
.item-grow-2 { flex-grow: 2; }
.item-grow-3 { flex-grow: 3; }

/* وقتی فضای اضافی وجود دارد، آیتم‌ها بر اساس flex-grow رشد می‌کنند */
.container {
    display: flex;
    background: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    gap: 10px;
}

/* 2. کنترل جمع‌شدن آیتم‌ها با flex-shrink */
.item-no-shrink { flex-shrink: 0; } /* جمع نمی‌شود */
.item-shrink { flex-shrink: 1; } /* جمع می‌شود (پیش‌فرض) */

/* وقتی فضای کافی نیست، آیتم‌ها بر اساس flex-shrink جمع می‌شوند */

/* 3. تنظیم سایز اولیه با flex-basis */
.item-basis-100 { flex-basis: 100px; } /* سایز اولیه 100px */
.item-basis-200 { flex-basis: 200px; } /* سایز اولیه 200px */
.item-basis-auto { flex-basis: auto; } /* سایز بر اساس محتوا */

/* 4. تغییر ترتیب با order */
.item-first { order: -1; } /* نمایش در ابتدا */
.item-last { order: 1; } /* نمایش در انتها */
.item-normal { order: 0; } /* نمایش عادی (پیش‌فرض) */

/* 5. تراز فردی آیتم با align-self */
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* 6. شورت‌هند flex */
.item-flex-1 { flex: 1; } /* معادل flex: 1 1 0; */
.item-flex-auto { flex: auto; } /* معادل flex: 1 1 auto; */
.item-flex-none { flex: none; } /* معادل flex: 0 0 auto; */

نمونه flex-grow:

grow: 1

grow: 3

grow: 1

نمونه order:

آیتم 1 (order: 3)

آیتم 2 (order: 1)

آیتم 3 (order: 2)

مقایسه flex shorthand

شورت‌هند	معادل	توضیح
`flex: 1;`	`flex: 1 1 0;`	رشد می‌کند، جمع می‌شود، سایز اولیه صفر
`flex: auto;`	`flex: 1 1 auto;`	رشد می‌کند، جمع می‌شود، سایز بر اساس محتوا
`flex: none;`	`flex: 0 0 auto;`	رشد نمی‌کند، جمع نمی‌شود، سایز بر اساس محتوا
`flex: 2 1 100px;`	`flex-grow: 2; flex-shrink: 1; flex-basis: 100px;`	دو برابر رشد می‌کند، جمع می‌شود، سایز اولیه 100px

💡 توصیه: برای سادگی، از flex: 1; برای آیتم‌هایی که باید فضای برابر بگیرند استفاده کنید.

آزمون پایان جلسه - کنترل آیتم‌ها

سوال ۱: اگر به یک آیتم `flex-grow: 2;` و به آیتم دیگر `flex-grow: 1;` بدهیم، چه اتفاقی می‌افتد؟

الف

آیتم اول دو برابر آیتم دوم فضای اضافی می‌گیرد

آیتم دوم دو برابر آیتم اول فضای اضافی می‌گیرد

هیچ تفاوتی در سایز ایجاد نمی‌شود

سوال ۲: کدام شورت‌هند flex باعث می‌شود آیتم نه رشد کند و نه جمع شود؟

الف

flex: 1;

flex: auto;

flex: none;

سوال ۳: برای نمایش یک آیتم قبل از سایر آیتم‌ها، از کدام ویژگی استفاده می‌کنیم؟

الف

order: -1;

order: 1;

align-self: flex-start;

نتایج آزمون

Flex-wrap و Alignment پیشرفته

چیدمان چند خطی، align-content، justify-items

۳۰ دقیقه

طراحی‌های پیچیده و چند خطی

در این درس با تکنیک‌های پیشرفته Flexbox برای طراحی‌های پیچیده و چند خطی آشنا می‌شوید.

Flex-wrap و چیدمان چند خطی

flex-advanced.css

/* 1. Flex-wrap - چیدمان چند خطی */
.container-wrap {
    display: flex;
    flex-wrap: wrap; /* آیتم‌ها به خط بعد می‌روند */
    gap: 10px;
    background: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

.container-nowrap {
    display: flex;
    flex-wrap: nowrap; /* پیش‌فرض - همه در یک خط */
}

.container-wrap-reverse {
    display: flex;
    flex-wrap: wrap-reverse; /* خطوط از انتها شروع می‌شوند */
}

/* 2. Align-content - تراز خطوط چندگانه */
.content-start {
    align-content: flex-start; /* خطوط در ابتدا */
    height: 300px; /* ارتفاع برای نمایش بهتر */
}

.content-center {
    align-content: center; /* خطوط در وسط */
    height: 300px;
}

.content-end {
    align-content: flex-end; /* خطوط در انتها */
    height: 300px;
}

.content-between {
    align-content: space-between; /* فاصله بین خطوط */
    height: 300px;
}

.content-around {
    align-content: space-around; /* فاصله اطراف خطوط */
    height: 300px;
}

.content-stretch {
    align-content: stretch; /* خطوط کشیده می‌شوند */
    height: 300px;
}

/* 3. Flex-flow - شورت‌هند flex-direction و flex-wrap */
.flow-row-wrap {
    flex-flow: row wrap; /* جهت ردیف، با wrap */
}

.flow-column-wrap {
    flex-flow: column wrap; /* جهت ستون، با wrap */
}

.flow-row-reverse-wrap {
    flex-flow: row-reverse wrap; /* جهت ردیف معکوس، با wrap */
}

/* 4. طراحی‌های رایج با Flexbox */
/* ناوبری (Navigation) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #2c3e50;
    color: white;
}

.nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
}

/* کارت‌های محصول (Product Cards) */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.product-card {
    flex: 1 1 250px; /* حداقل 250px، رشد و جمع می‌شود */
    max-width: 300px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* گالری تصاویر (Image Gallery) */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-item {
    flex: 1 1 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
}

نکات طلایی:

flex-wrap: wrap; برای چیدمان چند خطی ضروری است
align-content فقط زمانی کار می‌کند که چند خط وجود داشته باشد
flex-flow ترکیب flex-direction و flex-wrap است
برای طراحی واکنش‌گرا، از flex-wrap و واحدهای نسبی استفاده کنید
Flexbox برای طراحی‌های یک‌بعدی (ردیف یا ستون) مناسب است

نمونه flex-wrap:

آیتم 1 (min: 150px)

آیتم 2 (min: 150px)

آیتم 3 (min: 150px)

آیتم 4 (min: 150px)

آیتم 5 (min: 150px)

نمونه align-content:

خط 1

خط 2

خط 3

آزمون پایان جلسه - Flex-wrap و Alignment

سوال ۱: کدام ویژگی برای تراز کردن خطوط چندگانه در Flex Container استفاده می‌شود؟

الف

align-items

align-content

justify-content

سوال ۲: `flex-flow: row wrap;` معادل کدام دو ویژگی است؟

الف

flex-direction: row; و flex-wrap: wrap;

flex-grow: 1; و flex-wrap: wrap;

flex-direction: row; و flex-shrink: 1;

سوال ۳: برای طراحی یک گالری تصاویر واکنش‌گرا که آیتم‌ها در خط بعد بروند، کدام کد مناسب است؟

الف

display: flex; flex-wrap: wrap;

display: flex; flex-direction: column;

display: flex; justify-content: center;

نتایج آزمون

🚀 دروس پیشرفته در راه است!

ما به شدت در حال تولید دروس جدید و پیشرفته‌تری برای تسلط کامل بر Flexbox هستیم:

🎨

Flexbox در عمل

پیاده‌سازی طرح‌های واقعی با Flexbox

📱

Flexbox واکنش‌گرا

تکنیک‌های Responsive Design با Flexbox

⚔️

Flexbox vs Grid

مقایسه و انتخاب بهترین روش برای هر پروژه

🏗️

پروژه‌های عملی

ساخت ۵ پروژه واقعی با Flexbox

دروس جدید هر هفته منتشر می‌شوند!

📐 دوره جامع Flexbox 🎯

🎨 آموزش تعاملی Flexbox

مقدمه و مفاهیم پایه Flexbox

Flexbox چیست و چرا مهم است؟

مفهوم کلیدی

تمرین تعاملی

نمایش زنده:

تمرین:

نکات طلایی:

آزمون پایان جلسه - مفاهیم پایه

سوال ۱: برای تبدیل یک عنصر به Flex Container از چه ویژگی CSS استفاده می‌کنیم؟

سوال ۲: کدام ویژگی برای تراز کردن آیتم‌ها در محور اصلی (Main Axis) استفاده می‌شود؟

سوال ۳: برای چیدمان آیتم‌ها در یک ستون از کدام مقدار استفاده می‌کنیم؟

نتایج آزمون

کنترل سایز و ترتیب آیتم‌ها

کنترل دقیق ابعاد و موقعیت آیتم‌ها

ویژگی‌های flex item

مثال عملی flex-grow

کنترل پیشرفته آیتم‌ها

نمونه flex-grow:

نمونه order:

مقایسه flex shorthand

آزمون پایان جلسه - کنترل آیتم‌ها

سوال ۱: اگر به یک آیتم flex-grow: 2; و به آیتم دیگر flex-grow: 1; بدهیم، چه اتفاقی می‌افتد؟

سوال ۲: کدام شورت‌هند flex باعث می‌شود آیتم نه رشد کند و نه جمع شود؟

سوال ۳: برای نمایش یک آیتم قبل از سایر آیتم‌ها، از کدام ویژگی استفاده می‌کنیم؟

نتایج آزمون

Flex-wrap و Alignment پیشرفته

طراحی‌های پیچیده و چند خطی

Flex-wrap و چیدمان چند خطی

نکات طلایی:

نمونه flex-wrap:

نمونه align-content:

آزمون پایان جلسه - Flex-wrap و Alignment

سوال ۱: کدام ویژگی برای تراز کردن خطوط چندگانه در Flex Container استفاده می‌شود؟

سوال ۲: flex-flow: row wrap; معادل کدام دو ویژگی است؟

سوال ۳: برای طراحی یک گالری تصاویر واکنش‌گرا که آیتم‌ها در خط بعد بروند، کدام کد مناسب است؟

نتایج آزمون

🚀 دروس پیشرفته در راه است!

Flexbox در عمل

Flexbox واکنش‌گرا

Flexbox vs Grid

پروژه‌های عملی

سوال ۱: اگر به یک آیتم `flex-grow: 2;` و به آیتم دیگر `flex-grow: 1;` بدهیم، چه اتفاقی می‌افتد؟

سوال ۲: `flex-flow: row wrap;` معادل کدام دو ویژگی است؟