flexbox.html

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