Center the last element in the flex container but not the first one - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Center the last element in the flex container but not the first one

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  a  v  a  2s.co  m-->
   box-sizing:border-box;
}

.last-centered {
   display:flex;
   width:401px;
   flex-flow:row wrap;
   justify-content:center;
}

.last-centered li:last-child {
   margin:0 auto;
}

.last-centered li {
   display:inline-block;
   width:34%;
   padding:21px;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <ul class="last-centered"> 
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
   <li>5</li> 
   <li>6</li> 
   <li>7</li> 
  </ul>  
 </body>
</html>

Related Tutorials