فلکس‌باکس واکنش‌گرا
همانطور که در مبحث مدیا کوئری‌ها (Media Queries) آموختید، می‌توانید از مدیا کوئری‌ها برای ایجاد طرح‌بندی‌های مختلف برای اندازه‌ها و دستگاه‌های مختلف استفاده کنید.
برای مثال، اگر بخواهید برای اکثر اندازه‌های صفحه یک طرح دو ستونه و برای صفحه‌های کوچک‌تر (مانند تلفن‌ها و تبلت‌ها) یک طرح تک‌ستونه ایجاد کنید، می‌توانید جهت flex-direction را در یک نقطه‌ی شکست (breakpoint) مشخص تغییر دهید (800 پیکسل در مثال زیر):
مثال
.flex-container {
display: flex;
flex-direction: row;
}
/* طرح واکنش‌گرا - تغییر به طرح تک‌ستونه به جای دو ستونه */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}روش دیگر: تغییر درصد خاصیت flex
روش دیگر این است که درصد خاصیت flex آیتم‌های فلکس را تغییر دهید تا طرح‌بندی‌های مختلفی برای اندازه‌های مختلف صفحه ایجاد کنید. توجه داشته باشید که باید از flex-wrap: wrap; در کانتینر فلکس استفاده کنیم تا این مثال کار کند.
مثال
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* طرح واکنش‌گرا - تغییر به طرح تک‌ستونه به جای دو ستونه */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}توضیح:
- در طرح دو ستونه برای صفحه‌های بزرگ، آیتم‌های فلکس چپ و راست هر کدام 50% از عرض را اشغال می‌کنند.
- در صفحه‌های کوچک‌تر (با عرض کمتر از 800 پیکسل)، این آیتم‌ها به صورت تک‌ستونه و با عرض 100% نمایش داده می‌شوند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام