使用Angular.js构建弹性盒子布局用法的可视化演示

Angular.js Visualizing Flexbox，CSS3弹性框布局所见即所得的演示页面，基于AngularJS构建。

css3, flexbox, angular

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2486
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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;
        }
    });

编译

CSS

html,
body {
    margin: 10px;
    padding: 0;
    font-family: sans-serif;
}
ul.flex-container {
    padding: 0;
    margin: 0;
    width: 100%;
    border: 5px dotted #000;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    list-style: none;
}
ul.flex-container li {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: 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;
}
ul.flex-container li.active {
    background: #1abc9c;
    color: #ffffff;
}
label {
    display: block;
    padding: 10px 0 0 20px;
    white-space: nowrap;
}
.controls {
    width: 400px;
}
.controls .inner {
    overflow-y: auto;
}
.main {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
}

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>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-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>

Angular.js Visualizing Flexbox，CSS3弹性框布局所见即所得的演示页面，基于AngularJS构建。

css3, flexbox, angular

编辑器支持Emmet

快捷键

Angular.js Visualizing Flexbox，CSS3弹性框布局所见即所得的演示页面，基于AngularJS构建。

css3, flexbox, angular

使用AngularJS实现的数学加减乘除可视化计算器

使用Grid.css实现的多列弹性布局在线实例演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：