Limit width with flexbox with navigation footer - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Width

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

Description

Limit width with flexbox with navigation footer

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

* {<!--  w w w  . j  av a2s .co m-->
   margin: 0;
   padding: 0;
}

.main {
   background: #ccc;
   width: 100%;
}

.container {
   max-width: 500px;
   border: 1px solid red;
   margin: 0 auto;
   padding: 8px 0;
}

.flexbox {
   display: flex;
   background: blue;
   justify-content: center;
   align-items: center;
}

.link {
   color: white;
   padding: 16px 10px;
   text-decoration: none;
   width: 50%;
}

.prev {
   border-right: 1px solid white;
   text-align: right;
}

.prev::before {
   content: '<';
   float: left;
}

.next {
   text-align: left;
}

.next::after {
   content: '>';
   float: right;
}


      </style> 
 </head> 
 <body> 
  <div class="main"> 
   <div class="container">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam aut assumenda accusamus ex perferendis ipsa aperiam sapiente. 
   </div> 
  </div> 
  <div class="flexbox"> 
   <a href="#" class="link prev">Preview</a> 
   <a href="#" class="link next">Next</a> 
  </div>  
 </body>
</html>

Related Tutorials