Make Flexbox to wrap at a specific length - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Wrap

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

Description

Make Flexbox to wrap at a specific length

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Vasilis</title> 
  <style>
.container {<!--from w ww .  j  a  v a2s. c o m-->
   background:red;
   width:601px;
   overflow-x:auto;
   display:inline-flex;
}

.outer {
   overflow-x:auto;
   background:purple;
   display:inline-flex;
   flex-wrap:wrap;
   flex:2 0 auto;
   max-width:1201px;
}

.inner {
   background:yellow;
   width:100px;
}
</style> 
 </head> 
 <body translate="no">
   Case Smaller 
  <hr> 
  <div class="container"> 
   <div class="outer"> 
    <div class="inner">
      Content1 
    </div> 
    <div class="inner">
      Content2 
    </div> 
    <div class="inner">
      Content3 
    </div> 
    <div class="inner">
      Content4 
    </div> 
    <div class="inner">
      Content5 
    </div> 
   </div> 
  </div> 
  <hr> Case Bigger Than 600 but smaller than 1200 
  <hr> 
  <div class="container"> 
   <div class="outer"> 
    <div class="inner">
      Content1 
    </div> 
    <div class="inner">
      Content2 
    </div> 
    <div class="inner">
      Content3 
    </div> 
    <div class="inner">
      Content4 
    </div> 
    <div class="inner">
      Content5 
    </div> 
    <div class="inner">
      Content6 
    </div> 
    <div class="inner">
      Content7 
    </div> 
    <div class="inner">
      Content8 
    </div> 
    <div class="inner">
      Content9 
    </div> 
    <div class="inner">
      Content10 
    </div> 
    <div class="inner">
      Content11 
    </div> 
   </div> 
  </div> 
  <hr> Case Bigger Than 1200 
  <hr> 
  <div class="container"> 
   <div class="outer"> 
    <div class="inner">
      Content1 
    </div> 
    <div class="inner">
      Content2 
    </div> 
    <div class="inner">
      Content3 
    </div> 
    <div class="inner">
      Content4 
    </div> 
    <div class="inner">
      Content5 
    </div> 
    <div class="inner">
      Content6 
    </div> 
    <div class="inner">
      Content7 
    </div> 
    <div class="inner">
      Content8 
    </div> 
    <div class="inner">
      Content9 
    </div> 
    <div class="inner">
      Content10 
    </div> 
    <div class="inner">
      Content11 
    </div> 
    <div class="inner">
      Content12 
    </div> 
    <div class="inner">
      Content13 
    </div> 
    <div class="inner">
      Content14 
    </div> 
    <div class="inner">
      Content15 
    </div> 
    <div class="inner">
      Content16 
    </div> 
    <div class="inner">
      Content17 
    </div> 
    <div class="inner">
      Content18 
    </div> 
    <div class="inner">
      Content19 
    </div> 
    <div class="inner">
      Content20 
    </div> 
   </div> 
  </div> 
  <hr>  
 </body>
</html>

Related Tutorials