Make column with flex-direction: column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Make column with flex-direction: column

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flex basis problem</title> 
  <style>
.container {<!--from   w ww . ja  v  a  2s .  c om-->
   display:flex;
   flex-direction:column;
}

.flex {
   display:flex;
}

.box {
   display:flex;
   flex-direction:row;
   border:2px solid Chartreuse;
   padding:13px;
   justify-content:space-between;
   flex-basis:193px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <h1>welcome!</h1> 
   <div class="flex"> 
    <div class="box"> 
     <span>Hello</span> 
     <span>Again</span> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials