فلکس واکنش گرا (Flex Responsive) در CSS
در «فلکس واکنش گرا (Flex Responsive)» با ترکیب فلکس باکس و «کوئری های رسانه ای (Media Queries)» می توانید چیدمان را بر اساس اندازه صفحه تغییر دهید. بنابراین، برای نمایش در موبایل و دسک تاپ تنها جهت یا اندازه آیتم ها را عوض می کنید.
تغییر جهت با media query
طبق منبع، می توانید در اندازه های کوچک ستون بندی داشته باشید و در اندازه های بزرگ دو ستون. کافی است در نقطه شکست، مقدار flex-direction را از row به column تبدیل کنید.
.flex-container { display: flex; flex-direction: row; } /* تغییر به یک ستون در عرض های کوچک */ @media (max-width: 800px) { .flex-container { flex-direction: column; } }نکته: برای یادگیری قواعد @media ابتدا صفحه کوئری های رسانه ای را مرور کنید.
چیدمان سیال با flex و wrap
روش دوم تغییر درصد 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-left, .flex-item-right { flex: 100%; } }نمونه کارهای پیشنهادی با فلکس واکنش گرا
با همین الگو می توانید گالری تصاویر و وب سایت واکنش گرا بسازید. ابتدا ساختار فلکس را پیاده کنید، سپس با «فلکس واکنش گرا» و کوئری ها سازگاری دستگاه ها را تضمین کنید.
هشدار: مقدارهای ستون را یک باره تغییر ندهید. بهتر است گام به گام و با نقاط شکست منطقی تنظیم کنید.
مسیر ادامه یادگیری
برای جزئیات بیشتر، راهنمای فلکس باکس و بخش آیتم های فلکس را بخوانید. همچنین، لینک «فلکس واکنش گرا» را نشان کنید تا به سرعت به این الگو برگردید.
برای مرجع قواعد، این مستندات مفیدند: MDN: @media و MDN: flex.