In Flexbox align Image to the right and Content in the left - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

In Flexbox align Image to the right and Content in the left

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flex - Image and Content</title> 
  <style>
.container {<!--  w  ww. j a  v  a 2s.  c o m-->
   background-color:Chartreuse;
   display:flex;
   flex-direction:row-reverse;
   justify-content:space-between;
}

.image img {
   display:block;
   max-width:100%;
   max-height:301px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="image"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
   </div> 
   <div class="text">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials