Align an element to bottom with flexbox - 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 an element to bottom with flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Align an element to bottom with flexbox</title> 
  <style>
.content {<!--  w w w.  j  av a 2 s  . c  o  m-->
   display:flex;
   flex-direction:column;
   height:71vh;
   border:2px solid;
}

p {
   flex-grow:2;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="content"> 
   <h1>heading 1</h1> 
   <h2>heading 2</h2> 
   <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo recusandae doloribus quidem porro laboriosam ducimus fuga harum fugit, adipisci distinctio ab sunt provident assumenda cupiditate quisquam non. Vero, odit corrupti!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo recusandae doloribus quidem porro laboriosam ducimus fuga harum fugit, adipisci distinctio ab sunt provident assumenda cupiditate quisquam non. Vero, odit corrupti!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo recusandae doloribus quidem porro laboriosam ducimus fuga harum fugit, adipisci distinctio ab sunt provident assumenda cupiditate quisquam non. Vero, odit corrupti!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo recusandae doloribus quidem porro laboriosam ducimus fuga harum fugit, adipisci distinctio ab sunt provident assumenda cupiditate quisquam non. Vero, odit corrupti! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo recusandae doloribus quidem porro laboriosam ducimus fuga harum fugit, adipisci distinctio </p> 
   <a href="#" class="button">Click me</a> 
  </div> 
  <div> 
   <p>Hi</p> 
  </div>  
 </body>
</html>

Related Tutorials