Create column span like layout for button using flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Create column span like layout for button using flexbox

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

.container {<!--from   w w  w.  ja v  a 2  s . c o  m-->
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   background-color: blue;
   width: 200px;
   padding: 10px;
}
button { margin: 5px 0; }
button:nth-of-type(1), button:nth-of-type(4) {  flex: 1 1 100%; }
button:nth-of-type(2), button:nth-of-type(3) {  flex: 0 1 45%;  }


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <button>Button1</button> 
   <button>Button2</button> 
   <button>Button3</button> 
   <button>Button4</button> 
  </div>  
 </body>
</html>

Related Tutorials