Preserving div aspect ratio cross-browser using flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Preserving div aspect ratio cross-browser 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">
div#container {<!--from  w w  w. j  a v a 2 s. co m-->
   padding-top:51px;
   display:flex;
}

div#column1 {
   flex:0 0 auto;
   background-color:Chartreuse;
   box-shadow:4px 0px 11px yellow;
   z-index:10000;
   overflow-y:scroll;
}

div#column2 {
   display:flex;
   flex-direction:column;
}

.row {
   display:flex;
}

.row--top {
   flex:3;
}

.row--bottom {
   flex:2;
}

.cell {
   flex:2;
   padding:0.6em;
   background-color:blue;
   margin:2em;
   box-shadow:pink 0px 2px 7px, rgba(0, 0, 0, 0.13) 0px 2px 5px;
}

.cell-wrap {
   flex-basis:32%;
   display:flex;
   flex-direction:column;
}

.cell-wrap div {
   margin-left:0;
}

div.row--top div#cell1,
div.row--top div.cell-wrap div {
   margin-bottom:0;
}

div.fullwidth {
   width:100%;
}

div.fullheight {
   height:100%;
}

@media screen and (max-width: 1100px)  {
   #container {
      height:auto;
   }
   
   .row {
      flex:0 2 auto;
      flex-direction:column;
   }
   
   .cell {
      background-color:WhiteSmoke;
      flex:2 2 31vw;
   }
   
   #cell4 {
      margin-bottom:0;
   }
   
   .cell-wrap {
      width:100%;
      flex-direction:column;
      flex:0 2 auto;
   }
   
   .cell-wrap div {
      margin-left:2em;
   }

}

@media screen and (max-width: 700px)  {
   .cell {
      background-color:OrangeRed;
      flex-basis:51vw;
   }
   
   div#column1 {
      display:none;
   }

}
</style> 
 </head> 
 <body> 
  <div id="container" class="fullheight fullwidth"> 
   <div class="fullheight" id="column1"> 
    <div id="filterRow"> 
     <div class="selectHolder" id="filters"> 
      <h1>Filter</h1> 
      <div class="spanHolder"> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="fullheight fullwidth" id="column2"> 
    <div class="row row--top"> 
     <div class="cell" id="cell1">
       cell one 
     </div> 
     <div class="cell-wrap"> 
      <div class="cell" id="cell2">
        cell two 
      </div> 
      <div class="cell" id="cell3">
        cell three 
      </div> 
     </div> 
    </div> 
    <div class="row row--bottom"> 
     <div class="cell" id="cell4">
       cell four 
     </div> 
     <div class="cell-wrap"> 
      <div class="cell" id="cell5">
        cell five 
      </div> 
     </div> 
    </div> 
    <!-- </div> --> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials