Flex-start and baseline - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Flex-start and baseline

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">

.flex-container {<!--   w  w  w. j a  v  a 2 s.  c om-->
   color: white;
   display: flex;
   height: 300px;
   background-color: yellow;
   justify-content: space-between;
   align-items: baseline;
}
.flex-item {
   background-color: green;
   width: 110px;
   min-height: 100px;
   margin: 10px;
   box-sizing: border-box;
   padding: 5px;
   text-align: center;
}
.item1 {  font-size: 2em; }
.item2 {  font-size: 7em; }
.item3 {  font-size: .5em; }
.item4 {  font-size: 3em; }
.item5 {  font-size: 10em; }
#dashed-line {
   border: 1px dashed red;
   position: absolute;
   width: 100%;
   top: 170px;
}


      </style> 
 </head> 
 <body> 
  <div class="flex-container"> 
   <div class="flex-item item1">
     A 
   </div> 
   <div class="flex-item item2">
     B 
   </div> 
   <div class="flex-item item3">
     C 
   </div> 
   <div class="flex-item item4">
     D 
   </div> 
   <div class="flex-item item5">
     E 
   </div> 
  </div> 
  <div id="dashed-line"></div>  
 </body>
</html>

Related Tutorials