Make Flexbox to Wrap Center Item on New Line First - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Make Flexbox to Wrap Center Item on New Line First

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Align items  bottom and left zero of div vertically</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
ul li {
   width:100px;
   height:100px;
   padding:11px;
}

.red {<!--from w  w  w  .j a va2s.  c o  m-->
   background-color:Chartreuse;
}

.green {
   background-color:yellow;
}

.blue {
   background-color:blue;
}

ul {
   height:100vh;
   display:flex;
   justify-content:flex-end;
   align-items:flex-start;
   flex-direction:column;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li class="red">one-1</li> 
   <li class="blue">two-2</li> 
   <li class="green">three-3</li> 
  </ul>  
 </body>
</html>

Related Tutorials