How to create footer with CSS flexbox

You can really do many thing with CSS to make stylish your webpages. CSS provides the way to add styles to your HTML pages. You can add creative styles as your wish in the html page. You can design your header, container , footer as well as sidebar with the help of CSS.



Let's learn about the flexbox today, In this post i will explain about the Flexbox Footer that is how How to create attractive Footer with CSS Flexbox ? . Check the tutorial to know how to get started.

Css float right and left is old property , so replacing this we are going to use css flex. Here is way to how you can do that.

# HTML

Add or write the following html in your footer section that you want to create.




<footer class="footer">
<div class="footer-wrapper">
<div class="left-item">
<h1>ABOUT</h1>
<p>Write something about your website</p>
</div>
<div class="middle-item">
<h1>
Menu
</h1>
<div class="menu-link">
<a href="">ITEM </a>
<a href="">ITEM 1</a>
<a href="">ITEM 2</a>
<a href="">ITEM 3</a>
<a href="">ITEM 4</a>
</div>
</div>
<div class="right-item">
<h1>Social Follow</h1>
<p>Follow us on social media</p>
<div class="social-box">
<a href=""><span class="fa fa-facebook fa-fw"></span></a>
<a href=""><span class="fa fa-twitter fa-fw"></span></a>
<a href=""><span class="fa fa-linkedin fa-fw"></span></a>
<a href=""><span class="fa fa-whatsapp fa-fw"></span></a>
</div>
</div>
</div>
</footer>


Now the add the following css code which is flex property that works better than float left and right etc.



   
<style>
.footer {
background: #212121;
box-sizing: border-box;
padding: 16px 14px;
color: #d7ccc8
}
/*make footer wraper 1000px center and flex*/
.footer-wrapper {
display: flex ;
justify-content: space-between;
align-items: none; /*you can use center to center all content*/
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
/*left item*/
.left-item {
width: 33%;
}
</style>
 




Menu link : style the menu link , add the following code to you CSS.



   
<style>
.menu-link {}
.menu-link a {
display: block;
text-decoration: none;
text-transform: uppercase;
color: inherit;
padding: 7px 0
}
</style>
 
  


Style the social links in the footer section you can add following css code to style it and make it more creative.



  
<style>
.left-item {}
.social-box {
margin: 14px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.social-box a {
background: rgba(0,0,0,0.4);
display: block;
padding: 14px 14px;
color: #d7ccc8
}
</style>
 
  


After you add this your footer will look like this. You can see the screenshot.



You can add media query to make it more responsive in mobile devices and tablet. Check the following css code to how it work.



   
<style>
/** ADDING MEIDA QUERY **/
@media screen and (max-width: 768px){
.footer-wrapper {
flex-direction: column; /* You can use display:block also */
justify-content: center;
}
/* we have set left-item width 33% so now make it auto*/
.left-item {
width: auto
}
}
</style>



More additional you can add hover effect to your item for menu link and social link as well as you can add pseudo elements into it.



   
<style>
/* hover effects for menulink*/
.menu-link a:hover {
text-decoration: underline;
}
.social-box a:hover {
background: #d7ccc8;
color: #000
}
</style>
   
  


That's all about how you can create CSS flex footer with very easy steps. More make dynamic you can add more property in the CSS codes. Hope it helped you and don't forget to share with friends.

Post a comment

0 Comments