Make Flexbox wrap for different alignment for last row - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Wrap

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

Description

Make Flexbox wrap for different alignment for last row

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 .j  a va  2  s . c om-->
   width:100%;
   display:flex;
   flex-direction:column;
   flex-wrap:wrap;
   justify-content:space-between;
   height:100px;
}

.first {
   background-color:Chartreuse;
   width:201px;
   height:100px;
   align-self:flex-start;
}

.second {
   background-color:yellow;
   width:201px;
   height:100px;
   align-self:flex-end;
}

@media screen and (max-width: 400px) {
   .container {
   height:201px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="first"></div> 
   <div class="second"></div> 
  </div>  
 </body>
</html>

Related Tutorials