گاهی اوقات ، زمانی که در حال توسعه یک قالب و طرح بندی آن هستید ، در برخی از نقاط شما احتمالا به مشکلی که در عکس زیر وجود دارد بر خواهید خورد :
دانلود قالب | مشاهده دمو
این طرح ، به وضوح شکسته زمانی رخ میده که که طرح بالا و پایین بصورت استاتیک باشند و محتوای زیادی در وسط صفحه وجود نداشته باشه . در این جا چیزی وجود ندارد که footer را به پایین صفحه بچسباند و یک فضای خالی ایجاد کند .
در روشی که ما امروز در این مقاله کوتاه میخواهیم به آن اشاره کنیم ، این است که شما میتوانید خیلی ساده با استفاده از یک روش مدرن به درستی و بدونه هیچ مشکلی پاورقی را برای همیشه به پایین مرورگر بچسبانید . البته چسنباند به معنی fix کردن آن نه .
تکنیک
Css3 ابزار پیشرفته ای برای ساخت و ساز تطبیقی ارائه کرده است . نام این ابزار flexbox است . برای کسانی که با flexbox آشنا نیستند بهتره که قبل یا بعد از دیدن این مقاله کمی در مورد flexbox تحقیق کنند چون کار شما را برای طرح بندی قالب هایتان ، فوق العاده راحت میکند .
در این دمو ساده یک بخش برای header و یک بخش برای footer و یک بخش میانی وجود دارد و غیر این سه بخش که کد html هستند چیز فوق العاده ای دیگه ای وجود ندارد .
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
برای اضافه کردن مدل flexbox به طرح باید display: flex را در body قرار دهیم . و همچنین flex-direction را برابر با column قرار دهیم تا طرح از حالت افقی به حالت عمودی تغییر پیدا کند در قدم بعدی ارتفاع را هم در html و هم در body برابر با 100% قرار میدهیم .
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
حالا ما به چه مقدار فضا برای تنظیم کردن هر بخش نیاز دارید ؟ ما برای انجام این کار از property های flex استفاده میکنیم :
flex-grow : این پروپرتی مشخص میکند که چه مقدار از فضای آزاد به المنت مورد نظر ما اختصاص داده میشود .
flex-shrink : این پروپرتی اگر فضای کافی وجود نداشته باشد تشخیض میدهد که عناصر چقدر باید کوچک شوند .
flex-basis : اندازه پیش فرض برای عناصر
ما در اینجا میخواهیم که Header و footer به اندازه ای خود فضا داشته باشند و هر چیز دیگه ای برای بخش محتوای اصلی محفوظ باشد . css مورد نظر برای چنین طرحی بصورت زیر است :
header{
/* We want the header to have a static height,
it will always take up just as much space as it needs. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* By setting flex-grow to 1, the main content will take up
all of the remaining space on the page.
The other elements have flex-grow: 0 and won't contest the free space. */
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* Like the header, the footer will have a static height - it shouldn't grow or shrink. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
با کلیک کردن روی عکس زیر شما میتوانید بصورت انلاین نتیجه کار را مشاهده کنید و همینطور میتوانید به راحتی با کلیک کردن روی دکمه بزرگ محتوایی را اضافه کنید و ببینید که طرح چطور بخش footer رو به پایین هل میدهد .
نتیجه گیری
همانطور که شما می توانید ببینید flexbox یک متحد قدرتمند برای ساخت و ساز قالب شما است که تمام مرورگرها از ابتدا شروع به پشتیبانی کردن از ان کردن بجز چند مورد خاص مانند ie که البته در مرورگرهای +ie9 قابل استفاده است .
امیدوارم این مقاله کوتاه مفید بوده باشه و از این به بعد اگر چنین مشکلی داشتید آن را به سادگی بتوانید رفع کنید .
منبع این مقاله وبسایت : tutorialzine
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید