specify an element after which to wrap in css 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

specify an element after which to wrap in css flexbox

Demo Code

ResultView the demo in separate window 

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

.flex-container {<!--from w w  w . j  a v  a 2  s. c o  m-->
   display: flex;
   flex-flow: row wrap;
}
.child {
   flex-grow: 1;
}
.child.two {
   page-break-after: always;
   -webkit-column-break-after: always;
   break-after: always;
}

.flex-container {
   padding: 0.5em;
   background: rgba(0, 255, 0, 0.15);
}
.child {
   padding: 0.5em;
   background: rgba(0, 0, 255, 0.15);
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="flex-container"> 
   <div class="child one">
     Child One 
   </div> 
   <div class="child two">
     Child Two 
   </div> 
   <div class="child three">
     Child Three 
   </div> 
   <div class="child four">
     Child Four 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials