Layout child to be the only on its row within its flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Row

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

Description

Layout child to be the only on its row within its flexbox

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

.parent {<!--from   w w  w.j a  v a 2 s  .  c  o m-->
   padding: 10px 0;
   display: flex;
   flex-flow: row wrap;
   align-content: center;
   justify-content flex-start;
}
.child {
   margin: 10px;
   flex: 1 0 auto;
   min-width: 40%;
   min-height: 50px;
}
.child.stretch {
   flex: 1 100%;
}
.red {background:red;}
.green {background:green;}
.blue {background:blue;}
.yellow {background:yellow;}


      </style> 
 </head> 
 <body> 
  <div class="parent"> 
   <div class="child red"></div> 
   <div class="child green"></div> 
   <div class="child stretch blue"></div> 
   <div class="child yellow"></div> 
  </div> this is a test this is a tst
 </body>
</html>

Related Tutorials