Same width flex items except for the last one - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Width

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

Description

Same width flex items except for the last one

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.parent {<!--   w  w  w  .j ava  2 s . co m-->
   display: flex;
   flex-flow: row wrap;
}
.child {
   flex: 0 0 calc(33.33% - 10px);
   box-sizing: border-box;
}
.child:last-child {
   flex-grow: 1;
}
.parent {
   border: 5px solid #EEEEEE;
   padding: 5px;
   margin: 30px 0;
}
.child {
   background-color: #CCCCCC;
   padding: 5px;
   text-align: center;
   color: #FFFFFF;
   line-height: 1;
   margin: 5px;
}
.child:last-child {
   background-color: #1FBBE6;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="parent"> 
   <div class="child">
     1 
   </div> 
   <div class="child">
     2 
   </div> 
   <div class="child">
     3 
   </div> 
   <div class="child">
     4 
   </div> 
   <div class="child">
     5 
   </div> 
  </div> 
  <div class="parent"> 
   <div class="child">
     1 
   </div> 
   <div class="child">
     2 
   </div> 
   <div class="child">
     3 
   </div> 
   <div class="child">
     4 
   </div> 
  </div> 
  <div class="parent"> 
   <div class="child">
     1 
   </div> 
   <div class="child">
     2 
   </div> 
   <div class="child">
     3 
   </div> 
  </div> 
  <div class="parent"> 
   <div class="child">
     1 
   </div> 
   <div class="child">
     2 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials