یک صفحه ساده با یک کانتینر فلکس و چهار کارت طراحی کنید به‌طوری‌که در عرض‌های بزرگ همه کارت‌ها در یک ردیف قرار گیرند و در عرض‌های کوچک با استفاده از flex-wrap به دو ردیف تقسیم شده و با استفاده از flex-grow کارت‌ها فضای در دسترس را به طور مساوی پر کنند.

طرح با کانتینر فلکس و flex-wrap خوب کار می‌کند، اما حتماً برای پایداری در اندازه‌های کوچک حداقل عرض کارت‌ها با flex-basis مشخص کنید تا در ردیف‌های دوگانه فرو نپاشد. استفاده از gap برای فاصله‌گذاری و box-sizing: border-box به سالم ماندن محاسبات عرض کمک می‌کند. اگر می‌خواهید فضای مساوی بین کارت‌ها حفظ شود، می‌توانید با media query اندازه‌ی flex-basis یا flex-grow را در آستانه‌های مختلف تغییر دهید. فراموش نکنید padding و border را در محاسبه عرض کارت‌ها لحاظ کنید تا ترازبندی و نمایش بهتری داشته باشید.