چیدمان بهتر المان های یک وب سایت با استفاده از Flexbox در CSS

برای چندین سال، ستون ها یکی از سخت ترین چالش های طراحی برای هر وبسایتی بودند. اغلب اوقات از شگرد های مختلفی مانند  clearfixes استفاده میکردیم تا بتوانیم ستون ها را در کنار هم خوب و هماهنگ ببینیم.

flexbox-css.png

خوشبختانه، ظهور Flexbox در CSS این فرایند دشوار را تا حد زیادی ساده تر کرده است. از آنجا که Flexbox با چندین container (ستون یا ردیف) ایجاد شده است، به ما یادآوری میکند که شگرد های قدیمی را به فراموشی بسپاریم

نتیجه استفاده از Flexbox این است که  می توانیم برخی از پوسته های کاملا شگفت انگیز را در کسری از زمان ایجاد کنیم (در حالی که چنین چیزی قبلا با استفاده از مشخصه float امکان پذیر نبود). در زیر، نمونه هایی از عملکرد Flexbox در CSS آورده شده است . بیایید نگاهی نگاهی به آنچه با استفاده از این قابلیت فوق العاده میتوانیم انجام دهیم، نگاهی بیندازیم.

قوانین واکنش گرا

یکی از بهترین ویژگی های Flexbox قابلیت تطابق پذیری آن با فضای موجود در یک  container است. فلکس باکس به خودی خود واکنش گراست. اما با افزودن برخی media query های موجود در CSS میتوان این قابلیت را برای هر صفحه نمایشی تقویت کرد. طرح نمونه زیر را در اندازه های مختلف نمایشگر مشاهده کنید تا ببینید که چطور همه چیز در هر حالت به بهترین شکل تنظیم می شود.

 

ناوبری تمام صفحه

ناوبری یک عنصر طراحی است که می تواند از Flexbox تا حد زیادی بهره مند شود. نه تنها میتوانید ناوبری واکنش گرا داشته باشید، بلکه همچنین ناوبری شما میتواند از ویژگی هایی مانند ارتفاع ستون های یکسان و ترازبندی متون استفاده کند. در زیر میتوانید نمونه از یک ناوبری زیبا با استفاده از Flexbox را مشاهده کنید.

 

Timeline

Timeline یا به عبارتی دیگر خط زمان یکی دیگر از عناصر پیچیده است که میتواند با استفاده از Timeline ایجاد شود. در صفحه نمایش های بزرگ، عناصری که در اطراف خط زمان قرار دارند به صورت منظم در دو طرف آن قرار میگیرند. اما همانطور که میبینید، در صفحه نمایش های کوچکتر همه چیز به شکل یک ستون در می آید.  نمونه مثال زیر یک Timeline را نشان میدهد. میتوانید آن را در صفحه نمایش های مختلف تست کنید تا ببینید چطور چیدمان تغییر خواهد کرد.

 

دکمه های صفحه بندی

همانند منوهای ناوبری معمولی در یک سایت، منوهای صفحه بندی نیز می توانند به شدت از ویژگی های سازگاری در Flexbox کمک بگیرند. در نمونه مثال زیر،در نمایشگاه های گسترده تر، میتوانید لیست کامل اعداد صفحه را مشاهده می کنید. اما به سادگی میتوان فهمید که این لیست برای فضای موجود در یک تلفن همراه مناسب نیست. در اینجا از CSS برای مخفی کردن دکمه های اضافی بسته به اندازه صفحه استفاده میشود که باعث صرفه جویی در فضای موجود خواهد شد.

 

ویژگی محصولات

ترکیب Flexbox با انتخابگرهای CSS به ما توانایی انجام برخی کارهای جالب را با لیستی از محصولات، پست ها و سایر مطالب می دهد. در دموی زیر، یک طرح شسته و رفته از 6 محصول را مشاهده میکنید. از طریق استفاده از انتخابگرها، دو محصول اول در صفحه نمایش های گسترده تر، بزرگتر به نظر میرسند. در صفحه های کوچکتر همه محصولات با یک اندازه نمایش می یابند.

 

ساخت Masonry

چیدمان های Masonry یک گزینه عالی برای وبلاگ ها و یا حتی گالری عکس ها هستند. آنها پیچیده به نظر میرسند، با این حال، استایل ها اجازه میدهند هر یک از آیتم ها به شکل متفاوتی برجسته باشند. در شکل زیر نشان داده شده است که چگونه از Flexbox برای حتی بهتر کردن Masonry استفاده شده است. 

 

محتوای وسط چین شده به صورت عمودی

وسط چین کردن یک متن در یک عنصر کار آسانی است، البته به شرط آنکه سایز ارتفاع عنصر را بدانید. زمانی که عنصر شما در صفحه نمایش های مختلف دارای اندازه های متفاوت هست چیکار باید کرد؟ Flexbox برای شما این موضوع را ساده کرده است.

 

فرم های انعطاف پذیر

فرم هایی که با صفحه های کوچک سازگار نیستند میتوانند کاربران تلفن همراه را ناراحت کنند. این فرم ها برای استفاده آسان نیستند. اما با استفاده از  Flexbox  عناصر هم تراز شده و به راحتی روی صفحه نمایش شما تنظیم می شوند و باعث میشود از فرم مربوطه بتوانید در تمام دستگاه ها استفاده کنید. در نمونه مثال زیر فرم جستجویی با همین ویژگی آورده شده است.

 

نتیجه

هیچ کس نمیگوید که یادگیری CSS Flexbox کار خیلی ساده ایی است. اما توصیه میشود زمان زیادی را برای یادگیری اصول آن اختصاص دهید. وقتی به طور منظم شروع به استفاده از آن میکنید، می فهمید که چقدر در طراحی بر روی کار شما تاثیر گذاشته است. بنابراین بسیاری از راه حل های خلاقانه ای که قبلا مجبور بودیم استفاده کنیم دیگر لازم نیست زیرا بسیاری از آنها قبلا ساخته شده اند.

دوره های آموزشی

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

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

طراحی وب

تجربه کاربری

جی کوئری

 رسپانسیو

کتابخانه

ابزار طراحی

گرافیک

 css

html

فریلنسر

انگولار

برنامه نویسی

 سئو

جاوا اسکریپت

اندروید

پی اچ پی

پایتون

نود جی اس

vuejs

react

ios

تکنولوژی

رابط کاربری

امنیت

کسب و کار

لینوکس

موبایل

پایگاه داده

منبع: لرن سورس