Flex items stretching with align items and with align content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Flex items stretching with align items and with align content

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  terryeah</title> 
  <style>

.container{<!--  w ww. j  av  a2  s.  co m-->
   font-size:36px;
   height:800px;
   border: 1px solid black;
   display:flex;
   flex-wrap:wrap;
   align-items:stretch;
}
.box { width:400px; color:#fff; }
.box1 { background:blue; }
.box2 { background:red; }
.box3 { background:yellow; }
.box4 { background:black; }


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="box box1">
     Home 
   </div> 
   <div class="box box2">
     Menu 
   </div> 
   <div class="box box3">
     About Us 
   </div> 
   <div class="box box4">
     Contact Us 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials