The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
56 |For more details about using Flexbox, see Using CSS flexible boxes. Official spec is here.
57 |* Make sure to check out these tips.
73 |* Click on flexbox values below and edit to see it in action.
78 |.box {
80 |}
93 |<div class="box">\n';
78 | for (var i = 0; i < list.length; i++) {
79 | html += ' <div class="'+list[i]+'">'+list[i]+'</div>\n';
80 | }
81 | html += '</div>';
82 | $element.html(html);
83 | };
84 | draw($scope.box_list);
85 | // How do I reflect that box is being added?
86 | $scope.$watch('box_list', function(newValue, oldValue) {
87 | draw(newValue);
88 | }, true);
89 | }
90 | };
91 | });
92 |
93 | flexDemo.directive('boxDefinition', function(boxes, text) {
94 | return {
95 | templateUrl: 'box-definition.html',
96 | scope: {
97 | name: '=boxDefinition',
98 | index: '='
99 | },
100 | link: function($scope, $element, attrs) {
101 | $scope.text = text;
102 | $scope.box = boxes[$scope.name] = {
103 | order: $scope.index + 1,
104 | flexGrow: 1,
105 | flexShrink: 1,
106 | flexBasis: "auto",
107 | alignSelf: "auto",
108 | minWidth: "auto",
109 | minHeight: "auto",
110 | hoverItem: false,
111 | flexOpen: false
112 | };
113 | }
114 | };
115 | });
116 |
117 | flexDemo.filter('vendorPrefix', function() {
118 | var prefixes = ['webkit', 'moz', 'ms', 'o'];
119 | return function(styles) {
120 | var new_styles = {};
121 | for (var key in styles) {
122 | if (key.indexOf('$') === 0) continue;
123 | new_styles[key] = styles[key];
124 | var upper = key.charAt(0).toUpperCase() + key.slice(1);
125 | prefixes.forEach(function(prefix) {
126 | new_styles[prefix + upper] = styles[key];
127 | });
128 | }
129 | return new_styles;
130 | };
131 | });
--------------------------------------------------------------------------------