/
flexbox.html
39 lines (39 loc) · 2.48 KB
/
flexbox.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
<!doctype html>
<html ng-app="720kb">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="dist/angular-tooltips.css">
<title>Angularjs Tooltips Flexbox Test</title>
<style>
.clearfix:after { content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }
.clearfix { display:block; }
body {margin:0; background:#FFF url(img/body.png); -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; padding:10px 2%; font:14px/24px 'Open Sans', Helvetica, Arial, sans-serif ; color:#000;}
#wrapper { background:#FFF; width:1200px; margin:0 auto; border:solid 0px #E7E7E7; border-top:5px solid #0088cc; border-radius:6px; box-shadow:0 0 3px rgba(0,0,0,0.2), inset 0 4px 0 #ededed }
#header { padding:30px 20px; border-bottom:solid 1px #e0e0e0; margin-bottom:20px; text-align:center; font-family:'Open Sans', sans-serif;}
#logo { display:inline-block; font-weight:300; margin:0 0 0px; font-size:30px; line-height:24px; color:#000; text-decoration:none; position:relative; }
#logo span{ color:#0088cc;}
section { padding:0 20px 20px}
h2{ font:300 22px/30px 'Open Sans', sans-serif; margin:0 0 10px 0; padding:0}
h2 span{color:#0088cc;}
.classname { display:block; padding:20px; border:solid 2px #CCC; text-align:center;}
/*Generated Css*/
.classname > div{ width:50px; height:50px; padding:10px; background:#037CD5; margin:5px; color:#FFF; text-shadow:0 0 0 rgba(000,000,000,.5); } .classname {min-height:250px;}
.classname{display:flex ; flex-direction:row ; flex-wrap:wrap ; justify-content:space-around ; align-items:center ; align-content:center }
</style>
</head>
<body id="demo-container" ng-controller="DemoCtrl as demoCtrl">
<section class="clearfix">
<a href="http://www.htmllion.com/css-flexbox.html" target="_blank">by HTML lion</a> <h2>CSS<span> Flexbox</span></h2>
<div class="classname">
<div>1</div>
<div tooltips tooltip-append-to-body="true" tooltip-template="A tooltip in flex box">I am a tooltip</div>
<div>3</div>
</div>
</section>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="dist/angular-tooltips.js"></script>
<script type="text/javascript" src="demo/js/index.js"></script>
</body>
</html>