force flex columns to stay on the same line - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

force flex columns to stay on the same line

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

*
{
   box-sizing: border-box;
}
.flex<!--from ww  w. jav a  2s .com-->
{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.flex > div
{
   flex: 1 0 50%;
   text-align: center;
   padding: 10px;
   overflow: hidden;
}
.flex > div:first-child
{
   flex: 0 1 100%;
}


      </style> 
 </head> 
 <body> 
  <div class="flex"> 
   <div>
     this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test 
   </div> 
   <div>
     this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test 
   </div> 
   <div>
     this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials