Justify Content on flex unordered list - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Justify Content on flex unordered list

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox Footer</title> 
  <style>

* {border: 1px solid black;}
body {margin: 0; padding: 0;}
footer {<!--   w  w  w.j  a va2  s.  c o  m-->
   width: 100%;
   display:flex;
   justify-content: space-between;
   background: red;
   box-sizing: border-box;
   padding: 1rem;
}
.footer-inner{
   background: blue;
   width: 30%;
   display:flex;
   align-items: center;
   padding: 1rem;
   color: white;
}
#footerright {
   display:flex;
   justify-content: flex-end;
}
#footerright ul {
   display:flex;
   list-style-type: none;
   justify-content: flex-end;
}
#footerright ul li {
   padding: 0px 10px;
   color: white;
}
@media screen
and (max-width : 580px) {
   footer {
      flex-direction: column;
      align-items: center;
   }
   .footer-inner {
      justify-content: center;
      min-width: 240px;
      padding: 0;
   }
   #footerright {justify-content: center;}
   #footerright ul {
      justify-content: center;
      padding: 0;
      margin: 0;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <footer> 
   <div class="footer-inner" id="footerleft">
     test test test test test testtest 
    <span id="footer-year">Year</span> &amp;nbspThe Company 
   </div> 
   <div class="footer-inner" id="footerright"> 
    <ul> 
     <li id="facebook">asdf asdfa sdf asd fa sdf a sdfasdf</li> 
     <li id="instagram">asdf a sdfa sdf a sdf asd fa sdf a sdf</li> 
     <li id="twitter">adf a sdf asd fa sdf a sdf ad f</li> 
    </ul> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials