CSS – فلکس‌باکس واکنش‌گرا (Flex Responsive)

فلکس‌باکس واکنش‌گرا

همانطور که در مبحث مدیا کوئری‌ها (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% نمایش داده می‌شوند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.