امروزه با پیشرفت تکنولوژی و توسعه موبایل های هوشمند ، تحول عظیمی در طراحی وبسایت از گذشته تا به حال صورت گرفته؛ یکی از این مفاهیم مهم که در همه فریمورک ها هم مورد استفاده قرار میگیرد ، قالب بندی Flex میباشد. در طراحی وبسایت های امروزی اگر به صورت خالص بخواهیم از این نوع طراحی استفاده کنیم ، در CSS از display : flex استفاده میکنیم و برای قالب بندی از ویژگی ها و مقادیر مربوطه به آن استفاده میکنیم. نمونه کدی از این قالب بندی ضمیمه این نوشته شده است. و لینکی که قرار دارد یک نمونه خروجی از این مدل طراحی میباشد. در نظر داشته باشید که این کد بهینه نشده است و میتوان کد بهینه تری هم نوشت ولی برای جهت آموزش کد به صورت غیر بهینه نوشته شده است.
لینک زیر نمونه ای از قالب این نوع طراحی است که با inspect گرفتن از صفحه میتوان به کد html آن دسترسی پیدا کرد.
https://devsycho.ir/Learn/HTML%2CCSS/Flex-layout.html
لینک زیر نمونه کد css این نوع طراحی میباشد.
https://devsycho.ir/Learn/HTML%2CCSS/layoutmaster.css