Wrap flexbox items when the flex container is inside a floating element - 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 flexbox items when the flex container is inside a floating element

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.float {
   float: left;
}
.box {<!--   w  ww . j a v  a 2s  .c  o m-->
   width: 50px;
   height: 50px;
   background: black;
}
p {
   clear: both;
   font-weight: bold;
}


      </style> 
 </head> 
 <body> 
  <p>Shrink to fit version</p> 
  <div class="float"> 
   <div class="float box"></div> 
   <div style="border: 2px solid red;"> 
    <div class="float box"></div> ABC 
   </div> 
  </div> 
  <p>Non-shrink to fit version</p> 
  <div class="float" style="width: 150px"> 
   <div class="float box"></div> 
   <div style="border: 2px solid red;"> 
    <div class="float box"></div> ABC 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials