-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
120 lines (115 loc) · 9.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html xmlns:og="http://ogp.me/ns#" ng-app="flexDemo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Flexbox Please!</title>
<meta name="description" content="Test CSS flexbox with this interactive tool">
<meta name="author" content="Eiji Kitamura">
<!-- <meta http-equiv="content-security-policy" content="default-src: 'self';" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="CSS Flexbox Please!">
<meta property="og:type" content="website">
<meta property="og:description" content="Test CSS flexbox with this interactive tool">
<meta property="og:url" content="http://demo.agektmr.com/flexbox/">
<meta property="og:image" content="http://slides.agektmr.com/websocket_basic/images/h5_logo.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/angular.js"></script>
<script src="js/script.js"></script>
<script type="text/ng-template" id="box-definition.html">
<h3 ng-mouseenter="box.hoverItem=true" ng-mouseleave="box.hoverItem=false">{{name}}</h3>
<p class="form">.box div.{{name}} {</p>
<ul class="form">
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/order" target="_blank" title="{{text.orderText}}">order</a>:<input type="number" ng-model="box.order" min="-1" max="10" /></li>
<li><i ng-class="{'icon-plus':!box.flexOpen, 'icon-minus':box.flexOpen}" ng-click="box.flexOpen=!box.flexOpen"></i> <a href="https://developer.mozilla.org/en-US/docs/CSS/flex" target="_blank" title="{{text.flexText}}">flex</a>: <input type="number" ng-model="box.flexGrow" min="0" ng-disabled="box.flexOpen"/> <input type="number" ng-model="box.flexShrink" min="0" ng-disabled="box.flexOpen"/> <input type="text" ng-model="box.flexBasis" list="flexBasis" ng-disabled="box.flexOpen" />;
<ul ng-show="box.flexOpen">
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/flex-grow" target="_blank" title="{{text.flexGrowText}}">flex-grow</a>: <input type="number" ng-model="box.flexGrow" min="0"/>;</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/flex-shrink" target="_blank" title="{{text.flexShrinkText}}">flex-shrink</a>: <input type="number" ng-model="box.flexShrink" min="0"/>;</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/flex-basis" target="_blank" title="{{text.flexBasisText}}">flex-basis</a>: <input type="text" ng-model="box.flexBasis" list="flexBasis" />;</li>
</ul>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/align-self" target="_blank" title="{{text.alignSelfText}}">align-self</a>: <select ng-model="box.alignSelf" ng-options="alignSelf for alignSelf in ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']"></select>;</li>
<li>min-width: <input type="text" ng-model="box.minWidth" />;</li>
<li>min-height: <input type="text" ng-model="box.minHeight" />;</li>
</ul>
<p class="form">}</p>
</script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<span class="brand">CSS Flexbox Please!</span>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1 class="hidden-phone">CSS Flexbox Please!</h1>
<p>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.</p>
<p>For more details about using Flexbox, see <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" target="_blank">Using CSS flexible boxes</a>. Official spec is <a href="http://www.w3.org/TR/css3-flexbox/" target="_blank">here</a>.</p>
</div >
<div class="row" ng-controller="FlexboxCtrl">
<div class="span6 sticky">
<h3>Output</h3>
<div class="visual">
<div class="box" ng-style="model | vendorPrefix" ng-class="{hover:hoverContainer}">
<div ng-style="box | vendorPrefix" ng-class="{hover:hoverItems||box.hoverItem}" ng-repeat="(name, box) in boxes">{{name}}</div>
</div>
</div>
<div class="btn-group" style="text-align:center;">
<a class="btn" ng-click="add_box()" ng-disabled="box_list.length==10"><i class="icon-plus"></i> Add box</a>
<a class="btn" ng-click="remove_box()" ng-disabled="box_list.length==1"><i class="icon-minus"></i> Remove box</a>
</div>
<div box-visual style="margin-top:6px;"></div>
<div>
<p>* Make sure to check out <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes#Flex_item_considerations" target="_blank">these tips</a>.</p>
</div>
</div>
<div class="span5 row well">
<div>
<p>* Click on flexbox values below and edit to see it in action.</p>
<h3 ng-mouseenter="hoverContainer=true" ng-mouseleave="hoverContainer=false">flex container</h3>
<p class="form">.box {</p>
<ul class="form">
<li>display: flex;</li>
<li><i ng-class="{'icon-plus':!flexFlowOpen, 'icon-minus':flexFlowOpen}" ng-click="flexFlowOpen=!flexFlowOpen"></i> <a href="https://developer.mozilla.org/en-US/docs/CSS/flex-flow" target="_blank" title="{{text.flexFlowText}}">flex-flow</a>: <select ng-model="model.flexDirection" ng-options="flexDirection for flexDirection in ['row', 'row-reverse', 'column', 'column-reverse']" ng-disabled="flexFlowOpen" ></select> <select ng-model="model.flexWrap" ng-options="flexWrap for flexWrap in ['nowrap', 'wrap', 'wrap-reverse']" ng-disabled="flexFlowOpen" ></select>;
<ul ng-show="flexFlowOpen">
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/flex-direction" target="_blank" title="{{text.flexDirectionText}}">flex-direction</a>: <select ng-model="model.flexDirection" ng-options="flexDirection for flexDirection in ['row', 'row-reverse', 'column', 'column-reverse']"></select>;</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/flex-wrap" target="_blank" title="{{text.flexWrapText}}">flex-wrap</a>: <select ng-model="model.flexWrap" ng-options="flexWrap for flexWrap in ['nowrap', 'wrap', 'wrap-reverse']"></select>;</li>
</ul>
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/justify-content" target="_blank" title="{{text.justifyContentText}}">justify-content</a>: <select ng-model="model.justifyContent" ng-options="justifyContent for justifyContent in ['flex-start', 'flex-end', 'center', 'space-between', 'space-around']"></select>;</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/align-content" target="_blank" title="{{alignContentText}}">align-content</a>: <select ng-model="model.alignContent" ng-options="alignContent for alignContent in ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']"></select>;</li>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/align-items" target="_blank" title="{{alignItemsText}}">align-items</a>: <select ng-model="model.alignItems" ng-options="alignItems for alignItems in ['flex-start', 'flex-end', 'center', 'baseline', 'stretch']"></select>;</li>
</ul>
<p class="form">}</p>
</div>
<div>
<h3 ng-mouseenter="hoverItems=true" ng-mouseleave="hoverItems=false">flex item</h3>
<div ng-repeat="name in box_list" box-definition="name" index="$index" class="box-definition form"></div>
<datalist id="flexBasis">
<option value="auto"></option>
<option value="initial"></option>
<option value="none"></option>
<option value="10px"></option>
<option value="10%"></option>
</datalist>
</div>
</div>
</div>
<footer class="footer">
<hr>
<p>This demo is developed by <a href="http://profiles.google.com/agektmr">Eiji Kitamura</a>. Special thanks to <a href="https://plus.google.com/104744871076396904202/posts">Igor Minar</a>.<br/>Powered by <a href="http://angularjs.org/">AngularJS</a>. Source Code can be found <a href="https://github.com/agektmr/flexbox-experiment">here</a>.</p>
</footer>
</div> <!-- /container -->
<script>
var _gaq=[['_setAccount','UA-31105737-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='http://www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>