Content-box-mode

by Reusablecode

HTML

<p>Horizontal Box</p>
    <div class="hbox">
      <div class="flex_child_1" style="width: 100px;"></div>
      <div class="flex_child_2" style="width: 200px;"></div>
    </div>
    <p>Vertical Box</p>
    <div class="vbox">
      <div class="flex_child_1" style="height: 50px;"></div>
      <div class="flex_child_2" style="height: 50px;"></div>
    </div>
    <button id="switch-button" type="button" value="flex">Disable Flexibility!</button>

CSS

@page { legal portrait; }


    .hbox {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-align: stretch;
      
        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-align: stretch;
      
        display: box;
        box-orient: horizontal;
        box-align: stretch;
      
        width: 500px;
        height: 100px;
        background-color: wheat;
        border: 2px solid peru;
      }
      
      .vbox {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-align: stretch;
      
        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-align: stretch;
      
        display: box;
        box-orient: vertical;
        box-align: stretch;
      
        width: 300px;
        height: 160px;
        background-color: palegreen;
        border: 2px solid green;
      }
      
      .hbox > *, .vbox > * {
        border: 1px solid black;
        font: 16px/50px Arial;
        text-align: center;
      }
      
      .flex_child_1 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      }
      
      .flex_child_2 {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        box-flex: 2;
      }
      
      button {
        margin-top: 30px;
      }
      
      p {
        font: 20px Arial;
      }

JavaScript

/* Convert a NodeList to an Array */
function toArray(nodelist) {
  return Array.prototype.slice.call(nodelist);
}

var flex_children = [
      toArray(document.getElementsByClassName('flex_child_1')),
      toArray(document.getElementsByClassName('flex_child_2'))
    ];

/* Update the displayed size number of inner boxes */
function updateDisplayInfo() {
  var hbox = toArray(document.querySelectorAll('.hbox > *'));
  var vbox = toArray(document.querySelectorAll('.vbox > *'));

  hbox.forEach( function(node) {
    node.innerHTML = 'w: ' + getComputedStyle(node, null).getPropertyValue('width');
  });

  vbox.forEach( function(node) {
    node.innerHTML = 'h: ' + getComputedStyle(node, null).getPropertyValue('height');
  });
} 

var button = document.getElementById('switch-button');

button.addEventListener('click', function() {
  if (this.value == 'flex') {
    this.value = 'inflex';
    this.innerHTML = 'Enable Flexibility!';
    flex_children.forEach( function(array) {
      array.forEach( function(node) {
        node.removeAttribute('class');
      });
    });
  } else {
    this.value = 'flex';
    this.innerHTML = 'Disable Flexibility!';
    flex_children.forEach( function(array, index) {
      array.forEach( function(node) {
        node.setAttribute('class', 'flex_child_' + (index + 1));
      });
    });
  }
  updateDisplayInfo();   
}, false);

updateDisplayInfo();