https://segmentfault.com/a/1190000006559564
****淘宝框架flexible
<meta name="flexible" content="initial-dpr=2" />
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>
https://blog.csdn.net/qq_16664643/article/details/52267562
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="favicon.png">
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
<title>再来一波</title>
</head>
<body>
<!-- 页面结构写在这里 -->
</body>
</html>
1111-flex布局取值问题
https://blog.csdn.net/aliven1/article/details/78853725
2-阮一峰博客讲解flex布局
开篇介绍=====http://www.techug.com/post/flex-examples.html
骰子案例完成布局=======http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
3圣杯布局
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
flex-direction:column;
}
.header,.footer{
flex: 0 0 80px;
background-color: #7dbcea;
}
.container{
flex: auto;
background-color: #145d9c;
display: flex;
}
.container .left,.container .right{
flex: 0 0 200px;
background-color: #3a90ce;
}
.container .main{
flex: auto;
background-color: #145d9c;
}
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footer"></div>