Visualizing Flexbox

index.html

<div ng-app="app" ng-controller="MainController" class="main">
  <div class="controls">
    <div class="inner">
      <h1>Visualizing Flexbox</h1>
      <h3>Content</h3>
      <label>number of children
        <input type="number" ng-model="numChildren" min="1" max="100">
      </label>
      <h3>Parent</h3>
      <label>flex-direction
        <select ng-model="containerStyle['flex-direction']" ng-options="o for o in flexDirectionOptions"></select>
      </label>

      <label>flex-wrap
        <select ng-model="containerStyle['flex-wrap']" ng-options="o for o in flexWrapOptions"></select>
      </label>

      <label>justify-content
        <select ng-model="containerStyle['justify-content']" ng-options="o for o in justifyContentOptions"></select>
      </label>

      <label>align-items
        <select ng-model="containerStyle['align-items']" ng-options="o for o in alignItemsOptions"></select>
      </label>

      <label>align-content
        <select ng-model="containerStyle['align-content']" ng-options="o for o in alignItemsOptions"></select>
      </label>  

      <h3>Child</h3>

      <label>order
        <input type="number" ng-model="childStyle[selected]['order']">
      </label>

      <label>flex-grow
        <input type="number" ng-model="childStyle[selected]['flex-grow']">
      </label>

      <label>flex-shrink
        <input type="number" ng-model="childStyle[selected]['flex-shrink']">
      </label>

      <label>align-self
        <select ng-model="childStyle[selected]['align-self']" ng-options="o for o in alignItemsOptions"></select>
      </label>
    </div>
  </div>
  <ul class="flex-container" ng-style="containerStyle">
    <li ng-repeat="i in items track by $index" ng-style="childStyle[$index]" ng-click="select($index);" ng-class="{active: selected === $index}" ng-if="$index < numChildren">{{ i }}</li> 
  </ul>
</div>

script.js

angular.module('app', [])
.controller('MainController', function($scope) {
  $scope.numChildren = 10;
  $scope.items = [];
  for (var i = 100; i > 0; i--) {
    $scope.items.push(i);
  }
  $scope.items = $scope.items.reverse();

  $scope.containerStyle = {};
  $scope.childStyle = [];
  $scope.selected = 0;
  
  $scope.flexDirectionOptions = ['row', 'row-reverse', 'column', 'column-reverse'];
  $scope.containerStyle['flex-direction'] = $scope.flexDirectionOptions[0];
  
  $scope.flexWrapOptions = ['nowrap', 'wrap', 'wrap-reverse'];
  $scope.containerStyle['flex-wrap'] = $scope.flexWrapOptions[0];
  
  $scope.justifyContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
  $scope.containerStyle['justify-content'] = $scope.justifyContentOptions[0];
  
  $scope.alignItemsOptions = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
  $scope.containerStyle['align-items'] = $scope.alignItemsOptions[0];
  
  $scope.containerStyle['align-content'] = $scope.alignItemsOptions[0];
  
  $scope.select = function(index) { $scope.selected = index; }
})
;

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

@import "bourbon";
html, 
body {
  margin: 10px; 
  padding: 0; 
  font-family: sans-serif; 
}

ul.flex-container {
  padding: 0; 
  margin: 0; 
  width: 100%; 
  border: 5px dotted #000;
  
  @include display(flex);
  @include flex-wrap(wrap);
  @include flex-direction(row);
  list-style: none; 
  li {
    @include display(flex);
    @include justify-content(center);
    @include align-items(center);
    
    width: 60px;
    height: 60px; 
    background: #ccc;
    border: 1px solid #666;
    margin: 0 0 10px 10px;
    font-size: 2em;
    color: rgba(0,0,0,0.6);
    cursor: pointer; 
    
    &.active {
      background: #1abc9c;
      color: #ffffff;
    }
  }
}

label {
  display: block; 
  padding: 10px 0 0 20px;
  white-space: nowrap;
}

.controls { 
  width: 400px;
  .inner {
    overflow-y: auto; 
  }
}

.main {
  @include display(flex);
  @include flex-direction(row);
}

Visualizing Flexbox.markdown

Visualizing Flexbox

Angularjs app to help better understand the properties of css Flexbox

A Pen by paul trone on CodePen.

License.