Align row flex elements in columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Align row flex elements in columns

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <style>

#sentinels {<!--from   w w w  . j a v a  2  s .c o m-->
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 200px;
}
.line {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   background-color: blue;
   height: 60px;
}
.outer {
   width: 100%;
   margin-left: 10px;
   margin-right: 10px;
}
.inner {
   background-color: green;
   height: 100%;
}
#in1 {
   width: 40px;
}
#in2 {
   width: 100px;
}
#in3 {
   width: 80px;
}
#in4 {
   width: 100px;
}
#in5 {
   width: 10px;
}
#in6 {
   width: 30px;
}

      </style> 
 </head> 
 <body> 
  <div id="sentinels"> 
   <div id="line1" class="line"> 
    <div class="outer"> 
     <div id="in1" class="inner"></div> 
    </div> 
    <div class="outer"> 
     <div id="in2" class="inner"></div> 
    </div> 
    <div class="outer"> 
     <div id="in3" class="inner"></div> 
    </div> 
   </div> 
   <div id="line2" class="line"> 
    <div class="outer"> 
     <div id="in4" class="inner"></div> 
    </div> 
    <div class="outer"> 
     <div id="in5" class="inner"></div> 
    </div> 
    <div class="outer"> 
     <div id="in6" class="inner"></div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials