در این پست از سایت اسکریپت دات کام , قصد آموزش ساخت یک پنل اریب تمام صفحه با پراپرتی بسیار جدید Flex را دارم .

این بنل بدون استفاده از جی کوئری و جاوا اسکریپت و تمام آن به صورت Html5 و Css3 میباشد .

ضمنا این پنل به صورت کاملا ریسپانسیو میباشد .

در ادامه میتوانید علاوه بر آموزش , دموی آنلاین آن را مشاهده فرمایید .

همانطور که شما توسعه دهنگان وب میدانید , ما در CSS تابحال پراپرتی برای وسط چین کردن تگ به صورت عمودی را نداشته ایم و اکثرا با margin این کار را انجام میدادیم .

البته شاید همین الان به ذهنتون پراپرتی position خطور کرده باشه . کاملا درسته ولی این کار به صورت ترفندی میباشد و ضمنا برای این کار مجبور میشویم که به تگ مورد نظر پراپرتی position بدهیم که خود مشکلاتی را برای مت فراهم میسازد . ( برای مشاهده ترفند با position اینجا رو کلیک کنید )

در css3 پراپرتی اضافه شده به نام flex که کاربردهای فراوان و گوناگونی دارد که در اینجا فقط یکی از آن کارها که طریقه وسط چین کردن عمودی تگ ها میباشد را آموزش خواهم داد .

انشالله در آینده سعی خواهم کرد شما عزیزان را با این پراپرتی بیشتر آشنا کنم و کاربردهای دیگر آن را بیان خواهم کرد