طراحی سایت

طراحی جدید با فلکس باکس (Flexbox)

1 خرداد ماه 1397
طراحی جدید با فلکس باکس (Flexbox)

در ابتدا می خواهیم بررسی کنیم که فلکس باکس چیست و چه کاربردی دارد؟ فلکس باکس می تواند در سئوی سایت شما استفاده شود و کمک می کند که گوگل و سایر موتورهای جستجو بتوانند راحت تر صفحات شما را ایندکس کنند .


فلکس باکس  چیست؟
کلمه فلکس باکس (Flexbox) برگرفته از عبارت Flexible Box Layout Module است که بعنوان یک روش جدید طراحی صفحات وب توسط CSS3 رونمایی شده است. فلکس باکس باعث میشود بسیاری از مشکلات طراحان و توسعه دهندگان وب در ارتباط با لایه بندی حل شود. فلکس باکس سه ویژگی اساسی در طراحی وب دارد که البته دستیابی به این ویژگی ها در CSS سخت و تقریبا ناممکن است: 1) ترازبندی 2) مرتب سازی 3) توزیع مناسب فضای خالی بین آیتم ها. استفاده از این ویژگی ها موجب می شود عناصر صفحه در زمانی که چیدمان آنها باید با سایز های مختلف صفحه نمایش در دستگاه های مختلف همسان شود، همانطوری رفتار می کنند که پیش بینی شده است. برای بسیاری از برنامه ها، مدل جعبه انعطاف پذیر فلکس باکس باعث بهبود در مدل بلوک بدون نیاز به استفاده از  float ها است.


طراحی با فلکس باکس برای چه سایت هایی مناسب است؟
از فلکس باکس برای طراحی کل صفحه استفاده نکنید زیرا ویژگی های فلکس باکس در کنار زبان CSS ارائه گردیده که معمولا با نام تخصصی Grid Layout Module  در بین طراحان شناخته میشود. استفاده از Grid Layout برای طراحی کل ساختار یک صفحه وبسایت می تواند محدودیتهای زیادی ایجاد کند.


استفاده از فلکس باکس بجای  Float
واقعیت این است که تحت شرایطی خاص ممکن است که عناصر از مرز فضای در دسترس مرورگر برای نمایش آنها تجاوز کنند و در نتیجه بخشی از صفحه از دید کاربر پنهان بماند. طراحی جدول وار، راهکاری بود که در گذشته توسط طراحان وبسایت استفاده می شد اما کارایی چندانی نداشته و رفته رفته float جایگزین آن شد. اما این ویژگی نیز در طرح بندی های پیچیده پاسخگوی خیلی از مسائل نبود و بیشترین کاربرد این ویژگی، شناور کردن عناصر در سمت چپ یا راست و در بعضی مواقع نوشتن متن ها در اطراف یک عکس (درست مثل روزنامه) بود. قابلیتی که فلکس باکس به ما می دهد این است که می توانیم ترتیب و تراز عناصر را متناسب با شرایط تغییر دهیم و در نتیجه به بهترین شکل عناصر را در پلتفرم های مختلف نمایش دهیم.

مرتبط با طراحی جدید با فلکس باکس (Flexbox)

سینماگراف در طراحی سایت

سینماگراف در طراحی سایت

چشم انسان عاشق تحرک است. هر المان متحرک در سایت موجب جلب توجه کاربر و افزایش تعامل با آن خواهد شد. سین...

بهترین ایده های استارتاپی

بهترین ایده های استارتاپی

می خواهیم در این مطلب به معرفی برترین ایده های نوپای ایرانی در سال ۲۰۱۷ بپردازیم. هرچند ممکن است ...

سئو چیست

سئو چیست

هنگامی که ازموتورهای حستجو مانند گوگل، یاهو و بینگ استفاده می کنید، عبارت مورد جستجوی شما شامل کلمات ک...