概述
看了阮一峰 Flex布局教程 之后，尝试写了一个简单的布局。
页面：
<html>
<body>
<div id='header'></div>
<div id='sider'></div>
<div id='main'></div>
<div id='footer'></div>
</body>
</html>样式：
html,body{
margin: 0;
padding: 0;
height: 100%;
}
body{
display: flex;
flex-wrap: wrap;
}
#header{
background: red;
height: 60px;
width: 100%;
}
#sider{
background: yellow;
width: 20%;
height: 100%;
}
#main{
background: black;
width: 80%;
}
#footer{
background: green;
width: 100%;
height: 30px;
}效果：
最后
以上就是友好冰棍为你收集整理的用Flex页面布局的小尝试的全部内容，希望文章能够帮你解决用Flex页面布局的小尝试所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复