make gallery row go to new line with flex - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Row

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

Description

make gallery row go to new line with flex

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

.container{<!--  w  w w .ja v  a 2  s .  c o  m-->
   display:flex;
   justify-content:space-evenly;
   align-items:center;
   flex-wrap: wrap;
}
.inner{
   width:30%;
   background:#efefef;
   margin-left:1.662%;
   margin-right:1.662%;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="inner"> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perferendis dolor, ducimus facilis voluptas provident consectetur natus modi eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, doloribus vel fuga? </p> 
   </div> 
   <div class="inner"> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perferendis dolor, ducimus facilis voluptas provident consectetur natus modi eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, doloribus vel fuga? </p> 
   </div> 
   <div class="inner"> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perferendis dolor, ducimus facilis voluptas provident consectetur natus modi eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, doloribus vel fuga? </p> 
   </div> 
   <div class="inner"> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perferendis dolor, ducimus facilis voluptas provident consectetur natus modi eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, doloribus vel fuga? </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials