Some Layout function

by HerrSerker

HTML

<div class="full-stretch">
        <div class="flex-layout flex-layout-vertical">
            <div class="flex-layout-fixed" style="height:50px; text-align: center">
                <div class="padding">Title</div>
            </div>
            <div class="flex-layout-consume flex-layout-consume-3" style="text-align: center">
                <div class="flex-layout flex-layout-horizontal">
                    <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                        <div class="padding">Panel 0</div>
                    </div>
                    <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                        <div class="padding">Panel 1</div>
                    </div>
                    <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                        <div class="padding">Panel 2</div>
                    </div>
                </div>
                
            </div>
            <div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
                <div class="padding">Panel 3</div>
            </div>
        </div>
</div>

CSS

.full-stretch {
    position: absolute;
    top: 2px;
    right:2px;
    bottom:2px;
    left: 2px;
}
.padding {
    position: absolute;
    top: 2px;
    right:2px;
    bottom:2px;
    left: 2px;
    border: 1px solid darkGray;
    background: lightBlue;
    border-radius: 10px;
}

.flex-layout {
    position: absolute;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow: hidden;
}

.flex-layout-consume {
    height: 100%;
    float:left;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.flex-layout-vertical > .flex-layout-consume {
    width: 100%;
}


.flex-layout-fixed {
    height: 100%;
    float:left;
    overflow: hidden;
    position: relative;
    
}
.flex-layout-vertical > .flex-layout-fixed {
    width: 100%;
}

JavaScript

(function($) {
  
  var flex = function() {
      $('.flex-layout').each(function() {
          var fixed = $(this).children('.flex-layout-fixed');
          
          
          if ($(this).hasClass('flex-layout-horizontal')) { // horizontal
              var fixed_widths = $(this)
                  .children('.flex-layout-fixed')
                  .get()
                  .reduce(function(total, elem) {
                      return (total + $(elem).outerWidth())
                  },0)
              ;
              var remain_width = ($(this).outerWidth() - fixed_widths)/$(this).outerWidth() * 100; // percent
              var consumers = $(this)
                  .children('.flex-layout-consume')
                  .get()
              ;
              var count_consumers = consumers
                  .reduce(function(total, elem) {
                      var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
                      $(elem).data('consume_multiplicator', cm);
                      return total + cm;
                  },0)
              ;
              var consumers_tic = (remain_width/count_consumers)
              $(consumers).each(function() {
                  $(this).width(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
              }) 

                  
          } else if ($(this).hasClass('flex-layout-vertical')) { // vertical
              var fixed_heights = $(this)
                  .children('.flex-layout-fixed')
                  .get()
                  .reduce(function(total, elem) {
                      return (total + $(elem).outerHeight())
                  },0)
              ;
              var remain_height = ($(this).outerHeight() - fixed_heights)/$(this).outerHeight() * 100; // percent
              var consumers = $(this)
                  .children('.flex-layout-consume')
                  .get()
              ;
              var count_consumers = consumers
      ...