Only show items that can be fit in flexbox container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Only show items that can be fit in flexbox container

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>FlexResize-3</title> 
  <style>
.items {<!--   w  w w.ja  v a 2 s.c  om-->
   width:301px;
   display:flex;
   justify-content:flex-end;
}

.item {
   flex:0 0 auto;
   max-width:100px;
   padding:0 11px;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
}

.item:last-child {
   margin-right:auto;
}

.item {
   border-right:2px solid Chartreuse;
   box-sizing:border-box;
}

.item:nth-child(1) {
   background-color:yellow;
   color:blue;
}

.item:nth-child(2) {
   background-color:pink;
   color:WhiteSmoke;
}

.item:nth-child(3) {
   background-color:OrangeRed;
   color:grey;
}

.item:nth-child(4) {
   background-color:BlueViolet;
   color:Chartreuse;
}

.item:nth-child(5) {
   background-color:yellow;
   color:blue;
}

.item:nth-child(6) {
   background-color:pink;
   color:WhiteSmoke;
}

.item:nth-child(7) {
   background-color:OrangeRed;
   color:grey;
}

.item:nth-child(8) {
   background-color:BlueViolet;
   color:Chartreuse;
}

.item:nth-child(9) {
   background-color:yellow;
   color:blue;
}

body {
   font-size:15px;
}
</style> 
 </head> 
 <body translate="no"> 
  <title>Example</title> 
  <div class="items"> 
   <div class="item">
     Item 1 
   </div> 
   <div class="item">
     Item 2 
   </div> 
   <div class="item">
     Item 3 
   </div> 
   <div class="item">
     Item 4 
   </div> 
   <div class="item">
     Item 5 
   </div> 
   <div class="item">
     Item 6 
   </div> 
   <div class="item">
     Item 7 
   </div> 
   <div class="item">
     Item 8 
   </div> 
   <div class="item">
     Item 9 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials