Wrap two items with flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Wrap

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

Description

Wrap two items with flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.flex {<!--   w  w  w .  j a v  a  2 s  . c o m-->
   display:flex;
   flex-wrap:wrap;
}

.flex>div {
   flex:2 0 auto;
   padding:51px;
   text-align:center;
}

.flex .flex {
   padding:0;
   flex-grow:3;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="flex"> 
   <div>
     1 
   </div> 
   <div>
     2 
   </div> 
   <div>
     3 
   </div> 
   <div>
     4 
   </div> 
   <div class="flex"> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials