در حال بارگذاری...

Flex واکنش‌گرا در CSS

درس Flex Items اندازهٔ هر فرزند را تنظیم کرد. Flex واکنش‌گرا سؤال بعدی را می‌پرسد: وقتی عرض صفحه کم می‌شود، آن ردیف flex چطور wrap کند، روی‌هم بچیند یا direction عوض کند؟ چند الگوی آرام media-query یاد بگیرید — ماژول‌های عمیق Responsive و Media Queries بعداً می‌آیند.

جعبهٔ ابزار flex واکنش‌گرا

📊 flex واکنش‌گرا یک‌نگاهه

ابزار	کار روزمره
`flex-wrap`	وقتی ردیف تنگ است آیتم‌ها را به خط جدید می‌برد
`flex-direction`	در breakpoint بین `row` و `column` جابه‌جا می‌شود تا بخش‌ها روی‌هم بیفتند
Media query	قانون flex تازه را فقط وقتی viewport جور است اعمال می‌کند
`flex-basis` / `min-width`	مشخص می‌کند کارت‌ها کی wrap شوند یا کنار هم بمانند
`gap`	فاصله را وقتی خط‌ها می‌شکنند درست نگه می‌دارد
دوری از `order` برای چیدمان	ترتیب DOM را برای صفحه‌کلید و صفحه‌خوان سالم نگه دارید

از یک پایهٔ flex خوانا شروع کنید (دسکتاپ یا mobile-first). در یک breakpoint روشن، فقط همان‌هایی را عوض کنید که باید عوض شوند — wrap، direction یا basis — نه همهٔ ویژگی‌ها یک‌جا.

flex-wrap — بگذار ردیف نفس بکشد

وقتی کارت‌ها در عرض زیاد باید ردیف باشند و به‌جای له شدن ابدی wrap کنند، wrap را روشن کنید و به هر کارت basis معقول بدهید.

ردیف کارت با wrap

css

.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

عوض کردن direction در breakpoint

الگوی کلاسیک: در عرض زیاد کنار هم، در عرض کم ستون روی‌هم. داخل media query فقط flex-direction را عوض کنید — همان HTML بماند.

روی‌هم در صفحهٔ کوچک

css

.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

basis و min-width برای بازچینی

wrap را با flex-basis یا min-width جفت کنید تا آیتم‌ها بفهمند کی بیفتند. گاهی یک breakpoint باید basis را از نو بگذارد اگر یک اندازه هرگز تمیز wrap نمی‌کند.

basis در breakpoint

css

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

عرض کم زبان چیدمان دیگری نیست — همان ابزارهای flex، فقط مقدارهای دیگر. direction یا wrap را عوض کنید؛ درخت HTML دوم نسازید.

عادت آرام flex واکنش‌گرا

اول یک breakpoint اصلی. wrap و عوض کردن direction را بر جابه‌جایی با order ترجیح دهید. ترتیب منبع را سالم نگه دارید. تصویرهای سیال، سیستم پیچیدهٔ breakpoint و نظریهٔ کامل Responsive را برای درس‌های بعد بگذارید.

نقش‌های نام‌دار ستون

css

.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

محافظ min-width برای wrap

css

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

خودتان امتحان کنید

ردیف کارت با flex-wrap: wrap و flex: 1 1 14rem بسازید.
زیر max-width: 40rem پوسته را به flex-direction: column برگردانید.
در breakpoint کوچک، اکشن‌های نوار ابزار را flex-basis: 100% کنید.
با min-width بگذارید چیپ‌ها wrap شوند نه له شوند.
برای «درست کردن» چیدمان واکنش‌گرا سراغ order نروید.

اشتباه‌های رایج

فقط تا ابد shrink کردن به‌جای wrap یا روی‌هم چیدن
استفاده از order به‌عنوان ابزار چیدمان واکنش‌گرا و خراب کردن ترتیب tab
فراموش کردن flex-wrap و تعجب که کارت‌ها هرگز نمی‌افتند
ریختن همهٔ ویژگی‌های flex در یک media query غول‌آسا
این درس را کل کورس Responsive Design دانستن

خلاصه

flex واکنش‌گرا wrap، direction و basis را در عرض‌های مختلف وفق می‌دهد
flex-wrap به‌همراه basis/min-width معقول ردیف را بازمی‌چیند
media query با عوض کردن flex-direction در صفحهٔ باریک ستون می‌سازد
breakpoint آرام را ترجیح دهید؛ از order برای ترفند چیدمان دوری کنید
ماژول‌های عمیق‌تر Responsive و Media Queries بعداً می‌آیند

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان