آموزش ساخت فوتر ثابت با Flexbox
آموزش ساخت فوتر ثابت یکی از رایج ترین کار ها در طراحی وب است که به سادگی میتوانید با Flexbox آن را طراحی کنید،بدون فوتر ثابت اگر محتوای کمی در صفحه داشته باشید فوتر به وسط صفحه آمده و تجربه کاربر را از وب سایت شما خراب میکند.
قبل از فلکس باکس طراحان برای ایجاد یک فوتر چسبنده از margin منفی استفاده میکردند برای این کار،اما با آمدن Flexbox خوشبختانه دیگر نیازی به این کار نیست.
در این مقاله قصد داریم با یک روش بسیار آسان که توسط آن به سادگی میتوانید یک فوتر ثابت ایجاد کنید به شما آموزش بدهیم، پیاده سازی آن آسان و در کمتر از چند دقیقه انجام میشود.
1-شروع با HTML
در فایل HTML خود یک عنوان و دو پاراگراف و چند خط متن Lorem ipsum برای تست فوتر ثابت ایجاد میکنیم تا بتوانیم به سادگی فوتر خود را امتحان کنیم.
ابتدا یک فایل با اسم index.html ایجاد میکنیم و تمامی کد های زیر را در فایل ساخته شده قرار میدیم.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ساخت فوتر ثابت با فلکس باکس</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="content"> <h1>فوتر ثابت با فلکس باکس</h1> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> <footer> <ul> <li><a href="#">خانه</a></li> <li><a href="#">درباره</a></li> <li><a href="#">تماس</a></li> </ul> </footer> </body> </html>
2-ایجاد استایل اولیه با Css
برای اینکه فایل نمایشی ما زیبا تر به نظر برسد و کار کند ما در اینجا از چند استایل اولیه و پیش افتاده استفاده میکنیم تا به صفحه HTML خود ظاهر بدهیم تا از حالت اولیه در بیاید. استفاده از این استایل ها اصلا اجبار نیست
و شما میتوانید هر استایل و طرحی که خودتان میخواهید را پیاده سازی کنید هدف این پست آموزش ساخت فوتر ثابت می باشد.
یک فایل با نام style.css در همان مکانی که فایل index.html شما قرار دارد ایجاد کنید و سپس کد های زیر را درون این فایل قرار بدید.
/* Basic styles */ * { box-sizing: border-box; font-family: sans-serif; margin: 0; direction: rtl; } body { font-size: 1rem; } .content { padding: 1.5rem; } h1, p { margin: 1rem 0; }
3-استایل برای فوتر
خب حالا ما به فوتر خود یک استایل میدهیم تا زیبا تر به نظر برسد، اما توجه کنید که این استایل ها برای حالت ثابت فوتر نمی باشد و فقط برای ظاهر فوتر است و شما میتوانید هر استایلی که دوست دارید برای فوتر خود ایجاد کنید.
کد های Css زیر را به فایل style.css و بعد از کد های قبلی اضافه کنید.
/* Basic footer styles */ footer { width: 100%; background: #111; margin-top: 1.5rem; } ul { padding: 1.25rem; text-align: center; } ul li { list-style-type: none; display: inline-block; margin: 0.25rem 0.75rem; } ul a { color: #fff; text-decoration: none; } ul a:hover { text-decoration: underline; }
اگر تا الان با کد هایی که نوشتیم خروجی کار را مشاهده کنیم مثل تصویر زیر می باشد
همینطور که در تصویر بالا مشاهده میکنید فوتر به ما خاطر نداشتن محتوای کافی در وسط صفحه نمایش داده می شود در ادامه میخواهیم به کمک Flexbox فوتر را به انتهای صفحه چسبانده و یک فوتر ثابت ایجاد کنیم.
4-ایجاد فوتر ثابت با Flexbox
خوب حالا بعد از اینکه استایل اولیه رو به صفحه خودمون دادیم بیاید به کمک فلکس باکس Flexbox فوتر ایجاد شده رو ثابت کنیم طوری که به پایین صفحه بچسبد،در واقع در اینجا ما فقط 5 قانون css برای این کار را به شما آموزش میدهیم و شما میتوانید
از این تکنیک در هر نوع فوتر و مرورگری که از فلکس باکس پشتیبانی میکند استفاده کنید،درحال حاضر بیشتر مرورگر ها از فلکس باکس پشتیبانی میکنند، در اینجا میتوانید لیست پشتیبانی مرورگر ها و دستگاه ها را از Flexbox مشاهده کنید.
در پایین قطعه کدی قرار گرفته شده است که باید در فایل style.css که مربوط به کد های استایل شما می باشد قرار گیرد،در حالت استاندارد این کد ها باید قبل از استایل فوتر شما قرار داده شده است (اما توجه کنید که تاثیری در خروجی کد ندارد ).
/* Sticky Footer */ body { min-height: 100vh; display: flex; flex-direction: column; } .content { flex: 1; } footer { flex-shrink: 0; }
در کد بالا ما یک طرح واکنش گرا یا انعطاف پذیر مبتنی بر ستون را با عبارت display: flex ایجاد کردیم و توسط قانون flex-direction: column کل تگ body به صورت یک ستون منعطف کار میکند.
min-height: 100vh : این قانون تضمین میکند که تمام عناصر در صفحه در تگ body در تمام ارتفاع قابل نمایش و در دید باشد.
ما همچنین در این کد از خواص انعطاف پذیر flex-shrink استفاده کرده ایم.
ویژگی flex یک ویژگی مختصر می باشد که میتواند مقادیر مختلفی بگیرد،هنگامی که فقط یک مقدار داشته باشد مخفف flex-grow که این معنی می باشد فضای اضافی بر روی صفحه را تعیین میکند.
در اینجا ما از قانون flex: 1 استفاده کرده ایم این قانون این معنی را میدهد که تمامی محتوای اصلی باید تمام فضای اضافی در صفحه را داشته باشند.
سپس در ادامه برای متعادل کردن این اثر ما از ویژگی flex-shrink با مقدار 0 در فوتر استفاده میکنیم،این ویژگی مشخص میکنه که وقتی فضای کافی در صفحه وجود نداره چه اتفاقی برای عنصر ما می افتد.
اگه مقدار 0 باشد به این معنی خواهد بود که هر اتفاقی در صفحه انجام شود این عنصر نباید کوچک شود.
بررسی نسخه نمایشی
خب حالا اگه ما تا اینجا بیایم از کار خودمون خروجی بگیریم طبق تصویر پایین میبینم که فوتر ما به پایین صفحه چسبیده و ما یک فوتر ثابت ایجاد کردیم به سادگی
همچنین شما میتوانید با قرار دادن محتوای بیشتر در صفحه تست کنید که وقتی فضای اضافی روی صفحه وجود ندارد و صفحه دارای اسکرول می باشد فوتر مانند یک فوتر معمولی عمل میکند و به پایین صفحه نمیچسبد و فقط با محتوا بالا و پایین میرود.
فایل css و استایل نهایی
استایل نهایی و کد های فایل style.css ما به صورت زیر خواهد بود که شما میتونید ازش استفاده کنید.
* { box-sizing: border-box; font-family: sans-serif; margin: 0; direction: rtl; } body { font-size: 1rem; /* Sticky footer */ min-height: 100vh; display: flex; flex-direction: column; } .content { padding: 1.5rem; /* Sticky footer */ flex: 1; } /* Basic footer styles */ footer { width: 100%; background: #111; margin-top: 1.5rem; /* Sticky footer */ flex-shrink: 0; } h1, p { margin: 1rem 0; } ul { padding: 1.25rem; text-align: center; } ul li { list-style-type: none; display: inline-block; margin: 0.25rem 0.75rem; } ul a { color: #fff; text-decoration: none; } ul a:hover { text-decoration: underline; }
نتیجه گیری
دیدیم که Flexbox یک ماژول عالی برای طرح بندی های ساده و پیچیده است، و ما تونستیم تنها با چند قانون ساده یک فوتر ثابت یا چسبنده را ایجاد کنیم
امید وارم که این آموزش تونسته باشه به شما کمک کنه،لطفا نظرات و پیشنهادات خود را در مورد این پست از انتهای همین پست و از قسمت نظرات با ما در اشتراک بگذارید