فلکس واکنش گرا (Flex Responsive)
«واکنش گرا (Responsive)» یعنی چیدمان با اندازه صفحه سازگار شود. در فلکس، با «پرس وجوهای رسانه ای (Media Query)» یا تغییر «جهت فلکس (flex-direction)» و «میان بُر فلکس (flex)» این کار ساده می شود.
چیدمان ستونی با Media Query
در بزرگ نمایی، آیتم ها کنارِ هم هستند. اما زیر 600px، ستون ای می شوند.
<style>\n .flex-container {\n display: flex;\n flex-direction: row;\n }\n .flex-item {\n background-color: #f1f1f1;\n padding: 10px;\n font-size: 30px;\n text-align: center;\n width: 100%;\n }\n @media (max-width: 600px) {\n .flex-container {\n flex-direction: column;\n }\n }\n</style>\n<div class="flex-container">\n <div class="flex-item">1</div>\n <div class="flex-item">2</div>\n <div class="flex-item">3</div>\n</div>\nگرید ساده با flex-wrap و درصد
با «پیچش (flex-wrap)» و درصد flex سه ستونه می سازیم؛ روی موبایل یک ستونه.
<style>\n .flex-container {\n display: flex;\n flex-wrap: wrap;\n }\n .flex-item {\n background-color: #f1f1f1;\n padding: 10px;\n text-align: center;\n font-size: 30px;\n flex: 33.3%;\n }\n @media (max-width: 600px) {\n .flex-item {\n flex: 100%;\n }\n }\n</style>\n<div class="flex-container">\n <div class="flex-item">A</div>\n <div class="flex-item">B</div>\n <div class="flex-item">C</div>\n</div>\nنمونه های آماده برای تمرین
- گالری تصاویر واکنش گرا با فلکس و Media Query.
- الگوی وب سایت واکنش گرا با ناوبریِ انعطاف پذیر.
گام های عملی
- برای والد بنویس:
display: flex;. - در دسکتاپ،
flex-direction: row;مناسب است. - در موبایل، با Media Query ستون ای کن.
- اگر شبکه می خواهی،
flex-wrap: wrap;را اضافه کن. - سهم ستون ها را با درصد
flexتنظیم کن.
جمع بندی سریع
- Media Query جهت را عوض می کند.
- wrap ستون ها را می شکند.
- درصد flex تعداد ستون می سازد.
- زیر 600px معمولاً یک ستونه است.
برای مفاهیم پایه ی فلکس به فلکس باکس سر بزن. «ترتیب و رشد آیتم ها» را هم در آیتم های فلکس و تنظیمات والد را در ظرف فلکس ببین. اگر می خواهی بیشتر بدانی، روی عبارت فلکس واکنش گرا کلیک کن.