In Flexbox align one button to bottom and one item in the middle - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

In Flexbox align one button to bottom and one item in the middle

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">
html, body {
   height:100%;
   margin:0;
}

.container {<!--from www .  java 2  s . c  o m-->
   display:flex;
   flex-direction:column;
   align-items:center;
   background-color:Chartreuse;
   height:100%;
   box-sizing:border-box;
   justify-content:space-between;
}

.container>div:nth-child(1) {
   visibility:hidden;
}

.box {
   height:51px;
   width:151px;
   background-color:yellow;
   display:flex;
   justify-content:center;
   align-items:center;
   font-size:2.3em;
   box-sizing:border-box;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box"></div> 
   <div class="box">
     SUPERMAN 
   </div> 
   <div class="box">
     BUTTON 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials