Web | FlexBox Playground

by Zoltan Boros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<body ng-app="flexBoxPlayground" ng-controller="FlexBoxPlaygroundController">
    <div class="main-container">
        <div class="controls-container">
            <div>Items:
                <span ng-click="removeItem()" class="button">-</span>
                <span ng-click="addItem()" class="button">+</span>
            </div>
            <div>
                <code class="attribute-name">flex-direction:</code>
                <code ng-repeat="option in flexDirectionOptions" ng-bind="option" class="option"
                    ng-class="{
                        selected : config.flexDirection == option,
                        default  : option == flexDirectionDefault
                    }"
                    ng-click="config.flexDirection = option"></code>
            </div>
            <div>
                <code class="attribute-name">justify-content:</code>
                <code ng-repeat="option in justifyContentOptions" ng-bind="option" class="option"
                    ng-class="{
                        selected : config.justifyContent == option,
                        default  : option == justifyContentDefault
                    }"
                    ng-click="config.justifyContent = option"></code>
            </div>
            <div>
                <code class="attribute-name">align-items:</code>
                <code ng-repeat="option in alignItemsOptions" ng-bind="option" class="option"
                    ng-class="{
                        selected : config.alignItems == option,
                        default  : option == alignItemsDefault
                    }"
                    ng-click="config.alignItems = option"></code>
            </div>
            <div>
                <code class="attribute-name">flex-wrap:</code>
                <code ng-repeat="option in flexWrapOptions" ng-bind="option" class="option"
                    ng-class="{
...

CSS

.main-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.controls-container {
    margin: 0 0 1em 0;
}
.flex-container {
    height: 300px;
    display: flex;
    justify-content: space-around; /* flex-start, flex-end, center, space-between, space-around */
    border: 1px solid #000000;
    background-color: #e0e0e0;
}
.box {
    border: 1px dashed #808080;
    background-color: #d0d0d0;
}
.button {
    margin: 0 0 0 1em;
    padding: 0 0.5em;
    background-color: #e0e0e0;
    cursor: pointer;
}
.attribute-name {
    display: inline-block;
    width: 140px;
}
.option {
    margin: 0 0 0 1em;
    cursor: pointer;
}
.option.default {
    font-weight: bold;
}
.option.selected {
    background-color: #e0e0e0;
}

JavaScript

var flexBoxPlayground = angular.module('flexBoxPlayground', []);
flexBoxPlayground.controller('FlexBoxPlaygroundController', ['$scope', FlexBoxPlaygroundController]);

function FlexBoxPlaygroundController($scope)
{
	$scope.flexDirectionOptions = [ 'row', 'row-reverse', 'column', 'column-reverse' ];
    $scope.flexDirectionDefault = 'row';
	$scope.justifyContentOptions = [ 'flex-start', 'center', 'flex-end', 'space-around', 'space-between' ];
    $scope.justifyContentDefault = 'flex-start';
    $scope.alignItemsOptions = [ 'stretch', 'baseline', 'flex-start', 'center', 'flex-end' ];
    $scope.alignItemsDefault = 'stretch';
    $scope.flexWrapOptions = [ 'nowrap', 'wrap', 'wrap-reverse' ];
    $scope.flexWrapDefault = 'nowrap';
    $scope.alignContentOptions = [ 'stretch', 'space-around', 'space-between', 'flex-start', 'center', 'flex-end' ];
    $scope.alignContentDefault = 'stretch';
    
    $scope.config = {
    	flexDirection  : $scope.flexDirectionOptions[0],
    	justifyContent : $scope.justifyContentOptions[0],
        alignItems     : $scope.alignItemsOptions[0],
        flexWrap       : $scope.flexWrapOptions[0],
        alignContent   : $scope.alignContentOptions[0]
    };
    
	$scope.items = [ 'FooBar1', 'FooBar2', 'FooBar3' ];
    
    $scope.getStyleAttributes = function()
    {
    	return {
        	'flex-direction'  : $scope.config.flexDirection,
        	'justify-content' : $scope.config.justifyContent,
            'align-items'     : $scope.config.alignItems,
            'flex-wrap'       : $scope.config.flexWrap,
            'align-content'   : $scope.config.alignContent
        };
    };
    
    $scope.addItem = function()
    {
    	$scope.items.push('FooBar' +($scope.items.length + 1));
    };
    
    $scope.removeItem = function()
    {
    	if (0 < $scope.items.length) {
    		$scope.items.pop();
        }
    };
}