Make Flexbox alignment with images and text inside same container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Make Flexbox alignment with images and text inside same container

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">
.flex-container {<!--  w w w  .  java 2s  . c  om-->
   display:-webkit-flex;
   display:flex;
   -webkit-flex-direction:row;
   flex-direction:row;
   -webkit-align-items:center;
   align-items:center;
   flex-wrap:wrap;
   min-width:321px;
   max-width:1221px;
}

.flex-item {
   height:121px;
   width:301px;
   background-color:Chartreuse;
   border:2px solid yellow;
   margin:4px;
   padding:11px 0 0 11px;
}

.info-container {
   display:inline-block;
   vertical-align:top;
   padding:0 0 0 6px;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

.info-container p {
   padding:0;
   margin:0 0 11px;
}
</style> 
 </head> 
 <body> 
  <div class="flex-container"> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/Safari.png"> 
    <div class="info-container"> 
     <p>Field 1</p> 
     <p>Field 2</p> 
     <p>Field 3</p> 
    </div> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    <div class="info-container"> 
     <p>Field 1</p> 
     <p>Field 2</p> 
     <p>Field 3</p> 
    </div> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <span>Text fields will go here</span> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
    <span>Text fields will go here</span> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <span>Text fields will go here</span> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <span>Text fields will go here</span> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/Safari.png"> 
    <span>Text fields will go here</span> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
    <span>Text fields will go here</span> 
   </div> 
   <div class="flex-item"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
    <span>Text fields will go here</span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials