Flexbox with child img and text flowing to second line - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Flexbox with child img and text flowing to second line

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">

.row {<!--  w  ww .jav  a 2  s. com-->
   width: 80%;
   border: 1px dotted red;
   margin: 5px;
   display: flex;
}
.col {
   float: left;
}
.pic {
   /* width: 80px; */
   /* Remove it */
   flex: 1 0 80px;
}
.pic img {
   max-width: 100%;
   height: auto;
}


      </style> 
 </head> 
 <body> 
  <div class="row"> 
   <div class="col pic"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" alt=""> 
   </div> 
   <div class="col">
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
     <br> this is a test this is a test this is a test this is a test 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials