JSFiddle - React, Tailwind, and code Playground

flexbox dashboard

by Andrew Pougher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div id="container-fluid" ng-controller="MyCtrl">
  <div id="row">
    <div id="flexcanvas" class="text-center">
      <div class="box columnParent">

        <div class="box mast">
          <div class="controls">
            <div class="col-lg-2"> ONE ONEONE ONE ONE </div>
            <div class="col-lg-2"> TWO </div>
            <div class="col-lg-2"> THREE
              <div id="size" class="inline"></div>
            </div>
            <div class="col-lg-2"> FOUR </div>
            <div class="col-lg-4"> FOUR </div>
          </div>
        </div>

        <div id="windows" class="box rowParent">
          <div class="canvasgrid" id="artboard">
            <div id="object" style="position:absolute;z-index:0">
              <img src="http://placehold.it/1200x190/7d5345/ffffff/&text=name" class="img-responsive">
            </div>

            <img src="http://placehold.it/100x100/transparent/333333/&text={{text}}" class="img-responsive" style="position:absolute;z-index:2">
            <img src="http://placehold.it/100x100/ecdd35/ffffff/&text=icon" class="img-responsive" style="position:absolute;z-index:1;margin-left:34%" id="icon">

          </div>

          <div class="flexright right">R</div>
        </div>
      </div>


    </div>

  </div>
</div>

CSS

#flexcanvas {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 100vh;
  min-width: 300px;
}

.rowParent,
.columnParent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.columnParent {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.box {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.flexright {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  overflow-y: scroll;
}

.mast {
  background: pink;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  background: red;
}

.right {
  background: blue
}

#windows {
  margin: 0;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.controls {
  margin: 0;
  display: flex;
  /* middle center */
  align-items: center;
  /* middle center */
  justify-content: center;
  /* middle center */
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.controls > div {
  flex: 1;
  background:...

JavaScript

var app = angular.module('drewApp', []);
app.controller('MyCtrl', function ($scope) {
    $scope.text = "TEXT";
   
});

$(document).ready(function() {
  $("#object").css({
    "width": document.getElementById('artboard').offsetWidth + "px"
  });
});

$(window).resize(function(evt) {
  var width = document.getElementById('artboard').offsetWidth;
  var productheight = document.getElementById('object').offsetHeight;
  $("#object").width(width);
  $("#icon").width(productheight);
  $("#size").html(width)
});