FlexboxAdaptiveLayering

flexboxadaptivelayering.markdown

FlexboxAdaptiveLayering

A Pen by Vincent Lecrubier on CodePen.

License.

index.html

<div class="page"> 
  <div class="nav">Nav</div>
  <div class="container">
    <div class="menu">Menu</div>
    <div class="content">
      <div class="panel">
        <img src="http://via.placeholder.com/320x240/00FFFF/000000" class="layer2"/>
        <canvas width=320 height=240 class="layer1" id="myCanvas"/>        
      </div>
    </div>
  </div>
</div>

script.js

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255,0,0,1.0)";
ctx.fillRect(20,20,280,200);

style.css

html, body {
  position:absolute;
  margin:0;
  padding:0;
  width:100vw;
  height:100vh;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
}

.page {
  background-color: #FF00FF;
  position:absolute;
  bottom:0px;
  top:0px;
  right:0px;
  left:0px;
  width:100%;
  height:100%;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  position:relative;
}

.nav {
  background-color: #0000FF;
  flex-grow:0;
  flex-shrink:0;
  flex-basis:40px;
  position:relative;
}

.container {
  background-color: #FF0000;
  display: flex;
  justify-content: space-between;
  position:relative;
  top:0;
  bottom:0;
  flex-grow:1;
  flex-shrink:1;
  flex-basis:40vh;
  position:relative;
}

.menu {
  background-color: #FFFF00;
  flex-basis: 200px;
  flex-grow:0;
  flex-shrink:0;
  position:relative;
}

.content {
  background-color: #00FF00;
  flex-basis: 200px;
  flex-grow:1;
  flex-shrink:1;
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:space-around;
}

.panel {
  background-color:#FFFFFF;
  position:relative;
  margin:10px;
//  width:500px;
//  height:300px;
  flex-grow:1;
  flex-shrink:1;
}

.layer1 {
  mix-blend-mode:multiply;
  background-blend-mode:multiply;
  background-color:rgba(255,0,0,0.5);
  position:absolute;
  max-height:100%;
  max-width:100%;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  max-height:100%;
  max-width:100%;
  width:100%;
  height:100%;
  object-fit: contain;
}

.layer2 {
  mix-blend-mode:multiply;
  background-blend-mode:multiply;
  background-color:rgba(0,255,255,0.5);
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  max-height:100%;
  max-width:100%;
  height:100%;
  width:100%;
  object-fit: contain;
}