Edit on
<div class="demo-container">
  <div class="demo-item">
    <div class="vis-container">
      <div class="vis-container__start">
        Cross<br>Start
      </div>
      <div class="vis-container__body main-axes">
        <div class="main-axes__start">Main<br>Start</div>
        <div class="main-axes__body">
          <img src="http://www.delphicdigital.com/wp-content/uploads/2015/11/FlexBoxAxes.jpg" class="bgAxesPic" alt="" />
          <div class="flex-container">
            <div class="flex-item flex-item__1"><h1>1</h1></div>
            <div class="flex-item flex-item__2"><div class="spacer"></div><h2>2</h2></div>
            <div class="flex-item flex-item__3"><p>text</p><h3>3</h3></div>
          </div>
        </div>
        <div class="main-axes__end">Main<br>End</div>
      </div>
      <div class="vis-container__end">
        Cross<br>End
      </div>
    </div>
  </div>
  <div class="demo-item ctrl-container">
    <code>
      .flex-container { <br>
      <label>flex-direction:</label><input type="text" name="flexdirection" id="flexdirection">;
      <br>
      <label>justify-content:</label><input type="text" name="justifycontent" id="justifycontent">;
      <br>
      <label>align-items:</label><input type="text" name="alignitems" id="alignitems">;<br>
      <label>align-content:</label><input type="text" name="alignitems" id="aligncontent">;<br>
      }
    </code>
    <br><br>
    <button id="addButton">Add Flex Item</button> 
    <button id="removeButton">Remove Flex Item</button>
  </div>
</div>

.demo-container {
  display:flex;
  //no effect as child has flex-grow
  //justify-content: space-between;
  align-items: center;
  text-align:center;
  font-family: sans-serif;
  .ctrl-container {
    flex-grow:1;
    code {  
      display:inline-block;
      text-align:left; 
      label {
        width:115px;
        display:inline-block;
        margin-left:30px;
        color:red;
      }
    }
  }
}

.vis-container {
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  font-weight:bold;
  &__start { color:darkgreen; }
  &__body{
    
  } 
  &__end{ color:darkred; }
}

.main-axes {
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  &__start { color: darkgreen; }
  &__body {
    border: 1px solid black;
    position: relative;
    img {
      display:block;
      width:374px;
      height:374px;
    }
  }
  &__end { color: darkred; }
}

.flex-container {
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  z-index:5;
  background-color: rgba(255,255,255,0.5);
  
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  .flex-item {
    counter-increment: item; 
    background-color: rgba(144, 238, 144, 0.6);
    &__1 { min-width: 50px; min-height:200px; }
    &__2 { min-width: 100px; min-height:50px; 
      .spacer { width:20px; height:60px; background-color: rgba(red, 0.5);}
    }
    &__3 { min-width: 100px; min-height:100px; }
    .added {
      width:50px;
      height:50px;
    }
  }
}

h1, h2, h3 { margin:0; }
h1 { font-size:75px;}
View Compiled
$(document).keypress(function(e) {
    if(e.which == 13) {
        updateVals();
    }
});
function updateVals(){
  //set flex direction
  var mainDirection = $( '#flexdirection' ).val();
  var crossDirection = 'column';
  $('.bgAxesPic').css('transform', 'rotate(0deg)');
  if (mainDirection == 'row' || mainDirection == 'row-reverse') { 
    crossDirection = 'column'; 
  } else if (mainDirection == 'column' || mainDirection == 'column-reverse') {
    crossDirection = 'row';
    $('.bgAxesPic').css('transform', 'rotate(90deg)');
  }
  
  $('.flex-container').css('flex-direction', mainDirection);
  $('.main-axes').css('flex-direction', mainDirection);
  $('.vis-container').css('flex-direction', crossDirection);


  //set justify content
  var justifyVal = $( '#justifycontent' ).val();
  $('.flex-container').css('justify-content', justifyVal);

  //set align items
  var alignVal = $( '#alignitems' ).val();
  $('.flex-container').css('align-items', alignVal);
  
  var alignCont = $('#aligncontent').val();
  $('.flex-container').css('align-content', alignCont);
};

$('#addButton').on('click', function(){
  $('.flex-container').append('<div class="flex-item added"><p>Hello</p></div>')
});

$('#removeButton').on('click', function(){
  $('.added').last().remove();
});
Rerun