"rowspan" behavior with flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Row

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

Description

"rowspan" behavior with flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Veiko</title> 
  <style>

body {<!--from  w w w.j a  va2  s.co  m-->
   margin: 0;
}
.foo {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   display: -webkit-flex;
   -webkit-flex-wrap: wrap;
   -webkit-flex-direction: column;
   height: 200px;
}
.a, .c {
   flex: 0 0 50%;
   -webkit-flex: 0 0 50%;
   background: green;
}
.b {
   -webkit-flex: 0 0 100%;
   flex: 0 0 100%;
   -webkit-order: 1;
   order: 1;
   background: blue;}
   .c {
      background: red;}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="foo"> 
   <div class="a"></div> 
   <div class="b"></div> 
   <div class="c"></div> 
  </div>  
 </body>
</html>

Related Tutorials