Create flexbox with images - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Create flexbox with images

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.flexbox {<!--  w  ww  . ja va2s .c om-->
   display:-webkit-flex;
   -webkit-align-items:center;
   -webkit-justify-content:center;
   display:-ms-flexbox;
   display:flex;
   overflow:auto;
   flex-wrap:nowrap;
}

.flexbox .col {
   flex:2;
   padding:21px;
}

.flexbox .col:nth-child(1) {
   -webkit-order:2;
   -ms-flex-order:2;
   order:2;
}

.flexbox .col:nth-child(2) {
   -webkit-order:0;
   -ms-flex-order:0;
   order:0;
}

.flexbox .col:nth-child(3) {
   -webkit-order:3;
   -ms-flex-order:3;
   order:3;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="flexbox"> 
   <div class="col"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
   </div> 
   <div class="col">
     contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 contents of column 2 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials