废话不多说，直接上代码：
1、上中下布局：
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
<title>Document</title>
<style>
body {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
padding: 0; m arg in: 0;
dis play : flex;
flex-direction: column;
}
.header, .footer {
h ei ght: 50px;
}
.body {
flex-grow: 1;
background-color: # DDD;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="body">Content</div>
<div class="footer">Footer</div>
</body>
</html>
显示效果如下：
2、左右布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
padding: 0; mar gin : 0;
display: flex;
}
.left, .right {
height: 100%;
}
.left {
width: 250px;
background-color: rgba(255,0,0,0.3);
}
.right {
display: flex;
flex-direction: column;
}
.header, .footer {
height: 50px;
}
.right, .content {
flex-grow: 1;
}
.content {
background-color: #DDD;
}
</style>
</head>
<body>
<div class="left">LeftNav</div>
<div class="right">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
页面的效果如下：
下 面对 几个关键的样式加以说明，这样就可以设计出任何想要的布局了：
flex-grow: 1; // 表示容器在主轴的 宽 度有多余时该子项占据剩余空间 position：absolute; left: 0;right: 0; top: 0; bottom: 0; // 这一组样式让该元素占满定位的父级元素
到此这篇关于使用flex布局轻松实现页面布局的示例代码的 文章 就介绍到这了,更多相关flex页面布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 使用flex布局轻松实现页面布局的示例代码 全部内容，希望文章能够帮你解决 使用flex布局轻松实现页面布局的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用flex布局轻松实现页面布局的示例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201529