Square Blocks with Flex Box - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Square Blocks with Flex Box

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>equal blocks</title> 
  <style>

section {<!--from w w  w . java 2  s  .co  m-->
   margin-bottom: 3rem;
   text-align: center;
}
ul {
   list-style: none;
   height: 25vmax;
   width: 25vmax;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   margin: auto;
   padding: 0px;
}
li {
   flex: 0 0 50%;
   height: 50%;
   color: white;
   text-align: center;
}
li:nth-child(1) {
   background-color: #ff4136;
}
li:nth-child(2) {
   background-color: #FFDC00;
}
li:nth-child(3) {
   background-color: #0074d9;
}
li:nth-child(4) {
   background-color: #2ecc40;
}


      </style> 
 </head> 
 <body translate="no"> 
  <section> 
   <h1>Square Blocks with Flex Box</h1> 
   <h2> this is a test. </h2> 
  </section> 
  <section> 
   <h3>A. </h3> 
   <ul> 
    <li>a1</li> 
    <li>a2</li> 
    <li>a3</li> 
    <li>a4</li> 
   </ul> 
  </section> 
  <section> 
   <h3>B. </h3> 
   <ul> 
    <li> b1 <br> b1 <br> b1 </li> 
    <li>b2</li> 
    <li>b3</li> 
    <li>b4</li> 
   </ul> 
  </section> 
  <section> 
   <h3>C. </h3> 
   <ul> 
    <li> c1 <br> c1 <br> c1 </li> 
    <li>c2</li> 
    <li>c3</li> 
    <li> c4 <br> c4 <br> c4 </li> 
   </ul> 
  </section>  
 </body>
</html>

Related Tutorials